快速接入

先看主来源和安装命令，再打开仓库或文档；下面只保留这个条目的关键接入事实。

详细介绍

前端设计回路MCP

编码代理可以使页面正常工作。前端设计循环通过基于屏幕截图的迭代和证明工件使其变得更好。

当基础模型使页面正常工作，但结果仍然是通用的、平坦的、粗糙的或明显设计不足时，使用它。默认情况下，主要设计工作流程保持在一个主要提供者和模型通道上，因此多模型路由是可选的，而不是默认的故事。

快速开始

从PyPI安装当前的公共版本：

pipx install frontend-design-loop-mcp

设置每个检测到的受支持客户端：

frontend-design-loop-setup --install-all-detected-clients

实际MCP调用示例：

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"
)

代理拥有的工具包变体

此仓库现在还为代理拥有的前端循环提供了一个附加的MCP入口点：

控制台脚本： frontend-design-toolkit-mcp
模块回退： PYTHONPATH=src .venv/bin/python -m design_toolkit.server

该变体故意缩小范围：

get_playbook
build_context
run_gates
preview_start
capture_screenshots
preview_stop

它不会隐藏MCP背后的视觉评分、创造力判断或补丁生成。host agent直接拥有规划、编辑、屏幕截图审核、评分、迭代和获胜者选择。

看 test-prompt-dex.md 对于端到端的Codex演习提示。

MCP做什么

frontend_design_loop_design 是主要工作流程：

host agent将MCP指向一个真实的仓库和一个具体的设计目标
MCP启动本地预览，捕获屏幕截图，并对渲染结果进行迭代
默认情况下，在规划、生成和愿景中使用相同的主提供者和模型通道，除非您明确地覆盖它
MCP返回获胜的补丁以及截图和运行工件

frontend_design_loop_eval 是证明工作流程：

当host agent已经有补丁时使用它
MCP在隔离的工作树中应用补丁，运行确定性检查，捕获屏幕截图，并返回证明工件

这就是楔子：

编码代理已经可以使页面正常工作
这个MCP帮助他们使页面变得更好
基于屏幕截图的迭代加上证明工件是差异化因素

官方MCP注册表元数据在 server.json.

证据库

公共证明集使用拥有/生成的GA SMB预览以及ACA之前/之后的完整页面。

精选英雄/顶级作物

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前/后整页

之前：ACA早期完整主页。

ACA full-page before

之后：用更强大的英雄、更清晰的排序和更好的整页结果重建了ACA主页。

ACA full-page after

请参阅中的证明注释案例研究指数.

它在实践中是如何工作的

将MCP指向一个真正的回购，并为其设定一个具体的设计目标。
它创建一个独立的工作树，启动预览，并捕获渲染的屏幕截图。
它对实际呈现的页面进行迭代，而不仅仅是原始代码。
它返回获胜的补丁、屏幕截图证明和运行工件，以便主机代理可以判断结果。

工作流摘要

`frontend_design_loop_design`

在以下情况下使用它：

该页面功能正常，但功能较弱
截面结构存在，但设计不存在
您希望MCP改进页面，而不仅仅是对其进行判断

关键默认值：

一个主要 provider + model 默认车道
planning_mode="single"
vision_mode="on"
section_creativity_mode="on"
只有在明确要求的情况下，才会进行分割规划或视野车道

`frontend_design_loop_eval`

在以下情况下使用它：

host agent已经安装了补丁
您需要确定性检查、屏幕截图和工件捕获
您希望host agent根据返回的屏幕截图判断结果

返回的证明字段包括：

deterministic_passed
vision_pending
vision_scored
final_pass
run_dir
candidate_dir
screenshot_files
patch

`frontend_design_loop_solve`

frontend_design_loop_solve 高级无人值守工作流仍然存在，但这不是主要的公开故事。

安装和设置

立即公开安装

pipx install frontend-design-loop-mcp
frontend-design-loop-setup --install-all-detected-clients

GitHub安装仍然是后备方案：

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

本地设置路径：

创造 .venv
安装软件包
安装Playwright Chromium
当支持的客户端存在时，安装检测到的客户端条目
运行内置医生
运行stdio烟雾测试

如果你想要不自动安装客户端条目的repo本地环境：

FDL_SKIP_CLIENT_INSTALL=1 ./scripts/setup.sh

安装助手

批量安装程序：

frontend-design-loop-setup --install-all-detected-clients

目标安装程序：

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

配置打印机：

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

安全默认值

默认情况下，自定义命令解析为无shell argv
shell语法、替换和内联解释器执行，如 bash -c, python -c，以及 node -e 需要 unsafe_shell_commands=true
preview_url 默认情况下，必须与启动的本地预览源和端口匹配
外部预览获取需要 unsafe_external_preview=true
预览就绪检查拒绝跨源重定向，默认情况下浏览器屏幕截图会阻止跨源子资源
自动上下文跳过常见的秘密承载路径，例如 .env*, .git/, .aws/, .ssh/, .config/gcloud/, .docker/, .kube/、令牌命名文件和服务帐户样式JSON
本机CLI提供程序继承了最小分配环境，而不是完整的主机shell环境
默认情况下，共享工作树重用目录处于关闭状态

客户端视觉是默认的证明路径 frontend_design_loop_eval，因此主机代理可以在没有提供商凭据的情况下判断屏幕截图。

仅代理MiniMax视觉通道被明确视为仅结构审查：

vision_review_mode="proxy_structural"
它们不算作全自动视觉评分

验证

离线飞行前：

PYTHONPATH=src .venv/bin/python scripts/preflight_check.py

stdio烟雾：

PYTHONPATH=src .venv/bin/python scripts/smoke_mcp_stdio.py

内置医生：

frontend-design-loop-setup --doctor
frontend-design-loop-setup --doctor --smoke

文档

分布状态

当前公共安装路径：

pipx install frontend-design-loop-mcp

目录标签

PythonClaude设计前端设计本地部署设计迭代截图验证自动化工具AI辅助设计

支持客户端

Claude

接入字段

传输方式（transport，传输协议）

未说明

鉴权方式（authType，认证方式）

none

工具数量（toolCount，工具数）

0

资源数量（resourceCount，资源数）

0

提示词数量（promptCount，提示词数）

0

权限和风险

未说明none部署方式未说明

接入前请确认传输方式、认证方式和部署位置，并根据实际工具能力限制访问范围。

安装前确认

不要直接授予不必要的文件、网络或账号权限；先核对安装命令和配置内容。

仍需确认：installCommand

来源信息

MCP World

mcpworld.com

/detail/48d414ca3965b2fc12a9e5d15efbaa9f

前端设计循环MCP是一个用于通过截图迭代和验证工件改进前端设计的工具，适用于当基础模型使页面功能正常但设计仍显普通、平面或粗糙的情况。

继续浏览同类 MCP

更多设计创作 MCP（1,700）返回 MCP 目录

上一个 MCP

Freshbooks (verified)

FreshBooks is a cloud-based accounting software service designed for small and medium-sized businesses, offering features like invoicing, expense tracking, and time management.

下一个 MCP

Front End Positivus MCP

Positivus是一个结合高转化率登录页和集成管理生态系统的综合平台，专为数字营销代理设计，具有现代黑色、白色和青柠色对比设计。

Frontend Design Loop MCP