Design-first MCP for coding agents that improves websites with screenshot-grounded iteration.
Connect Frontend Design Loop MCP to Claude, Cursor or any other MCP client and it stops being a tab you switch to. Design-first MCP for coding agents that improves websites with screenshot-grounded iteration. The frontend design loop mcp mcp server is what makes that connection.
Coding agents can get a page functional. Frontend Design Loop makes it materially better with screenshot-grounded iteration and proof artifacts.
frontend-design-loop-mcp on PyPI is all you need. Most clients run it directly, so configuration is a few lines and a restart.
The toolset is worth reading before you wire it up, because it tells you what the integration is really for:
get_playbook — build_contextrun_gates — preview_startcapture_screenshots — preview_stopscreenshot — grounded iteration plus proof artifacts is the differentiatordeterministic_passed — vision_pendingvision_scored — final_passrun_dir — candidate_dirscreenshot_files — patchauto — context skips common secret-bearing paths such as .env*, .git/, .aws/, .ssh/, .config/gcloud/, .docker/, .kube/, token-named files, andfrontend_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 insteadfrontend_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 tofrontend_design_loop_solve — frontend_design_loop_solve still exists for advanced unattended workflows, but it is not the main public storyAmong the browser automation options, the useful question is rarely "what can it do" but "what does it cost you to run" — permissions, credentials, and how much of your context its toolset consumes. Frontend Design Loop MCP's toolset — get_playbook, run_gates, capture_screenshots and 9 more — is a fair guide to whether it matches your workflow. It is maintained by alexalexalex222; worth a glance at recent repository activity before you build anything load-bearing on it.
SyncDev reviews every entry in this directory against the project's own documentation before publishing, and revisits them as servers change.
| Tool | What it does |
|---|---|
| get_playbook | build_context |
| run_gates | preview_start |
| capture_screenshots | preview_stop |
| screenshot | grounded iteration plus proof artifacts is the differentiator |
| deterministic_passed | vision_pending |
| vision_scored | final_pass |
| run_dir | candidate_dir |
| screenshot_files | patch |
| 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 |
| 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 |
| 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 |
| frontend_design_loop_solve | frontend_design_loop_solve still exists for advanced unattended workflows, but it is not the main public story. |
{
"mcpServers": {
"frontend-design-loop": {
"command": "uvx",
"args": ["frontend-design-loop-mcp"]
}
}
}Add to claude_desktop_config.json, then restart Claude Desktop.
Microsoft's official browser automation server — drive a real browser through the accessibility tree, no screenshots needed.
Industrial-strength web extraction — render, scrape, crawl and search entire sites into clean markdown.
The original Chromium automation reference server — simple, screenshot-driven browser control.
Give your coding agent the full DevTools toolbox: traces, network, console, heap snapshots and Lighthouse.
Puppeteer-powered browser control that drives pages from the accessibility tree instead of pixels.
Cloud browsers for AI agents — automation sessions that run in Browserbase's fleet, not on your machine.