可以让 AI 基于HTML直接进行原型设计的 MCP 工具，即使没有 figma、axure也可以快速构建软件原型。
About
The MCP tool that allows AI to directly create prototypes based on HTML enables rapid construction of software prototypes even without Figma or Axure.
Details
- Author
- llxxbb
- Downloads
- 272
- Categories
- Productivity, Media
Jump to
- Provides a navigation bar for the prototype.
- Decouples markers from the prototype structure.
- Supports additional notes attached to pages.
Setting up with Highlight
This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:
- Download and install Highlight from highlightai.com/download
- Navigate to the plugins tab and select "Add Custom Plugin"
-
Configure the plugin with the settings below
Plugin Name
可以让 AI 基于HTML直接进行原型设计的 MCP 工具，即使没有 figma、axure也可以快速构建软件原型。Command (node, npx, python, etc.)Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
- Enable "Start Automatically" if you want the plugin to start when Highlight launches
From the repository
Use the suggested AI prompts before and during design. To display the prototype, input “展示原型” – this starts a background server, so enter it only once. To stop, input “停止展示” or “关闭原型”.
hello_world
Returns a greeting message
getSpec
检索 MCP-Prototype 规范，ai 助手可以参考此规范来创建 html 原型页面
init
提供原型根路径和展示服务的端口号，可以多次调用。注意此过程需检测并安装运行 web 服务所需的包，可能时间较长
start
该工具将启动web服务并展示模型，启动后会后台运行，所以避免重复调用！ 调用成功后，请在浏览器里输入本地地址和 init 中指定的端口号进行查看。 在调用此工具前，下面的事情需要就位，否则此工具可能无法正常工作： - 遵循 getSpec 工具中的指示并进行了原型创造。 - 已经调用 init 工具进行了初始化。
stop
停止展示原型，并关闭web服务器
Claude Desktop / Cursor
Paste into your MCP client config file to install this server.
{
"mcpServers": {
"\u53ef\u4ee5\u8ba9 ai \u57fa\u4e8ehtml\u76f4\u63a5\u8fdb\u884c\u539f\u578b\u8bbe\u8ba1\u7684 mcp \u5de5\u5177\uff0c\u5373\u4f7f\u6ca1\u6709 figma\u3001axure\u4e5f\u53ef\u4ee5\u5feb\u901f\u6784\u5efa\u8f6f\u4ef6\u539f\u578b\u3002": {
"mcp-prototype": {
"args": [
"-y",
"@llxxbb/mcp-prototype"
],
"command": "npx"
}
}
}
}McpServers
{
"mcp-prototype": {
"args": [
"-y",
"@llxxbb/mcp-prototype"
],
"command": "npx"
}
}可以让 AI 基于HTML直接进行原型设计的 MCP 工具，即使没有 figma、axure也可以快速构建软件原型。
{ "mcpServers": { "mcp-prototype": { "command": "npx", "args": [ "-y", "@llxxbb/mcp-prototype" ] } } }
"mcp-prototype": { "command": "npm", "args": [ "--prefix", "path/to/mcp-prototype", "start:mcp" ] }
原型名称：来源于原型页面标签的 data-nav-name 数据属性值，如省略则使用文件名。
- <!-- --> 标签，注意"引用"路径的正确性。
- mcp-prototype-inject.js 文件，用于展示标记。
标记：通过设置 UI 元素的 data-marker 数据属性来增强使用者对UI元素的理解，可选。如相关界面元素的意义已经非常明显，则不建议配置。
页面的附加说明，用于表达原型页面无法表达的内容，如设计理念，元素拖拽，注意事项等。markdown 格式，文件名格式为[原型页面文件名].annotation.md
The 1Password MCP server creates a bridge that allows MCP clients such as Codex and Kiro to manage your 1Password Environments with secure authorization prompts.
This is the 1st, easiest, and cheapest PPT, slides, presentation AI generation MCP Server in the world.
Persistent memory for any AI assistant. Zero token cost until recall. Stores memories in local SQLite, ranks by 6-factor scoring, returns results 79% smaller than JSON. Works with Claude, ChatGPT, Grok, Cursor, Windsurf, and any MCP client.
A MCP server that enables AI assistants to interact with Anki, the spaced repetition flashcard application.
Enables LLM clients to interact with macOS applications through AppleScript. Built using the @beyondbetter/bb-mcp-server library, this server provides safe, controlled execution of predefined scripts with optional support for arbitrary script execution.
An MCP server for WordPress plugin audits
Turn your AI assistant into a digital marketing hub that creates, organizes, and analyzes links and QR Codes on demand.
Connect AI clients to Cal.com scheduling through the Model Context Protocol using the hosted server at mcp.cal.com or a local instance.
Sync Calendars, Scheduling Links, AI Executive Scheduling Assistant, Unified Calendar
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
