AI 写代码对零基础用户来说，最难的往往是环境配置。本文手把手教你如何用 Cursor、MasterGo MCP、Node.js 和 CodeX 搭建 AI 前端开发环境，从下载工具到连接设计稿，每一步都配有避坑指南。跟着教程走，即使没有代码基础，也能轻松让 AI 按设计稿生成可运行的 B 端页面。
很多没有代码基础的小伙伴，看到 AI 写代码，第一反应都是：我也想试试。
但真正打开教程之后，往往还没开始生成页面，就先被环境配置劝退了。
尤其是如果你想让 AI 不是“瞎猜页面”，而是老老实实参考设计稿去生成，那你一定会碰到这个东西：MasterGo MCP。
从下载 Cursor、建项目、装 Node.js，到接入 MasterGo MCP、验证能不能读设计稿，中间每一步我几乎都在踩坑。
所以这篇直接把我真实跑通的过程整理出来，分享给代码基础几乎为 0、但想亲手试一次 AI 写前端的“都市隶人”们。
这篇先解决最关键的一件事：把环境跑通。
跟着做完，你至少能搞定：
如果你也是第一次折腾这些东西，别怕，我们就从最基础的一步开始。
它是整个过程的主工作台，也是团队的主要工具，所以我从这个入手开始讲
后面建项目、改代码、预览页面、接 MCP，基本都在这里完成。
它负责提供设计稿上下文。
你可以把它理解成：让 AI 不只是“猜页面”，而是有地方可参考。
这一步很多新手会觉得麻烦，但其实很有安装必要。 因为不管是 MCP 还是后面本地运行，Node.js 都是在给你打地基。
我这次后面主要用它来做生成和修改。
刚注册 Cursor 的用户，一般会有一定免费额度可以体验；我自己的情况是，Cursor 额度用完后，开始用 ChatGPT 附带的 CodeX 来继续跑后面的步骤。
我们要用的编辑器叫 Cursor。它其实就是 VS Code 的“AI 增强版”，长得跟 VS Code 一模一样，但它内置了超强的 AI 助手。
下载方式
去 Cursor 官网下载对应系统的版本，然后一路“下一步”安装就可以。
https://cursor.com/cn/download
官网截图
这里先提醒一个很容易被忽略的坑：
⚠️ 避坑提醒：尽量不要把项目直接建在桌面，也尽量避开 iCloud 同步目录。
我自己实操时就发现，如果文件夹放在同步盘里，AI 在写入文件时更容易遇到权限或同步问题。 更稳妥的方式，是直接在你电脑的“文稿”目录下，新建一个纯英文命名的文件夹。
比如我这里命名为：
260406cursor-test
本地新建文件夹
打开 Cursor，点击顶部菜单栏的 File -> Open Folder…。 然后选中我们刚才创建的项目文件夹（比如我们刚才起名 20260406cursor-test）。
⚠️ 避坑提醒：一定要选「Open Folder」而不是「Open」，因为只有打开“整个文件夹”，AI 才能拿到完整的项目权限。
否则它很多时候只能看单个文件，后面帮你建文件、改结构、写资源路径时都容易出问题。
打开后，左侧一般只会看到一个空文件夹，这时候我们先把最基础的结构搭起来：
鼠标 Hover 到 260406cursor-test 的文件夹，右侧有 4 个悬浮图标
新建文件：点击文件图标（带+号的纸片）
新建文件夹：点击文件夹图标（带+号的文件夹）
⚠️ 为什么要建这两个空文件夹？
-assets：我们要把 MasterGo 里导出的图标、切图都扔进去，路径才不会乱。
-reference：把你想要复刻的原型图、设计稿扔进去。后面我们要对 AI 说：“参考这个 reference 文件夹里的图”，它才能真正开始“按图做题”，而不是自由发挥。
成功后，文件里显示是这样的
很多设计师第一次看到这一步都会想：
我只是想做个页面，为什么还要装 Node.js？
答案很简单：
因为我们这次不是只让 AI“写一段代码”，而是要让它进一步去连接 MasterGo、读取设计稿信息，而这一步依赖的 MCP，本质上就是跑在 Node 环境里的。
所以，Node.js 不是额外负担，而是必须先补上的底层环境。
直接去 Node.js 官网下载就行。 如果你不知道选哪个版本，优先选 LTS（长期支持版）。我下载的 v24.14.1版本 目前没啥问题
下载地址： https://nodejs.org/en/download
下载后一路下一步安装即可。
安装成功后，不代表这一步就结束了，真正关键的是下面这一步。
很多人装完 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 的设计稿数据。
这一步是整套流程里最关键的一步。
因为一旦 MCP 接通，AI 就不只是“看截图猜页面”，而是有机会真正读取设计稿里的结构和信息。
打开 MasterGo，点击右上角头像 -> 个人设置。
找到 安全设置>个人访问令牌>复制
1、尽量在企业版/专业版环境下操作，接口更稳，少踩 50% 的断连坑。
2、这个令牌一定要妥善保管，不要随便泄露。
进入 Cursor 设置页后，找到：
Tools & MCPs
然后添加自定义 MCP，进入 mcp.json
进入设置页的方式有 2 种
方式 1
Cursor-> Preferences-> Cursor Settings
方式 2，点右上角的小齿轮
依次setting-> 「 Tools&MCPs」-> 「+ Add Custom MCP」
其实 Master go 官方文档有详细介绍，并且有几种配置方式，优先建议阅读官方文档的MasterGo MCP 板块
https://mastergo.com/help/MG/MCP（想要复制代码块 建议官网这里直接复制）
或者直接复制下面这段代码到你的 mcp.json当中，为了保险，我建议你直接把整个文件的内容清空后再粘贴：
codeJSON
⚠️ 关键细节说明：
1、把 “这里粘贴你复制的令牌” 换成刚才在 MasterGo 里生成的长字符串。 记得保留前后的双引号。
2、空格是大忌：粘贴令牌的时候，前后千万别带空格，否则 AI 登录的时候会提示“身份非法”
这个动作非常关键。
不是关窗口，也不是最小化，而是要真正退出应用，按下 Cmd + Q 彻底退出进程，再重开。
因为很多 MCP 配置变更，只有在 Cursor 彻底重启后才会重新加载。
这一点不要只看设置页有没有绿点。
更稳妥的做法，是在右侧会话里直接验证 AI 是否真的能识别 MCP 工具。
你就在 Cursor 右侧对话框里，直接发这句：
请检查当前是否已经成功加载了 mastergo-magic-mcp 这个 MCP 服务。如果已加载，请直接告诉我“已加载”；如果未加载，请直接告诉我“未加载
如果它回复：已加载 、可以调用 mastergo 相关工具 、能读取设计稿链接 ，那就说明基本成功了。
如果设置页里看起来正常，但会话里始终拿不到工具，说明配置虽然被识别了，但当前会话并没有真正挂载成功。
这一点也是我自己这次踩坑最深的一步。
如果碰到不能解决的问题，最好的办法就是直接截图问豆包、或者 AI studio等工具，现在的 AI 工具就是最好的老师
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端设计情报局 原创发布于人人都是产品经理，未经授权，禁止转载
题图来自Unsplash，基于CC0协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。