Cursor + MasterGo 前端一键生成页面

前言

这段时间cursormcp server大热,各大厂商也积极接入该协议,mcp server 是官方文档,我们看看 mastergo 官方的解释

MCP 作为一种标准化的上下文管理协议,为设计师和开发团队提供了更高效的协作方式。通过支持 MCP,MasterGo 不仅打破了工具间的信息孤岛,还为复杂的设计到开发流程提供了强大的技术支撑。

借助 MasterGo MCP Server,设计师和开发团队可以实现更智能的设计到代码转换。MCP Server 提供结构化的布局信息,与 AI 编码工具(如 Cursor / Vscode / Trae)无缝集成,避免了传统设计到开发流程中因页面截图等方式带来的误差,极大提升了工作效率。

废话不多说,让我们开始实战

配置

    1. 更新cursor到最新版本,依次打开File->Preferences->Cursor Settings,在设置页面选择Features,并勾选Emable auto-run prompt
null
    1. 打开mastergo用户安全设置,生成令牌
null
    1. 然后点击MCP标签,点击Add new global MCP server新增 MCP 服务,设置如下

windows 配置:

perl 复制代码
{
  "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 配置:

perl 复制代码
{
  "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/"
      }
    }
  }
}
    1. 配置完成点击刷新,重启服务,服务前图标亮起,代表启动成功

🎈 windows 下启动服务可能会打开一个终端窗口,关闭终端页面,会导致服务关闭,如果没有上述现象,则不用在意

null

生成

打开 cursor,新建文件夹 test,文件 index.html,打开 index.html 并开启对话窗口,模式选择Agent

null

使用官方示例在对话框输入以下内容

perl 复制代码
https://mastergo.com/file/155675508499265?page_id=158%3A0002&state=LanHuVX&layer_id=158%3A0222 生成html

cursor 生成相关 html 代码,还原度还是挺高的,图片可能无法显示,可以让 cursor 用开源图片替代

最终效果:

null

总结

随着 mcp 服务的兴起,各种开发工具跟智能 ide 的结合将越来越普遍,掌握这些开发方法,一些情况下还是很方便的,不过经过测试,复杂页面生成效果还不是很理想,目前还是在 html 页面生成,随后有时间尝试一下 .vue 文件生成

相关推荐
10年前端老司机1 小时前
什么!纯前端也能识别图片中的文案、还支持100多个国家的语言
前端·javascript·vue.js
摸鱼仙人~1 小时前
React 性能优化实战指南:从理论到实践的完整攻略
前端·react.js·性能优化
程序员阿超的博客2 小时前
React动态渲染:如何用map循环渲染一个列表(List)
前端·react.js·前端框架
magic 2452 小时前
模拟 AJAX 提交 form 表单及请求头设置详解
前端·javascript·ajax
小小小小宇7 小时前
前端 Service Worker
前端
只喜欢赚钱的棉花没有糖7 小时前
http的缓存问题
前端·javascript·http
小小小小宇8 小时前
请求竞态问题统一封装
前端
loriloy8 小时前
前端资源帖
前端
源码超级联盟8 小时前
display的block和inline-block有什么区别
前端
GISer_Jing8 小时前
前端构建工具(Webpack\Vite\esbuild\Rspack)拆包能力深度解析
前端·webpack·node.js