使用说明
@forgespace/ui-mcp
AI-driven UI and backend code generation via Model Context Protocol. 22 tools, 5 frameworks, brand-aware, npm-published, and MCP Registry-ready.
部分 锻造空间 生态系统。
建筑
@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配置（克劳德代码、风帆、光标、VS代码）：
{
"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、无头UI、Material、PrimeVue |
generate_form |
代码 | 带有Zod/Yup验证、多步骤流程、可访问标记的生产表单 |
generate_page_template |
代码 | 预构建页面（登录、仪表板、身份验证、定价、CRUD） |
generate_prototype |
设计 | 带导航的交互式HTML原型 |
generate_design_image |
设计 | 用户界面屏幕的SVG/PNG模型 |
image_to_component |
代码 | 框架特定组件的截图/线框 |
refine_component |
代码 | 通过自然语言反馈改进组件 |
generate_api_route |
后端 | API路由，包括验证、身份验证和错误处理 |
generate_backend_module |
后端 | 具有路由、服务、中间件的全功能模块 |
scaffold_backend |
后端 | 使用身份验证、数据库和监控完成后端项目 |
generate_from_template_pack |
代码 | 精选包中的多页应用程序（SaaS、Landing、AI Chat） |
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、金额、原因、货币）请求付款退款 |
manage_training |
ML | 训练数据摄取和微调 |
框架和库支持
| 库 | React | Vue | Angular | Svelte | HTML |
|---|---|---|---|---|---|
| shadcn/ui | shadcn/ui | shadcn-vue | 顺风 | 比特ui | 顺风 |
| 根 | @ui/react | @ui/vue | 顺风 | @ui/svelte | 顺风 |
| 无头UI | @headlessui/react | @Headless UI/vue | 顺风 | @headlesui/svelte | 顺风 |
| 材质 | @mui/Material | Vuetify | @角度/材质 | @smui/材质 | 顺风 |
| PrimeVue | 无头UI | PrimeVue | 启动 | 顺风 | 顺风 |
| 无 | 顺风CSS | 顺风CSS |
品牌标识整合
所有生成工具都接受可选 brand_identity 参数--JSON
字符串从 品牌mcps
generate_brand_identity 工具。如果提供，品牌颜色、排版和
间距被注入到设计环境中。
环境变量
| 变量 | 必填 | 描述 |
|---|---|---|
FIGMA_ACCESS_TOKEN |
仅适用于Figma工具 | 令牌来自 Figma设置 |
SENTRY_DSN |
可选 | 用于错误报告的哨兵DSN（未捕获的异常和未处理的拒绝） |
分布
- npm --发表于
@forgespace/ui-mcp - MCP注册表元数据 --存储库包括
server.json和mcpName注册表提交元数据 - 标签发布自动化 --推动
v*运行带有出处的npm publish， 然后通过GitHub OIDC将相同版本发布到MCP注册表 - 每周注册表操作 —
.github/workflows/mcp-registry-status.yml刷新了npm和MCP注册表漂移、可见性和下一个问题 行动 - GitHub --来源、问题、发布和讨论在 锻造空间
发展
npm install && npm run build
npm test # 437 tests, 35 suites
npm run validate # lint + format + typecheck + test
社区
GitHub工作流
此存储库遵循共享的Forge Space GitHub工作管理基线：
- 讨论想法、RFC、问答和公告
- 可操作交付工作的问题
- 路线图可见性和跨回购报告项目
看
Forge Space/.github GOVERNANCE.md
对于整个组织范围的合同。
执行CodeQL的计划监视运行需要作业范围
security-events: write SARIF上传权限。
预定的 Security Monitoring 工作流故意跳过Codecov上传
并依靠本地覆盖摘要生成来减少来自
第三方动作下载不稳定。
许可证
麻省理工学院
