ui-mcp

Forge Space 生态系统的一部分。

架构

@forgespace/ui-mcp 是一个轻量级协议适配器。所有 AI/生成逻辑都位于 @forgespace/siza-gen 中：

@forgespace/ui-mcp (~355 KB)       @forgespace/siza-gen (~1.8 MB)
├── src/index.ts (MCP server)      ├── ml/        (embeddings, quality, training)
├── tools/     (22 tool defs)      ├── generators/ (react, vue, angular, svelte, html)
├── services/  (figma, analysis)   ├── registry/   (502 snippets, compositions, packs)
├── resources/ (MCP resources)     ├── feedback/   (self-learning, pattern promotion)
└── lib/       (browser, image)    └── quality/    (anti-generic rules, diversity)

快速开始

# NPX (instant)
npx -y @forgespace/ui-mcp@latest

# Global install
npm install -g @forgespace/ui-mcp && forgespace-ui-mcp

# Docker
docker build -t forgespace-ui-mcp . && docker run --rm -i forgespace-ui-mcp

IDE 集成

添加到 MCP 配置中（Claude Code、Windsurf、Cursor、VS Code）：

{
  "mcpServers": {
    "forgespace-ui-mcp": {
      "command": "npx",
      "args": ["-y", "@forgespace/ui-mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your_token_here"
      }
    }
  }
}

工具

工具	类别	描述
scaffold_full_application	代码	完整的项目样板（React/Next.js/Vue/Angular/HTML + Tailwind）
generate_ui_component	代码	提供样式审查的 UI 组件，支持 shadcn/ui、Radix、Headless UI、Material、PrimeVue
generate_form	代码	可用于生产环境的表单，支持 Zod/Yup 验证、多步骤流程和无障碍标记
generate_page_template	代码	预构建页面（落地页、仪表板、身份验证、定价、CRUD）
generate_prototype	设计	带导航功能的交互式 HTML 原型
generate_design_image	设计	UI 屏幕的 SVG/PNG 线框图
image_to_component	代码	将屏幕截图/线框图转换为特定框架的组件
refine_component	代码	根据自然语言反馈改进组件
generate_api_route	后端	带验证、身份验证和错误处理的 API 路由
generate_backend_module	后端	包含路由、服务和中间件的完整功能模块
scaffold_backend	后端	包含身份验证、数据库和监控的完整后端项目
generate_from_template_pack	代码	根据精选模板包生成多页面应用（SaaS、落地页、AI 聊天）
figma_context_parser	上下文	读取 Figma 文件、提取设计令牌并映射到 Tailwind
figma_push_variables	设计	将设计令牌写回 Figma
fetch_design_inspiration	上下文	从 URL 中提取视觉元数据
analyze_design_references	上下文	分析设计参考并检测模式
analyze_design_image	ML	分析设计图像以生成训练数据
analyze_component_library	上下文	分析组件库模式
audit_accessibility	质量	WCAG 2.1 审查并提供修复建议
submit_feedback	质量	提交反馈以改进后续输出
payments_refund	后端	使用经 Zod 验证的参数（payment_id、amount、reason、currency）申请退款
manage_training	ML	训练数据导入和微调

框架与库支持

库	React	Vue	Angular	Svelte	HTML
shadcn/ui	shadcn/ui	shadcn-vue	Tailwind	bits-ui	Tailwind
Radix	@radix-ui/react	@radix-ui/vue	Tailwind	@radix-ui/svelte	Tailwind
Headless UI	@headlessui/react	@headlessui/vue	Tailwind	@headlessui/svelte	Tailwind
Material	@mui/material	Vuetify	@angular/material	@smui/material	Tailwind
PrimeVue	Headless UI	primevue	primeng	Tailwind	Tailwind
none	Tailwind CSS	Tailwind CSS	Tailwind CSS	Tailwind CSS	Tailwind CSS

品牌标识集成

所有生成工具都接受可选的 brand_identity 参数——一个来自 branding-mcp 的 JSON 字符串，由 generate_brand_identity 工具生成。提供该参数后，品牌颜色、字体排印和 间距会注入设计上下文。

环境变量

变量	必需	描述
FIGMA_ACCESS_TOKEN	仅 Figma 工具需要	来自 Figma Settings 的令牌
SENTRY_DSN	可选	用于错误报告的 Sentry DSN（未捕获的异常和未处理的拒绝）

发布

• npm — 发布为 @forgespace/ui-mcp
• MCP Registry 元数据 — 仓库包含 server.json 和用于提交到注册表的 mcpName 元数据
• 标签发布自动化 — 推送 v* 会运行带有来源证明的 npm 发布， 随后通过 GitHub OIDC 将相同版本发布到 MCP Registry
• 每周注册表运维 — .github/workflows/mcp-registry-status.yml 会更新一个 issue，其中包含 npm 和 MCP Registry 的差异、可见性及后续操作
• GitHub — 源代码、问题、发布和 Discussions 均托管在 Forge Space

开发

npm install && npm run build
npm test                  # 437 tests, 35 suites
npm run validate          # lint + format + typecheck + test

社区

• 文档
• GitHub 讨论区
• 问题跟踪器

GitHub 工作流

此仓库遵循 Forge Space 共享的 GitHub 工作管理基线：

• 使用 Discussions 讨论想法、RFC、问答和公告
• 使用 Issues 跟踪可执行的交付工作
• 使用 Projects 查看路线图并进行跨仓库报告

组织范围的约定请参阅 Forge-Space/.github GOVERNANCE.md。

执行 CodeQL 的定期监控运行需要作业级的 security-events: write 权限才能上传 SARIF。

定期运行的 Security Monitoring 工作流会有意跳过 Codecov 上传， 并依靠本地覆盖率摘要生成，以减少第三方操作下载不稳定导致的误报。

许可证

MIT