Frontend Design Loop MCP

Name: Frontend Design Loop MCP
Author: alexalexalex222

von alexalexalex222Version 1.0.0i★ –iLäuft auf deinem Computer

Name in der Registryio.github.alexalexalex222/frontend-design-loop-mcp

Installieren

Überblick

Beschreibung vom Entwickler (englisches Original)

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

Die drei Säulen von PopNx MCP

Diese drei werden nie zu einer Punktzahl zusammengefasst: Meinungen, Messungen und Beliebtheit sind verschiedene Dinge.

Stimmen der NutzeriNoch keine BewertungenBewertungen starten in einem späteren Schritt zusammen mit Benutzerkonten
Unsere Basischecksi1 von 1 bestandenAnhand öffentlicher Informationen geprüft; Code noch nicht gescannt
NutzungiGanz neu↓ 21/Wo. · ★ –

Was du damit machen kannst

Für diesen Server haben wir noch keine Zusammenfassung in einfacher Sprache geschrieben. Unten stehen die Fakten, die wir aus der Registry gelesen haben.

Verbindung: Läuft auf deinem Computer
Transport: stdio
Kategorie: Entwicklertools

Installation

Wähle die KI-App, die du nutzt, und kopiere die Einstellungen.

Bevor du installierst

Basischecks: 1 von 1 bestanden
Läuft auf deinem Computer mit den Rechten deines Benutzerkontos (Dateien, Netzwerk, Apps).
Die Registry nennt keinen Schlüssel zum Eintragen.

Du brauchst

PyPIuv für Python installiert (für den Befehl uvx)

Welche App nutzt du?

ClaudeClaude CodeCursorVS CodeChatGPT

Wähle oben deine App. Wir merken sie uns, damit der Button beim nächsten Mal „In … installieren“ anzeigt.

Öffne Claude Desktop → Settings → Developer → Edit Config und füge dies in claude_desktop_config.json ein

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

Führe das in deinem Terminal aus

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

In Cursor öffnen

Oder kopier die Einstellungen selbst

In .cursor/mcp.json in deinem Projekt oder in ~/.cursor/mcp.json einfügen

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

Dein Browser fragt, ob er die App öffnen darf, dann zeigt die App die Einstellungen und bittet dich um Bestätigung. Schlüsselwerte bleiben leer, damit du sie selbst einträgst.

In VS Code öffnen

Oder kopier die Einstellungen selbst

In .vscode/mcp.json in deinem Projekt einfügen

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

Dein Browser fragt, ob er die App öffnen darf, dann zeigt die App die Einstellungen und bittet dich um Bestätigung. Schlüsselwerte bleiben leer, damit du sie selbst einträgst.

Dieser Server läuft auf deinem Computer, und ChatGPT kann sich nur mit Servern im Internet verbinden. Wähle eine andere App.

Deine Auswahl bleibt in einem Cookie auf diesem Gerät; kein Konto nötig.

Diese Einstellungen werden aus dem Registry-Eintrag des Entwicklers erzeugt. Wenn in der README etwas anderes steht, folge der README.

Was er kann

Läuft auf deinem Computer; die Tool-Liste erscheint nach der Installation in deiner KI-App.

Basischecksi

Wir prüfen Informationen, die jeder sehen kann; den Code haben wir nicht gelesen. Checks, die nicht zutreffen, werden nicht mitgezählt. · Geprüft am 8. Nov. 2026

✓ Bestanden
Entwickler passt zum Repo
Der Registry-Name wurde mit dem GitHub-Konto alexalexalex222 bestätigt, dem das Repo gehört
… Noch nicht geprüft
Wird noch gepflegt
Dieses Repo haben wir noch nicht von GitHub gelesen
… Noch nicht geprüft
Hat eine Lizenz
Dieses Repo haben wir noch nicht von GitHub gelesen
– Nicht zutreffend
Endpunkt antwortet
Dieser Server läuft auf deinem Computer; es gibt keinen Endpunkt im Internet
– Nicht zutreffend
Anmeldung mit OAuth
Läuft auf deinem Computer und nutzt stattdessen lokale Einstellungen
… Noch nicht geprüft
Keine versteckten Anweisungen in Tool-Beschreibungen
Läuft auf deinem Computer; Tool-Listen können wir nur von Endpunkten im Internet lesen

Im Vergleich mit anderen in Entwicklertoolsi

Mehr Sterne als 0 % der anderen 4932 Server in dieser Kategorie
Neuer in der Registry veröffentlicht als 6 % der anderen 4932 Server in dieser Kategorie
Basischecks gleich gut wie oder besser als bei 100 % der anderen 4932 Server in dieser Kategorie

Verglichen mit allen aktiven Servern dieser Kategorie in der Registry. Sterne zählen nur, wenn dem Herausgeber das Repo gehört.

Häufige Fragen

Ist Frontend Design Loop MCP sicher?

Er hat 1 von 1 zutreffenden Basischecks bestanden. Den Code haben wir nicht gelesen. Bevor du einen Schlüssel oder Token hinzufügst, sieh nach, welche Zugriffe der Server verlangt, und nutze einen Schlüssel, der nur die Berechtigungen hat, die du brauchst.

Welche Schlüssel oder Codes braucht er?

Die Registry nennt keinen erforderlichen Schlüssel, manche Server bitten dich aber bei der ersten Nutzung, dich anzumelden.

Läuft er auf meinem Computer oder in der Cloud?

Er läuft auf deinem Computer. Deine KI-App startet ihn bei Bedarf, und die Daten laufen nicht über die Server des Entwicklers (außer der Server ruft selbst einen Onlinedienst auf).

Wird er noch gepflegt?

Das GitHub-Repo wurde zuletzt – geändert, und die neueste Version (1.0.0) kam vor 8 Monaten in die Registry.

Welche Apps können ihn nutzen?

Apps, die MCP unterstützen, etwa Claude Desktop, Claude Code, Cursor und VS Code. Außerdem brauchst du Python (uv) auf deinem Computer.

Was kann ich stattdessen nutzen?

In derselben Kategorie: GitHub, Desktop Commander, Cloudflare MCP

Alternativen

Server derselben Kategorie von anderen Entwicklern, sortiert nach Sternen.

So liest du eine Karte:↓ Downloads pro Wochei★ GitHub-SterneiDrei Säulen: Bewertungen · Checks · NutzungiAktualisiert = neueste Version in der Registry veröffentlichti

GitHub

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

von githubWeit verbreitet★ 34.245Aktualisiert vor 5 Tagen

Computer oder Cloud

Installieren

Desktop Commander

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

von wonderwhy-erWeit verbreitet↓ 709.596/Wo.★ 10.225Aktualisiert vor 17 Tagen

Läuft auf deinem Computer

Installieren

Cloudflare MCP

Cloudflare MCP servers

von cloudflareWachsend★ 4446Aktualisiert vor 14 Monaten

Läuft in der Cloud✓ mcp.cloudflare.com

Installieren

README vom Entwickler

README öffnen

Unverändert aus dem Repo des Entwicklers übernommen. PopNx MCP hat den Inhalt weder geprüft noch empfiehlt es ihn. HTML, Bilder und Skripte wurden entfernt. Links führen von dieser Website weg.

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

Überblick

Die drei Säulen von PopNx MCP

Was du damit machen kannst

Installation

Bevor du installierst

Was er kann

Basischecksi

Entwickler passt zum Repo

Wird noch gepflegt

Hat eine Lizenz

Endpunkt antwortet

Anmeldung mit OAuth

Keine versteckten Anweisungen in Tool-Beschreibungen

Im Vergleich mit anderen in Entwicklertoolsi

Häufige Fragen

Alternativen

GitHub

Desktop Commander

Cloudflare MCP

README vom Entwickler

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`