零代码基础？手把手教你用Cursor+MasterGo跑通AI编程！

一、全文速览图

很多没有代码基础的设计师，看到 AI 写代码，第一反应都是：我也想试试。

但真正打开教程之后，往往还没开始生成页面，就先被环境配置劝退了。

尤其是如果你想让 AI 不是“瞎猜页面”，而是老老实实参考设计稿去生成，那你一定会碰到这个东西：MasterGo MCP。

从下载 Cursor、建项目、装 Node.js，到接入 MasterGo MCP、验证能不能读设计稿，中间每一步我几乎都在踩坑。

所以这篇直接把我真实跑通的过程整理出来，分享给代码基础几乎为 0、但想亲手试一次 AI 写前端的“都市隶人”们。

这篇先解决最关键的一件事：

把环境跑通

跟着做完，你至少能搞定：

如果你也是第一次折腾这些东西，别怕，我们就从最基础的一步开始。

二、这次会用到的 4 个工具

1. Cursor

它是整个过程的主工作台，也是团队的主要工具，所以我从这个入手开始讲。后面建项目、改代码、预览页面、接 MCP，基本都在这里完成。

2. MasterGo

它负责提供设计稿上下文。你可以把它理解成：让 AI 不只是“猜页面”，而是有地方可参考。

3. Node.js

这一步很多新手会觉得麻烦，但其实很有安装必要。 因为不管是 MCP 还是后面本地运行，Node.js 都是在给你打地基。

4. CodeX

我这次后面主要用它来做生成和修改。

刚注册 Cursor 的用户，一般会有一定免费额度可以体验；我自己的情况是，Cursor 额度用完后，开始用 ChatGPT 附带的 CodeX 来继续跑后面的步骤。

三、第一步：下载 Cursor

我们要用的编辑器叫Cursor。它其实就是 VS Code 的“AI 增强版”，长得跟 VS Code 一模一样，但它内置了超强的 AI 助手。

下载方式：去 Cursor 官网下载对应系统的版本，然后一路“下一步”安装就可以。

链接：https://cursor.com/cn/download

四、第二步：新建项目

1. 先在本地建一个文件夹

这里先提醒一个很容易被忽略的坑：

避坑提醒：尽量不要把项目直接建在桌面，也尽量避开 iCloud 同步目录。

我自己实操时就发现，如果文件夹放在同步盘里，AI 在写入文件时更容易遇到权限或同步问题。  更稳妥的方式，是直接在你电脑的“文稿”目录下，新建一个纯英文命名的文件夹。

比如我这里命名为：260406cursor-test

2. 在 Cursor里打开这个文件夹

打开 Cursor，点击顶部菜单栏的File->Open Folder...

然后选中我们刚才创建的项目文件夹（比如我们刚才起名260406cursor-test）。

避坑提醒：一定要选「Open Folder」而不是「Open」，因为只有打开“整个文件夹”，AI 才能拿到完整的项目权限。否则它很多时候只能看单个文件，后面帮你建文件、改结构、写资源路径时都容易出问题。

3. 在项目里先把基础结构建好

打开后，左侧一般只会看到一个空文件夹，这时候我们先把最基础的结构搭起来：

鼠标 Hover 到260406cursor-test 的文件夹，右侧有 4 个悬浮图标

新建文件：点击文件图标（带+号的纸片）

1. 选New File
2. 输入index.html
3. 再右键新建style.css

新建文件夹：点击文件夹图标（带+号的文件夹）

选New Folder

第一个命名assets，放图片素材

第二个命名reference，放原型/设计参考图

为什么要建这两个空文件夹？

1. assets：我们要把 MasterGo 里导出的图标、切图都扔进去，路径才不会乱。
2. reference：把你想要复刻的原型图、设计稿扔进去。后面我们要对 AI 说：“参考这个 reference 文件夹里的图”，它才能真正开始“按图做题”，而不是自由发挥。

cursor 里的文件基础结构样式

成功后，文件里显示是这样的

本地文件夹内的基础结构样式

五、第三步：Node.js

很多设计师第一次看到这一步都会想：

我只是想做个页面，为什么还要装 Node.js？

答案很简单：

因为我们这次不是只让 AI“写一段代码”，

而是要让它进一步去连接 MasterGo、读取设计稿信息，而这一步依赖的 MCP，本质上就是跑在 Node 环境里的。

所以，Node.js 不是额外负担，而是必须先补上的底层环境。

1. 官网下载安装

直接去 Node.js 官网下载就行。 如果你不知道选哪个版本，优先选LTS（长期支持版）。我下载的 v24.14.1版本 目前没啥问题

下载地址：https://nodejs.org/en/download

2. 安装方式

下载后一路下一步安装即可。

安装成功后，不代表这一步就结束了，真正关键的是下面这一步。

3. 检查是否安装成功

很多人装完 Node 就觉得大功告成了，结果后面配 MCP 的时候死活连不上。其实最简单的确认方法就在 Cursor 里面：

点击顶部菜单栏的Terminal->New Terminal。

然后输入node -v到TERMINAL：

node -v

如果出现v18.x或v20.x这样的数字，恭喜你，安装成功了。如果显示command not found，说明没装成功，得重来。

如果像我一样出现v24.14.1这样的版本号，恭喜你，这波稳了。

我这里装的是比较新的v24版本。大家如果去官网下载，选绿色的LTS（长期支持版）也是完全 OK 的。只要有这个版本号输出，AI 助手才有能力去帮你读取 MasterGo 的设计稿数据。

六、第四步：连接 MasterGo MCP

这一步是整套流程里最关键的一步。

因为一旦 MCP 接通，AI 就不只是“看截图猜页面”，而是有机会真正读取设计稿里的结构和信息。

1. 先去 MasterGo 拿访问令牌

打开 MasterGo，点击右上角头像 ->个人设置。

找到安全设置>个人访问令牌>复制

1. 尽量在企业版/专业版环境下操作，接口更稳，少踩 50% 的断连坑。
2. 这个令牌一定要妥善保管，不要随便泄露。

2. 在 Cursor 里打开 MCP 配置

进入 Cursor 设置页后，找到：

Tools & MCPs。

然后添加自定义 MCP，进入mcp.json

进入设置页的方式有 2 种

方式1，Cursor-> Preferences-> Cursor Settings

方式 2，点右上角的小齿轮

依次setting-> 「 Tools&MCPs」-> 「+ Add Custom MCP」

3. 修改 mcp.json 里的内容

其实 MasterGo 官方文档有详细介绍，并且有几种配置方式，优先建议阅读官方文档的MasterGo MCP 板块

链接：https://mastergo.com/help/MG/MCP

或者直接完整复制下面这段代码到你的 mcp.json当中，为了保险，我建议你直接把整个文件的内容清空后再粘贴：

{
  "mcpServers": {
    "mastergo": {
      "command": "npx",
      "args": [
        "-y",
        "@mastergo/magic-mcp"
      ],
      "env": {
        "MG_ACCESS_TOKEN": "这里粘贴你复制的令牌"
      }
    }
  }
}

关键细节说明：

1. 把"这里粘贴你复制的令牌"换成刚才在 MasterGo 里生成的长字符串。记得保留前后的双引号。
2. 空格是大忌：粘贴令牌的时候，前后千万别带空格，否则 AI 登录的时候会提示“身份非法”

4. 改完以后，必须重启Cursor

这个动作非常关键。

不是关窗口，也不是最小化，而是要真正退出应用，按下Cmd + Q彻底退出进程，再重开。

因为很多 MCP 配置变更，只有在 Cursor 彻底重启后才会重新加载。

5. 最后检查 MCP 是否加载成功

这一点不要只看设置页有没有绿点。

更稳妥的做法，是在右侧会话里直接验证 AI 是否真的能识别 MCP 工具。

你就在 Cursor 右侧对话框里，直接发这句：

请检查当前是否已经成功加载了 mastergo-magic-mcp 这个 MCP 服务。如果已加载，请直接告诉我“已加载”；如果未加载，请直接告诉我“未加载

如果它回复：已加载 、可以调用 mastergo 相关工具 、能读取设计稿链接，那就说明基本成功了。

如果设置页里看起来正常，但会话里始终拿不到工具，说明配置虽然被识别了，但当前会话并没有真正挂载成功。

这一点也是我自己这次踩坑最深的一步。

如果碰到不能解决的问题，最好的办法就是直接截图问豆包、或者 AI studio等工具，现在的 AI 工具就是最好的老师。

七、第五步：安装CodeX

Cursor 的高级模型是收费的，额度用完后就得继续想办法。

我也是因为额度用完了 选择了CodeX。

对于刚开始试水的朋友，也推荐安装CodeX插件。尤其是 ChatGPT 的付费用户，自带 Codex 的使用额度。

好处也很简单，新注册用户通常有免费的使用额度，足够你跑通这篇教程的 Demo。

安装方式：左侧点击那个小方块图标，在扩展市场搜 CodeX，点击 Install。

八、第六步：最终验证

环境配好了，咱们直接小测一下。直接在右侧的对话框里开始输入内容

第一遍效果

对 AI 说：

“请基于当前项目，生成一个可本地运行的 B 端页面。

MasterGo 设计稿链接：「https://mastergo.com/你自己具体的文件地址」

要求：使用 index.html + style.css 组织代码

左图是网站上找的 Arco开源文件，右侧是第一遍跑出来的效果。

一眼看过去，基本还原度 7788，虽然结构有点问题，还有细节要调整。

第二遍效果

这一次用参考图+设计稿的方式跑一遍，你会发现很多结构就开始变准了。

比如筛选区、表头按钮这些地方，通常会比第一轮更接近设计稿。

对 AI 说：

“请基于当前项目，生成一个可本地运行的 B 端页面。

设计参考有两部分：

1. 本地参考图：reference/参考图名字.png
2. MasterGo 设计稿链接：「https://mastergo.com/你自己具体的文件地址」

要求：使用 index.html + style.css 组织代码

如何预览

然后可以在文件夹里点击 index.html，右击用浏览器打开，或者直接在对话框让 Codex 给你提供预览地址。

最后

到这里，这套环境就算正式跑通了。

这一篇先解决的是最基础、但也最容易劝退人的部分：把 Cursor、Node.js、MasterGo MCP 和 CodeX 接起来。

环境通了，后面才是真正有意思的部分。

下一篇，我们不再停留在简单页面了，直接上一个更复杂的 dashboard 看板页，看看 AI 到底能还原到什么程度。

欢迎评论区交流沟通～

欢迎关注作者微信公众号：「B端设计情报局」