Frontend Design Loop MCP server

Frontend Design Loop MCP

<!-- mcp-name: io.github.alexalexalex222/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

frontenddesignloop_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

frontenddesignloop_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

Shortened. The full README is on GitHub.