MCP Prototype

🚀 MCP-Prototype

MCP-Prototype 是一款強大的 MCP 工具，它能夠讓 AI 基於 HTML 直接開展原型設計。即便你沒有使用 figma、axure 等工具，也能借助它快速構建軟件原型。

🚀 快速開始

使用 MCP-Prototype 前，需要進行相應的配置。以下分別是 AI MCP 配置和本地調試的配置方法。

📦 安裝指南

AI MCP 配置

在配置文件中增加以下內容：

{
  "mcpServers": {
    "mcp-prototype": {
      "command": "npx",
      "args": [
        "-y",
        "@llxxbb/mcp-prototype"
      ]
    }
  }
}

本地調試配置

    "mcp-prototype": {
      "command": "npm",
      "args": [
        "--prefix",
        "path/to/mcp-prototype",
        "start:mcp"
      ]
    }

✨ 主要特性

• 導航欄支持：為原型設計提供導航欄，方便用戶操作。
• 標記與原型解耦：將標記與原型進行解耦，增強了系統的靈活性和可維護性。
• 頁面附加說明支持：支持為頁面添加附加說明，可用於表達原型頁面無法表達的內容。

💻 使用示例

基礎用法

AI 提示詞建議

• 原型設計前：

要求：

• 請按原型工具規範進行原型設計。

• 需求：abcd...

• 使用過程中展示原型：直接輸入指令

展示原型 需要注意的是，原型展示會啟動一個後臺，所以不需要多次輸入指令，否則會啟動多個實例。

• 關閉原型展示：可輸入以下指令之一

停止展示 或 關閉原型

📚 詳細文檔

使用規範

導航欄

• 層級定義：導航欄的層級與原型所在文件系統的目錄結構一一對應。
• 原型名稱：原型名稱來源於原型頁面標籤的 data-nav-name 數據屬性值，如省略則使用文件名。

功能注入

MCP-Prototype 會為每個 HTML 頁面注入以下內容：

• <base href="/html/"> 標籤，使用時需注意"引用"路徑的正確性。
• mcp-prototype-inject.js 文件，用於展示標記。

標記

通過設置 UI 元素的 data-marker 數據屬性來增強使用者對 UI 元素的理解，此為可選配置。如相關界面元素的意義已經非常明顯，則不建議配置。

頁面附加說明

用於表達原型頁面無法表達的內容，如設計理念，元素拖拽，注意事項等。採用 markdown 格式，文件名格式為[原型頁面文件名].annotation.md。具體參考：src\mcp\tool\getSpec.ts 文件。

🔧 技術細節

本項目使用的技術棧包括：nodejs、SvelteKit、Vite 和 ts。