前言
这段时间cursor
的mcp server
大热,各大厂商也积极接入该协议,mcp server 是官方文档,我们看看 mastergo 官方的解释
MCP 作为一种标准化的上下文管理协议,为设计师和开发团队提供了更高效的协作方式。通过支持 MCP,MasterGo 不仅打破了工具间的信息孤岛,还为复杂的设计到开发流程提供了强大的技术支撑。
借助 MasterGo MCP Server,设计师和开发团队可以实现更智能的设计到代码转换。MCP Server 提供结构化的布局信息,与 AI 编码工具(如 Cursor / Vscode / Trae)无缝集成,避免了传统设计到开发流程中因页面截图等方式带来的误差,极大提升了工作效率。
废话不多说,让我们开始实战
配置
-
- 更新cursor到最新版本,依次打开
File->Preferences->Cursor Settings
,在设置页面选择Features
,并勾选Emable auto-run prompt
- 更新cursor到最新版本,依次打开
-
- 打开mastergo用户安全设置,生成令牌
-
- 然后点击
MCP
标签,点击Add new global MCP server
新增 MCP 服务,设置如下
- 然后点击
windows 配置:
{
"mcpServers": {
"mastergo-magic-mcp": {
"command": "cmd",
"args": [
"/c",
"npx",
"-y",
"@mastergo/magic-mcp",
"--token=<MG_MCP_TOKEN>",
"--url=https://mastergo.com"
],
"env": {
"NPM_CONFIG_REGISTRY": "https://registry.npmjs.org/"
}
}
}
}
mac 配置:
{
"mcpServers": {
"mastergo-magic-mcp": {
"command": "npx",
"args": [
"-y",
"@mastergo/magic-mcp",
"--token=<MG_MCP_TOKEN>",
"--url=https://mastergo.com"
],
"env": {
"NPM_CONFIG_REGISTRY": "https://registry.npmjs.org/"
}
}
}
}
- 4. 配置完成点击刷新,重启服务,服务前图标亮起,代表启动成功
🎈 windows 下启动服务可能会打开一个终端窗口,关闭终端页面,会导致服务关闭,如果没有上述现象,则不用在意
生成
打开 cursor,新建文件夹 test,文件 index.html,打开 index.html 并开启对话窗口,模式选择Agent
使用官方示例在对话框输入以下内容
https://mastergo.com/file/155675508499265?page_id=158%3A0002&state=LanHuVX&layer_id=158%3A0222 生成html
cursor 生成相关 html 代码,还原度还是挺高的,图片可能无法显示,可以让 cursor 用开源图片替代
最终效果:
总结
随着 mcp 服务的兴起,各种开发工具跟智能 ide 的结合将越来越普遍,掌握这些开发方法,一些情况下还是很方便的,不过经过测试,复杂页面生成效果还不是很理想,目前还是在 html 页面生成,随后有时间尝试一下 .vue 文件生成