frontend-review-mcp
一个用于对 UI 编辑请求进行视觉审查的 MCP 服务器。在编辑前后，让你的代理对页面进行截图，然后调用此工具来审查编辑内容。
使用方法
Cursor
- 要在项目中安装，将 MCP 服务器添加到你的
.cursor/mcp.json文件中：
- 要全局安装，将此命令添加到你的 Cursor 设置中：
Windsurf
- 将 MCP 服务器添加到你的
~/.codeium/windsurf/mcp_config.json文件中：
工具
目前，唯一的工具是
reviewEdit。你的代理将使用以下参数调用此工具：
beforeScreenshotPath: 编辑前页面截图的绝对路径。
afterScreenshotPath: 编辑后页面截图的绝对路径。
editRequest: 用户对 UI 编辑请求的详细描述。
该工具将返回一个
yes 或 no 的响应，指示编辑是否在视觉上满足编辑请求。如果返回 no，它将提供详细的解释，说明为什么编辑不满足请求，以便你可以继续改进。审查模型
目前，审查模型是来自 Hyperbolic 的
Qwen/Qwen2-VL-72B-Instruct。如果请求失败，它将自动使用以下模型重试：备用顺序：
Qwen/Qwen2-VL-72B-Instruct
Qwen/Qwen2-VL-7B-Instruct
meta-llama/Llama-3.2-90B-Vision-Instruct
mistralai/Pixtral-12B-2409
如果你想使用不同的模型作为首选模型，可以在命令中添加
MODEL 参数：它将首先尝试指定的模型，如果失败，则尝试其他模型。
截图
你可以使用任何 MCP 服务器来截图。
AI 指令
你可以在 AI 的提示中包含以下指令，使其进行截图并审查编辑内容：
- 调用
mcp_reviewEdit函数以对更改进行视觉审查。
- 使用以下格式进行工具调用：
- 你应该将我的编辑请求总结成几句话，以便前端审查者理解你所做的更改。
- 如果更改符合要求，工具将返回 "yes"；如果不符合，则返回 "no" 并附上简要解释。继续使用相同的过程进行编辑，直到审查者返回 "yes"。
- Author:waytomcp
- URL:https://www.waytomcp.com/article/ZukAi-MCP/frontend-review-mcp
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
