Ui Mcp

io.github.Forge-Space由 GitHub 帳號 Forge-Space 發布v0.25.0更新於 Oct 24, 2026

Forge Space MCP server for UI and backend generation via stdio transport.

已驗證STDIO僅桌面開發者工具媒體與設計

概覽

AI 產生的概覽

本機 MCP 伺服器，可產生 React、Vue、Angular、Svelte 與 HTML 的介面元件、頁面、原型與後端程式碼，並提供 Figma 與設計分析工具。

可以做什麼
  • 建立完整前端專案，並依範本包產生多頁應用程式
  • 產生 UI 元件、表單、頁面範本與可互動原型，並依自然語言回饋調整元件
  • 產生 API 路由、後端功能模組與完整後端專案
  • 讀取 Figma 檔案與設計權杖、將設計權杖寫回 Figma，並分析設計參考與元件庫
  • 依 WCAG 2.1 進行無障礙稽核、分析設計圖片、管理訓練資料並提交回饋
適用情境
適合讓助理快速建立或擴充網頁專案：依指定框架產出樣板、元件、表單、頁面或後端骨架，或把 Figma 設計與截圖轉成程式碼。
執行需求
以 stdio 在本機執行，通常透過 npx 或全域 npm 安裝（需要 Node.js），文件亦提供 Docker 方式。僅 Figma 相關工具需要 FIGMA_ACCESS_TOKEN，SENTRY_DSN 為選用的錯誤回報設定。清單未宣告任何驗證。
安裝前請注意
Figma 工具需要 Figma 存取權杖，且 figma_push_variables 會把設計權杖寫回 Figma 檔案。工具清單包含 payments_refund，使用前應確認其實際行為。產生的程式碼與設計資料來自隨附的產生套件，選用的 Sentry 回報會把錯誤資料傳送給第三方。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 Ui Mcp，將其新增到工作區。
  2. 為需要使用其工具的對話啟用該服務。

Desktop only，透過 STDIO。 STDIO 服務會啟動本機處理程序，因此需要 SourceWeft 桌面主機。

其他 MCP 客戶端

參照 儲存庫 中的啟動說明。

README

[Forge Space]

@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.

[npm version] [CI] [Coverage] [License: MIT] [TypeScript] [MCP] [Node.js]

Part of the Forge Space ecosystem.

[Siza Capabilities]

Architecture

@forgespace/ui-mcp is a thin protocol adapter. All AI/generation logic lives in @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)

Quick Start

bash
# NPX (instant)npx -y @forgespace/ui-mcp@latest
# Global installnpm install -g @forgespace/ui-mcp && forgespace-ui-mcp
# Dockerdocker build -t forgespace-ui-mcp . && docker run --rm -i forgespace-ui-mcp

IDE Integration

Add to your MCP configuration (Claude Code, Windsurf, Cursor, VS Code):

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

Tools

ToolCategoryDescription
scaffold_full_applicationCodeFull project boilerplate (React/Next.js/Vue/Angular/HTML + Tailwind)
generate_ui_componentCodeUI components with style audit, supports shadcn/ui, Radix, Headless UI, Material, PrimeVue
generate_formCodeProduction forms with Zod/Yup validation, multi-step flows, accessible markup
generate_page_templateCodePre-built pages (landing, dashboard, auth, pricing, CRUD)
generate_prototypeDesignInteractive HTML prototypes with navigation
generate_design_imageDesignSVG/PNG mockups of UI screens
image_to_componentCodeScreenshot/wireframe to framework-specific component
refine_componentCodeImprove components via natural language feedback
generate_api_routeBackendAPI routes with validation, auth, and error handling
generate_backend_moduleBackendFull feature modules with routes, services, middleware
scaffold_backendBackendComplete backend projects with auth, DB, monitoring
generate_from_template_packCodeMulti-page apps from curated packs (SaaS, Landing, AI Chat)
figma_context_parserContextRead Figma files, extract tokens, map to Tailwind
figma_push_variablesDesignWrite design tokens back to Figma
fetch_design_inspirationContextExtract visual metadata from URLs
analyze_design_referencesContextAnalyze design references, detect patterns
analyze_design_imageMLAnalyze design images for training data
analyze_component_libraryContextAnalyze component library patterns
audit_accessibilityQualityWCAG 2.1 audit with fix suggestions
submit_feedbackQualitySubmit feedback to improve future output
payments_refundBackendRequest payment refund with Zod-validated params (payment_id, amount, reason, currency)
manage_trainingMLTraining data ingestion and fine-tuning

Framework & Library Support

LibraryReactVueAngularSvelteHTML
shadcn/uishadcn/uishadcn-vueTailwindbits-uiTailwind
Radix@radix-ui/react@radix-ui/vueTailwind@radix-ui/svelteTailwind
Headless UI@headlessui/react@headlessui/vueTailwind@headlessui/svelteTailwind
Material@mui/materialVuetify@angular/material@smui/materialTailwind
PrimeVueHeadless UIprimevueprimengTailwindTailwind
noneTailwind CSSTailwind CSSTailwind CSSTailwind CSSTailwind CSS

Brand Identity Integration

All generation tools accept an optional brand_identity parameter — a JSON string from branding-mcp's generate_brand_identity tool. When provided, brand colors, typography, and spacing are injected into the design context.

Environment Variables

VariableRequiredDescription
FIGMA_ACCESS_TOKENOnly for Figma toolsToken from Figma Settings
SENTRY_DSNOptionalSentry DSN for error reporting (uncaught exceptions and unhandled rejections)

Distribution

  • npm — published as @forgespace/ui-mcp
  • MCP Registry metadata — repository includes server.json and mcpName metadata for registry submission
  • Tag release automation — pushing v* runs npm publish with provenance, then publishes the same version to the MCP Registry via GitHub OIDC
  • Weekly registry ops — .github/workflows/mcp-registry-status.yml refreshes one issue with npm and MCP Registry drift, visibility, and next actions
  • GitHub — source, issues, releases, and Discussions live under Forge Space

Development

bash
npm install && npm run buildnpm test                  # 437 tests, 35 suitesnpm run validate          # lint + format + typecheck + test

Community

GitHub Workflow

This repository follows the shared Forge Space GitHub work-management baseline:

  • Discussions for ideas, RFCs, Q&A, and announcements
  • Issues for actionable delivery work
  • Projects for roadmap visibility and cross-repo reporting

See Forge-Space/.github GOVERNANCE.md for the org-wide contract.

Scheduled monitoring runs that execute CodeQL require job-scoped security-events: write permission for SARIF upload.

The scheduled Security Monitoring workflow intentionally skips Codecov upload and relies on local coverage summary generation to reduce false alerting from third-party action download instability.

License

MIT

來源：README.md，提交 135a273

工具

0
SourceWeft 尚未在沙箱中啟動過該軟體包，因此其工具未知。

版本歷史

1
  1. v0.25.0最新Sep 16, 2026

評分

已滿足適用檢查項的 50%

該評分衡量此收錄條目的完整程度，依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價，也不表示伺服器安全或目前可用：可連通性是帶日期的檢查結果，評分也不包含安裝量或使用者評價。

  • 近 30 天內可連通25 分

    請保持端點能夠回應 MCP 握手；SourceWeft 每 30 天探測一次。

  • 已宣告認證方式10 分

    請在註冊中心條目中宣告憑證請求標頭，或保持端點能夠回應探測，以便判定其認證方式。

  • 已列出工具15 分

    請讓伺服器在無憑證時回應 tools/list，或發布可在沙箱中無憑證啟動的軟體包。

  • 描述必需15 分
  • 圖示10 分
  • 文件15 分
  • 授權條款10 分