Frontgate MCP

前端MCP

Go中本地第一个MCP服务器，分析Next.js App Router+Tailwind+shadcn/ui存储库，并为OpenCode和Codex等AI编码代理生成结构化规范、评论和质量门。

它的作用

Frontgate充当您和AI编码代理之间的前端质量层。它

• 分析 Next.js项目的设计标记、间距模式、可重用组件、路由和shell布局
• 构建艺术指导规格 从自然语言任务中，将repo上下文与您自己的视觉引用相结合（请参见 视觉参考工作流)因此Codex/OpenCode生成具有高级标识的布局
• 批评 生成的UI差异包括间距问题、组件过度使用、通用语言、缺失重用、通用CTA副本、CDN字体使用、渐变/阴影滥用等。
• 分数 10个加权质量轴的输出（间距、层次结构、布局平衡、组件重用、令牌粘附、密度、噪声、模板相似性、用户体验清晰度、产品对齐）
• 大门 基于阈值的批准/拒绝和所需纠正措施的变化

需求

• 转到1.22+
• Node.js （剧作家MCP）
• 剧作家MCP --需要为 critique_ui_output 用于执行DOM/CSS渲染分析的工具。没有它，criticism仍然有效，但跳过可选的渲染分析。

构建

go build -o frontgate-mcp ./cmd/frontgate-mcp

测试

go test ./...

冒烟测试

python3 scripts/smoke_mcp.py

或者针对特定项目：

python3 scripts/smoke_mcp.py --project /absolute/path/to/your/next-app

MCP工具

配置

开源代码

该项目包括 opencode.json 在repo根目录下。添加 frontgate 和 playwright 块到你自己的 opencode.json:

{
  "mcp": {
    "frontgate": {
      "type": "local",
      "command": ["/absolute/path/to/frontgate-mcp"],
      "enabled": true,
      "timeout": 120000
    },
    "playwright": {
      "type": "local",
      "command": ["npx", "@playwright/mcp@latest", "--isolated"],
      "enabled": true,
      "timeout": 25000
    }
  }
}

重要提示： 这 playwright MCP服务器是必需的 critique_ui_output 运行其可选的DOM/CSS渲染分析。如果你忽略了它，批评仍然有效，但会跳过基于剧作家的分析步骤。

法典

添加 ~/.codex/config.toml:

[mcp_servers.frontgate]
command = "/absolute/path/to/frontgate-mcp"
startup_timeout_sec = 15
tool_timeout_sec = 120

对于Codex中的Playwright支持，请在Codex设置中配置Playwright MCP服务器。

视觉参考工作流

Frontgate将您的参考板视为规范的一部分：

1. 将JPG/PNG/WEBP文件放入 references/ （子目录，如 references/generated-by-mcp/ 也被扫描；回购已经附带了20个样本）。
2. 跑 list_visual_references 检查每幅图像的当前艺术简报和描述。
3. 使用 add_visual_reference 描述新图像（描述+可选 style 和 elements).元数据存储在 references/references.json.
4. 每 build_ui_spec call会拉取艺术简报，并迫使代理人尊重它（颜色、排版、布局、动作、反图案， next/font 使用）。
5. get_design_guidelines 在基准/技能语料库旁边还包括相同的艺术简报，这样你就可以将确定性启发式方法与你的审美方向相结合。

字体和动画指南： 规范明确指示代理通过以下方式加载字体 next/font （从来没有 /@import 来自CDN），并将运动、渐变和形状视为有目的的艺术指导。 critique_ui_output 标记CDN字体使用、通用CTA副本、模板布局和视觉噪声。

Playwright包解析

critique_ui_output shell通过Node.js发送给Playwright。MCP尝试按以下顺序进行模块解析：

1. render_request.working_dir/node_modules （因此，在目标项目中安装Playwright： npm install -D playwright)
2. 现有的 NODE_PATH 条目
3. 全局npm根(npm root -g)--运行时有效 npm install -g playwright

如果这些都不包含 playwright，工具将升起 playwright package not found in current Node resolution path。仍然建议在本地安装，因为它使浏览器/脚本与项目保持版本一致。

项目结构

frontgate-mcp/
  cmd/frontgate-mcp/        # Entry point (main.go)
  internal/
    mcp/                     # MCP server, tool registration
    types/                   # Shared types
    repo/                    # Repository analyzer
    spec/                    # Task-to-spec builder
    critic/                  # Diff critique engine
    scoring/                 # Weighted quality scoring
    rules/                   # Heuristic rules
    parser/                  # package.json and token parsers
    playwright/              # Optional Playwright render runner
    output/                  # Output formatting
  scripts/
    smoke_mcp.py             # Smoke test harness
    frontgate_stdio_proxy.py # stdio proxy for debugging
    run_frontgate.sh         # Launch helper
  benchmarks/                # Benchmarks
  references/                # Visual reference images + references.json art brief

它如何与AI代理协同工作

1. 分析 --代理人打电话来 analyze_ui_context 通过项目路径了解代码库的模式
2. 规格 --代理人打电话来 build_ui_spec 通过任务描述，获得具有约束和验收标准的结构化规范
3. 生成 --代理（Codex/OpenCode）实现了规范
4. 批评 --代理人打电话来 critique_ui_output 随着生成的diff
5. 得分 --代理人打电话来 score_ui_quality 获得加权分数
6. 门 --代理人打电话来 gate_ui_change 检查输出是否通过质量阈值

支持的堆栈

目前目标：

• Next.js应用路由器
• Tailwind CSS
• shadcn/ui（带Radix ui原语）

支持DaisyUI检测。其他框架可能部分工作，但不受官方支持。

已知限制

• 缩小到Next.js应用路由器+顺风+shadcn/ui
• 路线理解是结构性的，而不是语义性的
• 当CSS变量存在时，令牌提取最强
• 剧作家渲染分析取决于目标项目是否具有可用的本地运行时和 playwright 包裹
• 批评是基于启发式的，不能代替产品判断