MCP-Prototype

可以让 AI 基于HTML直接进行原型设计的 MCP 工具即使没有 figmaaxure也可以快速构建软件原型

工具能力

• 提供导航栏

• 将标记与原型解耦

• 支持页面附加说明

配置方法

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 页面注入

  • mcp-prototype-inject.js 文件用于展示标记

• 标记通过设置 UI 元素的 data-marker 数据属性来增强使用者对UI元素的理解可选如相关界面元素的意义已经非常明显则不建议配置

• 页面的附加说明用于表达原型页面无法表达的内容如设计理念元素拖拽注意事项等markdown 格式文件名格式为[原型页面文件名].annotation.md

具体参考src\mcp\tool\getSpec.ts 文件

技术栈

• nodejs, SvelteKit, Vitets