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。