Frontend Design Loop MCP

Name: Frontend Design Loop MCP
Author: alexalexalex222

de alexalexalex222versión 1.0.0i★ –iSe ejecuta en tu computadora

Nombre en el registroio.github.alexalexalex222/frontend-design-loop-mcp

Instalar

Resumen

Descripción del creador (original en inglés)

Design-first MCP for coding agents that improves websites with screenshot-grounded iteration.

Los tres pilares de PopNx MCP

Estos tres nunca se combinan en una sola puntuación: las opiniones, las mediciones y la popularidad son cosas distintas.

Opinión de usuariosiAún no hay reseñasLas reseñas se abrirán junto con las cuentas en una etapa posterior
Nuestras revisiones básicasi1 de 1 superadasRevisado con información pública; el código aún no se ha escaneado
UsoiMuy nuevo↓ 21/sem · ★ –

Qué puedes hacer con él

Todavía no escribimos un resumen sencillo para este. Abajo están los datos que leímos del registro.

Conexión: Se ejecuta en tu computadora
Transporte: stdio
Categoría: Herramientas para desarrolladores

Instalación

Elige la app de IA que usas y copia la configuración.

Antes de instalar

Revisiones básicas: 1 de 1 superadas
Se ejecuta en tu computadora con los permisos de tu usuario (archivos, red, apps).
El registro no indica ninguna clave que completar.

Necesitas

PyPIuv de Python instalado (para el comando uvx)

¿Qué app usas?

ClaudeClaude CodeCursorVS CodeChatGPT

Elige tu app arriba. La recordamos, así que la próxima vez el botón dirá “Instalar en …”.

Abre Claude Desktop → Settings → Developer → Edit Config y pega esto en claude_desktop_config.json

{
  "mcpServers": {
    "frontend-design-loop": {
      "command": "uvx",
      "args": [
        "frontend-design-loop-mcp"
      ]
    }
  }
}

Ejecuta esto en tu terminal

claude mcp add frontend-design-loop -- uvx frontend-design-loop-mcp

Abrir en Cursor

O copia la configuración tú

Pégalo en .cursor/mcp.json de tu proyecto, o en ~/.cursor/mcp.json

{
  "mcpServers": {
    "frontend-design-loop": {
      "command": "uvx",
      "args": [
        "frontend-design-loop-mcp"
      ]
    }
  }
}

Tu navegador te pide permiso para abrir la app; luego la app muestra la configuración y te pide confirmar. Los valores de las claves quedan vacíos para que los completes tú.

Abrir en VS Code

O copia la configuración tú

Pégalo en .vscode/mcp.json de tu proyecto

{
  "servers": {
    "frontend-design-loop": {
      "type": "stdio",
      "command": "uvx",
      "args": [
        "frontend-design-loop-mcp"
      ]
    }
  }
}

Tu navegador te pide permiso para abrir la app; luego la app muestra la configuración y te pide confirmar. Los valores de las claves quedan vacíos para que los completes tú.

Este se ejecuta en tu computadora, y ChatGPT solo puede conectarse a servidores en internet. Elige otra app.

Tu elección se guarda en una cookie en este dispositivo; no necesitas cuenta.

Esta configuración se genera a partir de la ficha del creador en el registro. Si el README dice otra cosa, sigue el README.

Qué puede hacer

Se ejecuta en tu computadora; la lista de herramientas aparece en tu app de IA después de instalarlo.

Revisiones básicasi

Revisamos información que cualquiera puede ver; no hemos leído el código. Las revisiones que no aplican no se cuentan. · Revisado el 9 nov 2026

✓ Superada
El creador coincide con el repo
El nombre en el registro se verificó con la cuenta de GitHub alexalexalex222, dueña del repo
… Aún sin revisar
Sigue en mantenimiento
Todavía no hemos leído este repo en GitHub
… Aún sin revisar
Tiene licencia
Todavía no hemos leído este repo en GitHub
– No aplica
El endpoint responde
Este se ejecuta en tu computadora; no hay endpoint en internet
– No aplica
Inicio de sesión con OAuth
Se ejecuta en tu computadora y usa ajustes locales en su lugar
… Aún sin revisar
Sin instrucciones ocultas en las descripciones de herramientas
Se ejecuta en tu computadora; solo podemos leer listas de herramientas de endpoints en internet

Comparado con otros en Herramientas para desarrolladoresi

Más estrellas que el 0% de los otros 5566 servidores de esta categoría
Publicado en el registro más recientemente que el 6% de los otros 5566 servidores de esta categoría
Revisiones básicas iguales o mejores que el 100% de los otros 5566 servidores de esta categoría

Comparado con todos los servidores activos de esta categoría en el registro. Las estrellas solo cuentan cuando quien lo publica es dueño del repo.

Preguntas frecuentes

¿Es seguro Frontend Design Loop MCP?

Superó 1 de 1 revisiones básicas aplicables. No hemos leído el código. Antes de agregar una clave o un token, revisa qué acceso pide el servidor y usa una clave que tenga solo los permisos que necesitas.

¿Qué claves o códigos necesita?

El registro no indica ninguna clave obligatoria, aunque algunos servidores te piden iniciar sesión la primera vez que los usas.

¿Se ejecuta en mi computadora o en la nube?

Se ejecuta en tu computadora. Tu app de IA lo inicia cuando hace falta, y los datos no pasan por los servidores del creador (a menos que el propio servidor llame a un servicio en línea).

¿Sigue en mantenimiento?

El repo de GitHub cambió por última vez –, y la última versión (1.0.0) llegó al registro hace 8 meses.

¿Qué apps pueden usarlo?

Las apps compatibles con MCP, como Claude Desktop, Claude Code, Cursor y VS Code. También necesitas Python (uv) en tu computadora.

¿Qué puedo usar en su lugar?

En la misma categoría: GitHub, Desktop Commander, Cloudflare MCP

Alternativas

Servidores de la misma categoría hechos por otros creadores, ordenados por estrellas.

Cómo leer una tarjeta:↓ Descargas por semanai★ Estrellas de GitHubiTres pilares: reseñas · revisiones · usoiActualizado = fecha en que se publicó la última versión en el registroi

GitHub

Connect AI assistants to GitHub - manage repos, issues, PRs, and workflows through natural language.

de githubMuy usado★ 34,2 milActualizado hace 5 días

Computadora o nube

Instalar

Desktop Commander

MCP server for terminal commands, file operations, and process management

de wonderwhy-erMuy usado↓ 709,6 mil/sem★ 10,2 milActualizado hace 17 días

Se ejecuta en tu computadora

Instalar

Cloudflare MCP

Cloudflare MCP servers

de cloudflareMuy usado★ 4,4 milActualizado hace 14 meses

Se ejecuta en la nube✓ mcp.cloudflare.com

Instalar

README del creador

Abrir el README

Copiado tal cual del repo del creador. PopNx MCP no lo ha revisado ni lo respalda. Se quitaron HTML, imágenes y scripts. Los enlaces llevan fuera de este sitio.

Frontend Design Loop MCP

Coding agents can get a page functional. Frontend Design Loop makes it materially better with screenshot-grounded iteration and proof artifacts.

Use it when the base model got the page working but the result is still generic, flat, rough, or visibly under-designed. The main design workflow stays on one main provider and model lane by default, so multi-model routing is opt-in instead of the default story.

Quick Start

Install the current public build from PyPI:

pipx install frontend-design-loop-mcp

Set up every detected supported client:

frontend-design-loop-setup --install-all-detected-clients

Real MCP call example:

frontend_design_loop_design(

repo_path="/absolute/path/to/site", goal="make the homepage look materially more premium without changing the information architecture", provider="gemini_cli", model="gemini-3.1-pro-preview", preview_command="python3 -m http.server {port}", preview_url="http://127.0.0.1:{port}/index.html" )

Agent-Owned Toolkit Variant

This repo now also ships an additive MCP entrypoint for agent-owned frontend loops:

console script: frontend-design-toolkit-mcp
module fallback: PYTHONPATH=src .venv/bin/python -m design_toolkit.server

That variant is intentionally narrow:

get_playbook
build_context
run_gates
preview_start
capture_screenshots
preview_stop

It does not hide vision scoring, creativity judging, or patch generation behind MCP. The host agent owns planning, edits, screenshot review, scoring, iteration, and winner selection directly.

See test-prompt-codex.md for the end-to-end Codex exercise prompt.

What The MCP Does

frontend_design_loop_design is the main workflow:

the host agent points the MCP at a real repo plus a concrete design goal
the MCP boots a local preview, captures screenshots, and iterates against the rendered result
the same main provider and model lane is used by default across planning, generation, and vision unless you explicitly override it
the MCP returns the winning patch plus screenshots and run artifacts

frontend_design_loop_eval is the proof workflow:

use it when the host agent already has the patch
the MCP applies the patch in an isolated worktree, runs deterministic checks, captures screenshots, and returns proof artifacts

This is the wedge:

coding agents can already get pages working
this MCP helps them make pages materially better
screenshot-grounded iteration plus proof artifacts is the differentiator

Official MCP Registry metadata is tracked in server.json.

Proof Gallery

The public proof set uses owned/generated GA SMB previews plus the ACA full-page before/after.

Selected Hero / Top Crops

11 Budget Movers Augusta

13 Peachtree Flooring Atlanta

19 TNT Cabinets Columbus

21 Henry Plumbing Savannah

22 Silverback Electric Savannah

25 Robins Body & Paint Warner Robins

34 Proof Roofing Services Gainesville

45 Metro Storage Columbus

47 Miller Light Construction Commerce

ACA Full-Page Before / After

Before: early ACA full homepage.

After: rebuilt ACA homepage with a stronger hero, cleaner sequencing, and a materially better full-page result.

See the proof notes in the case studies index.

How It Works In Practice

Point the MCP at a real repo and give it a concrete design goal.
It creates an isolated worktree, boots a preview, and captures rendered screenshots.
It iterates against the actual rendered page instead of only raw code.
It returns the winning patch, screenshot proof, and run artifacts so the host agent can judge the result.

Workflow Summary

`frontend_design_loop_design`

Use it when:

the page is functional but weak
the section structure is there but the design is not
you want the MCP to improve the page instead of only judging it

Key defaults:

one main provider + model lane by default
planning_mode="single"
vision_mode="on"
section_creativity_mode="on"
split planner or vision lanes only happen when explicitly requested

`frontend_design_loop_eval`

Use it when:

the host agent already has the patch
you want deterministic checks, screenshots, and artifact capture
you want the host agent to judge the result from returned screenshots

Returned proof fields include:

deterministic_passed
vision_pending
vision_scored
final_pass
run_dir
candidate_dir
screenshot_files
patch

`frontend_design_loop_solve`

frontend_design_loop_solve still exists for advanced unattended workflows, but it is not the main public story.

Install And Setup

Public install now

pipx install frontend-design-loop-mcp

frontend-design-loop-setup --install-all-detected-clients

GitHub install remains the fallback:

pipx install git+https://github.com/alexalexalex222/frontend-design-loop-mcp.git

frontend-design-loop-setup --install-all-detected-clients

Local clone path

git clone https://github.com/alexalexalex222/frontend-design-loop-mcp.git

cd frontend-design-loop-mcp ./scripts/setup.sh

The local setup path:

creates .venv
installs the package
installs Playwright Chromium
installs detected client entries when supported clients are present
runs the built-in doctor
runs the stdio smoke test

If you want the repo-local environment without auto-installing client entries:

FDL_SKIP_CLIENT_INSTALL=1 ./scripts/setup.sh

Setup helpers

Bulk installer:

frontend-design-loop-setup --install-all-detected-clients

Targeted installers:

frontend-design-loop-setup --install-claude --scope user

frontend-design-loop-setup --install-codex frontend-design-loop-setup --install-gemini frontend-design-loop-setup --install-droid frontend-design-loop-setup --install-opencode

Config printers:

frontend-design-loop-setup --print-claude-config

frontend-design-loop-setup --print-codex-config frontend-design-loop-setup --print-gemini-config frontend-design-loop-setup --print-droid-config frontend-design-loop-setup --print-opencode-config

Safety Defaults

custom commands are parsed as shell-free argv by default
shell syntax, substitutions, and inline interpreter execution like bash -c, python -c, and node -e require unsafe_shell_commands=true
preview_url must match the launched local preview origin and port by default
external preview fetches require unsafe_external_preview=true
preview readiness checks reject cross-origin redirects, and browser screenshots block cross-origin subresources by default
auto-context skips common secret-bearing paths such as .env*, .git/, .aws/, .ssh/, .config/gcloud/, .docker/, .kube/, token-named files, and service-account-style JSON
native CLI providers inherit a minimal allowlisted environment instead of the full host shell environment
shared worktree reuse directories are off by default

Client-side vision is the default proof path for frontend_design_loop_eval, so the host agent can judge the screenshots without provider credentials.

Proxy-only MiniMax vision lanes are explicitly treated as structural-only review:

vision_review_mode="proxy_structural"
they do not count as full automated visual scoring

Verification

Offline preflight:

PYTHONPATH=src .venv/bin/python scripts/preflight_check.py

stdio smoke:

PYTHONPATH=src .venv/bin/python scripts/smoke_mcp_stdio.py

Built-in doctor:

frontend-design-loop-setup --doctor

frontend-design-loop-setup --doctor --smoke

Docs

Workflow reference
Launch checklist
Directory submission copy
Case studies

Distribution State

Current public install path:

pipx install frontend-design-loop-mcp

Frontend Design Loop MCP

Resumen

Los tres pilares de PopNx MCP

Qué puedes hacer con él

Instalación

Antes de instalar

Qué puede hacer

Revisiones básicasi

El creador coincide con el repo

Sigue en mantenimiento

Tiene licencia

El endpoint responde

Inicio de sesión con OAuth

Sin instrucciones ocultas en las descripciones de herramientas

Comparado con otros en Herramientas para desarrolladoresi

Preguntas frecuentes

Alternativas

GitHub

Desktop Commander

Cloudflare MCP

README del creador

Frontend Design Loop MCP

Quick Start

Agent-Owned Toolkit Variant

What The MCP Does

Proof Gallery

Selected Hero / Top Crops

ACA Full-Page Before / After

How It Works In Practice

Workflow Summary

frontend_design_loop_design

frontend_design_loop_eval

frontend_design_loop_solve

Install And Setup

Public install now

Local clone path

Setup helpers

Safety Defaults

Verification

Docs

Distribution State

`frontend_design_loop_design`

`frontend_design_loop_eval`

`frontend_design_loop_solve`