MCP-Prototype
可以让 AI 基于HTML直接进行原型设计的 MCP 工具,即使没有 figma、axure也可以快速构建软件原型。
工具能力:
- 提供导航栏。
- 将标记与原型解耦。
- 支持页面附加说明。
配置方法
AI 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, Vite,ts
This server cannot be installed
local-only server
The server can only run on the client's local machine because it depends on local resources.
Enables AI to create interactive HTML-based software prototypes with navigation, markers, and annotations. Provides a complete prototyping environment without requiring tools like Figma or Axure.