墨刀 MCP - 快速在您的工作流中
落地原型设计
墨刀 MCP - Model Context Protocol 服务
墨刀MCP是一个独立的 MCP（Model Context Protocol）服务，旨在连接墨刀原型工具与 AI 模型。它使 AI 模型能够基于需求生成设计说明、创建高保真原型（HTML页面），并将生成的 HTML 代码直接转化为墨刀工程文件。
核心特性
为开发者打造的智能原型设计及协作MCP服务
即插即用
通过 npx 一行命令即可启动，无需复杂配置。支持 Claude Desktop、Cursor、Cline 等主流 AI 开发工具，开箱即用。
AI 原生设计
基于 MCP 标准协议，让 AI 真正理解你的设计意图。从文字描述直接生成可用的 HTML 代码，大幅提升原型开发效率。
三大核心能力
生成设计说明、生成原型HTML，以及将HTML导入墨刀后进行灵活编辑。无论是从文字或图片需求快速生成原型，还是将现有HTML转为可编辑的墨刀原型，都能轻松实现设计落地。
持续更新
活跃的开源社区，持续优化和新增功能。欢迎贡献代码，共同打造更好的 AI 设计工具生态。
标准化协议
完全兼容 Model Context Protocol 标准，与其他 MCP 工具无缝协作，构建强大的 AI 工作流。
官方支持
提供详细的接入指南和常用示例，覆盖从环境配置、接口调用到原型生成的完整流程，帮助开发者快速上手，轻松将设计需求转化为可落地的原型或HTML页面，提高开发效率。
强大的工具集
AI 赋能产品设计全流程
将文字描述转换为生产级 HTML 代码。支持复杂布局、响应式设计和现代化 UI 组件。
{
"user_input": "创建一个带深色主题的现代登录页面",
"reference": "包含邮箱、密码输入框和社交登录选项"
}
生成详细的设计需求文档和规范说明。帮助团队更好地理解和实现设计意图。
{
"user_input": "电商产品列表页",
"reference": "需要支持筛选、排序和分页功能"
}
将生成或已有的 HTML 文件一键导入墨刀，自动转换为原型数据格式，方便在墨刀中进行自由编辑和二次优化。
{
"html_resource": "(html code)"
}
快速开始
三步完成配置，立即开始使用
一键安装到 Claude Desktop
使用 Smithery CLI 自动配置，无需手动编辑配置文件。
npx -y @smithery/cli install @modao-mcp/modao-proto-mcp --client claude
开始使用
重启 Claude Desktop，即可在对话中调用墨刀设计工具。
// 在 Claude 中使用 "帮我生成一个产品展示页面的 HTML 代码" "为这个功能创建详细的设计规范文档"
💡 手动配置方式
如果你需要更多控制，可以手动编辑配置文件：
{
"mcpServers": {
"modao-proto-mcp": {
"command": "npx",
"args": [
"-y",
"@modao-mcp/modao-proto-mcp",
"--token=YOUR_TOKEN",
"--url=https://modao.cc"
]
}
}
}
☝️ 小提示
因生成原型页面html需要较长时间，建议开启MCP工具的“长时间运行模式”或将超时时间设为“300”秒。
完美集成
支持所有主流 AI 开发工具
Claude Desktop
Anthropic 官方桌面客户端
Cursor
AI 驱动的代码编辑器
Cline
VS Code AI 编程助手
自定义 MCP 客户端
支持任何 MCP 协议客户端