AI编程入门指南：零基础用Cursor与MasterGo快速上手
AI编程能力超越谷歌！6个章节带你快速了解全新Claude Opus 4.5
上周，Google在AI领域的发布可谓来势汹汹，一时间风头无两。这让许多没有代码基础的设计师朋友也跃跃欲试，心想：是不是我也能试试让AI来写代码？
然而，热情往往在打开教程的第一步就遭遇了挫折。环境配置，这个看似简单的环节，成了第一道拦路虎。尤其是当你希望AI不是凭空“瞎猜”页面，而是能精准参考设计稿进行生成时，必然会遇到一个关键工具：MasterGo MCP。
从下载编辑器、创建项目、安装Node.js，到接入MasterGo MCP、验证设计稿读取能力，中间的每一步都可能藏着意想不到的坑。本文将把这一整套流程的真实跑通经验整理出来，分享给那些代码基础几乎为零，但又渴望亲手体验一次AI前端生成的设计师们。
本篇的核心目标只有一个：把环境彻底跑通。
跟着步骤走完，你至少能掌握：如何搭建一个能连接设计稿的AI编码工作流。如果你是第一次接触这些工具，别担心，我们从最基础的一步开始。
二、这次会用到的 4 个工具
在开始之前，我们先理清整个流程中需要用到的几个核心工具，它们各自扮演着不同的角色。
1. Cursor
这是整个流程的主工作台。你可以把它理解为Visual Studio Code的“AI增强版”，界面几乎一样，但内置了强大的AI编程助手。后续的项目创建、代码修改、页面预览以及MCP接入，主要都在这里完成。
2. MasterGo
它负责提供设计稿的上下文。简单说，就是让AI“有图可依”，而不是自由发挥。我们将通过它的MCP（模型上下文协议）功能，把设计稿的结构和信息传递给AI。
3. Node.js
这一步可能让不少设计师感到困惑：我只是生成个页面，为什么需要装这个？原因在于，MasterGo MCP本质上是一个运行在Node.js环境下的服务。安装Node.js是为后续的AI连接能力打下必要的基础，并非额外负担。
4. CodeX
这是实际执行代码生成和修改的AI模型。新注册的Cursor用户通常有一定免费额度。如果额度用尽，也可以使用其他集成了CodeX模型的工具（例如ChatGPT Plus附带的代码解释器功能）来继续后续步骤。
三、第一步：下载 Cursor
首先，我们需要一个AI友好的代码编辑器。推荐使用Cursor，它基于VS Code深度定制，无缝集成了AI助手。
下载方式非常简单：访问Cursor官网，下载对应你操作系统（Windows/macOS）的版本，然后按照常规软件安装流程完成即可。
四、第二步：新建项目
1. 先在本地建一个文件夹
这里有一个容易被忽略但至关重要的细节：项目文件夹的存放位置。
尽量避免将项目直接建在桌面或iCloud等云同步目录中。在实际操作中发现，如果文件夹位于同步盘内，AI在写入文件时更容易遇到权限冲突或同步问题。更稳妥的做法是，在电脑的“文档”或“用户”目录下，新建一个纯英文命名的文件夹。
例如，可以命名为：ai-frontend-demo。
2. 在 Cursor里打开这个文件夹
启动Cursor，点击顶部菜单栏的 File -> Open Folder...，然后选择刚才创建的项目文件夹。
请注意，务必选择“打开文件夹”(Open Folder)，而不是“打开文件”(Open)。只有打开整个文件夹，AI才能获得完整的项目上下文和文件操作权限，否则在后续创建文件、修改结构或引用资源路径时都可能出错。
3. 在项目里先把基础结构建好
打开文件夹后，左侧文件管理器通常显示为空。我们需要先手动搭建最基础的项目结构：
- 新建文件：将鼠标悬停在项目文件夹上，点击右侧出现的“新建文件”图标（一个带加号的纸片），创建一个名为
index.html的文件。同样方法，再创建一个style.css文件。 - 新建文件夹：点击“新建文件夹”图标（带加号的文件夹），创建两个文件夹：
assets: 用于存放从MasterGo导出的图标、切图等素材。reference: 用于存放你想要AI参考的原型图或设计稿截图。
建立这两个文件夹的目的很明确：assets 确保素材路径规整；reference 则为AI提供了明确的视觉参考依据，你可以直接告诉AI“参考reference文件夹里的图片”，让它进行“按图施工”。
完成后的项目基础结构，在Cursor侧边栏和本地文件夹中应如下图所示。
五、第三步：安装与验证 Node.js
正如前文所述，Node.js是运行MasterGo MCP服务的底层环境。安装过程并不复杂，但验证安装成功是关键。
1. 官网下载安装
访问Node.js官网，建议下载LTS（长期支持版），稳定性更有保障。下载完成后，运行安装程序，一路点击“下一步”即可。
2. 检查是否安装成功
安装完成后，需要在Cursor中验证。点击顶部菜单栏的 Terminal -> New Terminal 打开终端。
在终端中输入命令：
node -v
然后按下回车。如果终端显示类似 v18.x.x 或 v20.x.x 的版本号（例如v24.14.1），则表明Node.js已成功安装并配置好环境变量。如果显示“command not found”，则需要重新检查安装步骤或环境变量配置。
只有看到版本号输出，才意味着AI助手具备了调用Node.js环境的能力，为后续连接MasterGo MCP铺平了道路。
六、第四步：连接 MasterGo MCP
这是整个流程的核心环节。成功连接后，AI将能直接读取设计稿的图层、尺寸、颜色等信息，而不仅仅是“看图说话”。
1. 获取 MasterGo 访问令牌
登录MasterGo，点击右上角头像，进入「个人设置」。找到「安全设置」下的「个人访问令牌」选项，点击生成并复制令牌字符串。
请注意：建议在MasterGo的企业版或专业版环境下操作，接口连接通常更稳定。生成的访问令牌相当于密码，请妥善保管，不要泄露。
2. 在 Cursor 中配置 MCP
打开Cursor的设置页面。有两种方式：
- 通过菜单：
Cursor -> Preferences -> Cursor Settings。 - 点击界面右上角的小齿轮图标进入设置。
在设置中，找到 Tools & MCPs 选项，点击 + Add Custom MCP。这会打开或创建一个名为 mcp.json 的配置文件。
3. 修改 mcp.json 配置文件
MasterGo官方文档提供了详细的MCP配置说明。最直接的方式是，清空 mcp.json 文件当前内容，并粘贴以下配置代码：
{
"mcpServers": {
"mastergo": {
"command": "npx",
"args": [
"-y",
"@mastergo/magic-mcp"
],
"env": {
"MG_ACCESS_TOKEN": "这里粘贴你复制的令牌"
}
}
}
}
关键操作：将代码中 "这里粘贴你复制的令牌" 这行文字，替换为你从MasterGo复制的真实令牌字符串。务必注意，令牌前后不要留有空格，否则可能导致认证失败。
4. 重启 Cursor
修改配置文件后，必须完全退出并重启Cursor应用（例如在macOS上按 Cmd+Q），而不仅仅是关闭窗口。这是因为MCP配置的变更通常需要应用完全重启后才能加载生效。
5. 验证 MCP 连接状态
重启后，最可靠的验证方法不是在设置页面看绿点，而是直接与AI对话测试。
在Cursor右侧的AI对话框中输入：
“请检查当前是否已经成功加载了mastergo-magic-mcp这个MCP服务。如果已加载，请直接告诉我‘已加载’；如果未加载，请直接告诉我‘未加载’。”
如果AI回复“已加载”或表示可以调用MasterGo相关工具，则说明连接成功。如果设置页面显示正常但AI无法识别，则可能是当前会话未正确挂载，可以尝试新建一个对话窗口。
若在此步骤遇到问题，一个有效的解决思路是：将错误信息截图，向其他AI助手（如豆包、GPT等）求助，它们往往是排查技术问题的好帮手。
七、第五步：安装CodeX插件（可选）
Cursor内置的AI模型有使用额度限制。如果额度用尽，可以安装CodeX插件作为替代方案。对于ChatGPT Plus用户而言，其附带的代码解释器功能也基于CodeX，通常有充足的额度。
安装方式：在Cursor左侧活动栏点击扩展图标，在市场中搜索“CodeX”，找到后点击安装即可。新用户通常有一定的免费体验额度，足够完成本篇教程的演示。
八、第六步：最终验证与效果测试
环境配置完毕，是时候进行效果测试了。直接在Cursor的AI对话框中输入指令。
第一轮测试：仅提供设计稿链接
对AI发出指令：
“请基于当前项目，生成一个可本地运行的B端页面。MasterGo设计稿链接：「你的实际MasterGo文件链接」。要求：使用index.html + style.css组织代码。”
首次生成的效果通常能达到70%-80%的还原度，整体框架和样式已具雏形，但在细节和复杂结构上可能需要调整。
第二轮测试：结合参考图与设计稿链接
这次我们提供更明确的参考。指令可以调整为：
“请基于当前项目，生成一个可本地运行的B端页面。设计参考有两部分：1. 本地参考图：reference/你的参考图文件名.png；2. MasterGo设计稿链接：「你的实际MasterGo文件链接」。要求：使用index.html + style.css组织代码。”
加入本地参考图后，AI对于页面结构（如筛选区、表头按钮布局等）的把握通常会更加精准，更贴近设计稿意图。
如何预览页面
生成代码后，可以在项目文件夹中直接右键点击 index.html 文件，选择用浏览器打开。也可以在AI对话框中要求它提供一个本地预览的地址（通常是 file:// 路径）。
结语
至此，一套能够连接设计稿的AI前端生成环境就正式搭建完成了。本篇重点解决了最基础、也最容易让人放弃的环境配置部分，涵盖了从Cursor、Node.js到MasterGo MCP和CodeX的完整链路。
环境打通之后，真正的探索才刚刚开始。下一步，可以尝试更复杂的界面，例如一个完整的Dashboard看板，看看AI的还原能力究竟能达到何种程度。