Server data from the Official MCP Registry
Design-first MCP for coding agents that improves websites with screenshot-grounded iteration.
Design-first MCP for coding agents that improves websites with screenshot-grounded iteration.
Valid MCP server (1 strong, 0 medium validity signals). 5 known CVEs in dependencies (0 critical, 2 high severity) Package registry verified. Imported from the Official MCP Registry.
6 files analyzed · 6 issues found
Security scores are indicators to help you make informed decisions, not guarantees. Always review permissions before connecting any MCP server.
Add this to your MCP configuration file:
{
"mcpServers": {
"io-github-alexalexalex222-frontend-design-loop-mcp": {
"args": [
"-y",
"frontend-design-loop-template"
],
"command": "npx"
}
}
}From the project's GitHub README.
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.
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"
)
This repo now also ships an additive MCP entrypoint for agent-owned frontend loops:
frontend-design-toolkit-mcpPYTHONPATH=src .venv/bin/python -m design_toolkit.serverThat variant is intentionally narrow:
get_playbookbuild_contextrun_gatespreview_startcapture_screenshotspreview_stopIt 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.
frontend_design_loop_design is the main workflow:
frontend_design_loop_eval is the proof workflow:
This is the wedge:
Official MCP Registry metadata is tracked in server.json.
The public proof set uses owned/generated GA SMB previews plus the 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.
frontend_design_loop_designUse it when:
Key defaults:
provider + model lane by defaultplanning_mode="single"vision_mode="on"section_creativity_mode="on"frontend_design_loop_evalUse it when:
Returned proof fields include:
deterministic_passedvision_pendingvision_scoredfinal_passrun_dircandidate_dirscreenshot_filespatchfrontend_design_loop_solvefrontend_design_loop_solve still exists for advanced unattended workflows, but it is not the main public story.
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
git clone https://github.com/alexalexalex222/frontend-design-loop-mcp.git
cd frontend-design-loop-mcp
./scripts/setup.sh
The local setup path:
.venvIf you want the repo-local environment without auto-installing client entries:
FDL_SKIP_CLIENT_INSTALL=1 ./scripts/setup.sh
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
bash -c, python -c, and node -e require unsafe_shell_commands=truepreview_url must match the launched local preview origin and port by defaultunsafe_external_preview=true.env*, .git/, .aws/, .ssh/, .config/gcloud/, .docker/, .kube/, token-named files, and service-account-style JSONClient-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"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
Current public install path:
pipx install frontend-design-loop-mcp
Be the first to review this server!
by Modelcontextprotocol · Developer Tools
Read, search, and manipulate Git repositories programmatically
by Toleno · Developer Tools
Toleno Network MCP Server — Manage your Toleno mining account with Claude AI using natural language.
by mcp-marketplace · Developer Tools
Create, build, and publish Python MCP servers to PyPI — conversationally.
by Microsoft · Content & Media
Convert files (PDF, Word, Excel, images, audio) to Markdown for LLM consumption
by mcp-marketplace · Developer Tools
Scaffold, build, and publish TypeScript MCP servers to npm — conversationally
by mcp-marketplace · Finance
Free stock data and market news for any MCP-compatible AI assistant.