如何通过墨刀MCP在Cursor中协作生成原型

星夢妙者

星夢妙者

2026-08-04

885人浏览

原创

必须完成三步:确认墨刀账号有效且积分≥50、本地启动mcp服务并保持运行、在cursor中正确配置mcp.json并验证连通;之后可用自然语言生成原型、导出代码或导入墨刀空间。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

如何通过墨刀mcp在cursor中协作生成原型 - php中文网

要在 Cursor 中调用墨刀 MCP 自动生成高保真原型,必须绕过网页版限制、避开 token 权限陷阱、确保本地服务链路完整——这三步缺一不可,否则指令发出去后光标一直转圈却无任何返回。

确认墨刀账号与积分状态

登录墨刀官网(modao.cc),点击左下角用户头像 →「令牌设置」,复制你的 Personal Access Token。注意:【该 token 必须绑定在有效付费或试用账户下,免费账号默认无调用权限】。打开墨刀个人空间右上角「积分中心」,确认当前积分 ≥ 50;若显示“积分不足”,即使充值后仍报 403 错误,需提供 User ID 给墨刀官方微信群人工解封,自动充值系统存在 10~30 分钟延迟同步。

配置本地墨刀 MCP 服务

在终端执行以下命令安装并启动服务:

macOS:curl -fsSL https://bun.sh/install | bash → 重启终端 → cd 到项目根目录 → bunx @modao-mcp/modao-proto-mcp --token=YOUR_TOKEN --url=https://modao.cc

Windows:用 PowerShell 运行 irm bun.sh/install.ps1 | iex → 同样 cd 到根目录 → bunx @modao-mcp/modao-proto-mcp --token=YOUR_TOKEN --url=https://modao.cc

服务成功启动后,终端会输出类似 “MCP server listening on http://127.0.0.1:3668/mcp” 的提示。此时不要关闭终端窗口——关闭即断连,Cursor 将无法发现服务。

在 Cursor 中接入墨刀 MCP

打开 Cursor → Ctrl+Shift+P(Windows)或 Cmd+Shift+P(macOS)→ 输入 “MCP: Open User Configuration” → 在打开的 mcp.json 文件中插入以下配置块:

{ "servers": { "modao": { "url": "http://127.0.0.1:3668/mcp", "type": "http" } } }

php获得文件的mime type类
php获得文件的mime type类

php获得文件的mime type类

下载

保存文件后,重新加载 Cursor 窗口(Ctrl+R)。然后在任意聊天输入框中键入 /mcp,若看到 modao 条目后标注 “connected”,说明已连通。若显示 “disconnected”,请检查终端是否仍在运行服务、端口是否被其他进程占用(如 Docker 或另一个 MCP 实例)。

用自然语言生成原型并落地

方法一:单步生成可预览 HTML

在 Cursor 聊天框输入:“用墨刀 MCP 生成一个带搜索栏和商品卡片网格的电商首页原型”,等待约 8~15 秒,将收到含预览链接、任务 ID 和 HTML 源码的响应。点击预览链接即可查看实时渲染效果,无需跳转墨刀网站。

方法二:两步走——先出描述再导出代码

第一步:输入 “为‘在线教育后台管理页’生成详细设计说明”,获取结构化文档,含页面模块划分、交互逻辑与状态说明;

第二步:紧接着输入 “把刚才的设计说明转成 React 组件代码,使用 Ant Design 组件库”,AI 将调用 generate_react 工具直接输出可粘贴进工程的 JSX + TypeScript 代码。

方法三:导入墨刀个人空间(需手动触发)

当收到 HTML 原型响应后,追加一句:“把上面生成的 HTML 导入我的墨刀个人空间”,墨刀 MCP 将自动创建新项目、上传资源、生成分享链接,并返回墨刀内该项目的直达 URL。这一步【不会覆盖你原有项目,但会占用一个新项目名额】,免费账户最多存 5 个项目。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
marquee参数有哪些
marquee参数有哪些

marquee参数有direction、behavior、speed、scrolldelay、width、height、bgcolor、cursor、id、align、noresize、nohover、loopcount、bgcolorcolor、scrollamount和vspa。

2023.10.18

576

10

Cursor新手入门教程
Cursor新手入门教程

这是一份为新手量身定制的 Cursor 入门全流程指南。无论你是刚从 VS Code 迁移过来的老手,还是编程小白,这份指南都能帮你快速上手这款“代码自动驾驶仪”。

2026.04.09

48

10

Cursor 核心功能深度解析与实战技巧
Cursor 核心功能深度解析与实战技巧

本专题深度剖析 AI 代码编辑器 Cursor 的核心功能,涵盖 Composer 模式、codebase 索引、实时代码预测(Tab)及 Chat 交互等进阶用法。通过丰富的实战案例,手把手教你如何利用 Cursor 快速构建应用、重构复杂代码及进行自动化 Debug。

2026.04.16

112

10

Cursor 针对不同开发场景的使用教程
Cursor 针对不同开发场景的使用教程

本专题深度拆解 Cursor 在前端 UI 开发、后端重构、数据爬虫及自动化测试等 10+ 核心场景下的具体用法。详解如何针对不同业务场景配置特定的 .cursorrules,让 AI 真正深入你的业务逻辑。

2026.04.16

60

10

墨刀AI使用教程大全
墨刀AI使用教程大全

PHP中文网墨刀AI专区提供完整使用教程,涵盖AI生成原型、智能对话、草图识别、代码导出等核心功能,从入门到进阶,助你快速掌握AI设计工具,提升产品设计与协作效率,轻松实现从灵感到高保真原型的一键落地。

2026.06.26

46

10

墨刀AI零基础入门指南
墨刀AI零基础入门指南

PHP中文网推出墨刀AI零基础入门指南与进阶教程合集。从账号注册、界面导览到AI生成原型、智能文档等核心功能,手把手带你从新手快速成长为设计达人,轻松掌握高效产品设计技能!

2026.06.26

57

30

墨刀设计原型工具使用方法合集
墨刀设计原型工具使用方法合集

PHP中文网墨刀设计原型AI工具专区,汇集从入门到精通的实战教程。涵盖AI生成原型、PPT联动及多人协作等核心技巧,助您快速掌握高效设计方法,轻松实现从灵感到高保真原型的跨越,大幅提升产品设计与团队协作效率。

2026.06.26

88

19

墨刀AI提示词教学
墨刀AI提示词教学

本合集由PHP中文网精心整理,为您提供全面的墨刀AI提示词教学。内容涵盖高质量原型撰写公式与实操窍门,助您轻松掌握AI设计工具。无论是零基础入门还是进阶技巧,都能让您快速上手,大幅提升产品设计与协作效率。

2026.08.04

0

21

墨刀AI完整入门
墨刀AI完整入门

PHP中文网为您倾力打造墨刀AI保姆级入门指南完整版!本合集从零基础讲起,涵盖AI生成原型、提示词优化、图片转原型及多轮对话等核心功能。无论您是新手还是进阶用户,都能轻松掌握产品设计全流程。快来PHP中文网,一键解锁高效设计技巧,让想法即刻成型!

2026.08.04

0

20

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
墨刀帮助中心
墨刀帮助中心

共0课时 | 0人学习

Cursor 使用手册
Cursor 使用手册

共0课时 | 0人学习