Frontend Design Loop MCP

alexalexalex222/frontend-design-loop-mcp

This is a screenshot-driven design improvement workflow for coding agents. It exposes frontend_design_loop_design to iterate on working-but-rough pages using vision-grounded feedback, frontend_design_loop_eval to validate patches with deterministic checks and screenshot proof, and a toolkit variant that hands planning and edit control back to the host agent. The iteration loop runs against a local preview server, captures rendered screenshots, and returns winning patches with visual artifacts. Reach for it when the base agent got the layout functional but the result still looks generic or flat. The main workflow keeps planning, generation, and vision scoring on one provider and model lane by default, making multi-model routing opt-in rather than required.

GitHub stars: 2
tools: 3
transport: STDIO
last updated: Mar 9, 2026

View on GitHub

Tools

3 tools

Public tool metadata for what this MCP can expose to an agent.

frontend_design_loop_designThe main workflow: the host agent points the MCP at a real repo plus a concrete design goal, and the MCP boots a local preview, captures screenshots, and iterates against the rendered result.

The main workflow: the host agent points the MCP at a real repo plus a concrete design goal, and the MCP boots a local preview, captures screenshots, and iterates against the rendered result.

No parameter schema in public metadata yet.

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

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

No parameter schema in public metadata yet.

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

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

No parameter schema in public metadata yet.

Readme

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

View the full README on GitHub

Details

Repository: github.com/alexalexalex222/frontend-design-loop-mcp
Category: Design & Creative
Package: frontend-design-loop-mcp
Transport: STDIO
Registry: MCP registry, active

Related Design & Creative MCP servers

View all

AI Diagram Makererajasekar/ai-diagram-maker-mcpGenerate software diagrams from natural language, code, ASCII, images, Mermaid.2stars

Mainstreetphilpof102-svg/mainstreetReputation oracle for AI agents on Base: SAFE/CAUTION/BLOCK + 0-100 score before you pay. x402+MCP2stars

Canvas Parent Mcpchrischall/canvas-parent-mcpCanvas LMS (Instructure) for Claude — courses, grades, assignments, planner, files1stars

Chart Canvasgluip/chart-canvasCreate interactive visualizations and query data sources (SQLite, CSV, Parquet, JSON)1stars

Frame Lensmakkov-design/framelensEyes and ears for AI agents: measured cuts, easing, palette, beats and transcripts from any video.1stars

Game Mcpmoonolgerd/game-mcpDiscovers and manages installed games on Windows from Steam, Epic, GOG, Xbox, and other platforms.1stars