Cursor + MasterGo 跑通全过程

来自版块 深度
6
0
很多没有代码基础的小伙伴,看到 AI 写代码,第一反应都是:我也想试试。
但真正打开教程之后,往往还没开始生成页面,就先被环境配置劝退了。
尤其是如果你想让 AI 不是“瞎猜页面”,而是老老实实参考设计稿去生成,那你一定会碰到这个东西:MasterGo MCP。
从下载 Cursor、建项目、装 Node.js,到接入 MasterGo MCP、验证能不能读设计稿,中间每一步我几乎都在踩坑。
所以这篇直接把我真实跑通的过程整理出来,分享给代码基础几乎为 0、但想亲手试一次 AI 写前端的“都市隶人”们。
这篇先解决最关键的一件事:把环境跑通。
跟着做完,你至少能搞定:
d68c89fa-3d79-11f1-99a9-00163e09d72f.png
如果你也是第一次折腾这些东西,别怕,我们就从最基础的一步开始。
这次会用到的 4 个工具 e37f48a0-3d79-11f1-b422-00163e09d72f.png
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
f677a75e-3d79-11f1-b422-00163e09d72f.png
官网截图
第二步:新建项目1、先在本地建一个文件夹这里先提醒一个很容易被忽略的坑:
26a0.jpg 避坑提醒:尽量不要把项目直接建在桌面,也尽量避开 iCloud 同步目录。
我自己实操时就发现,如果文件夹放在同步盘里,AI 在写入文件时更容易遇到权限或同步问题。 更稳妥的方式,是直接在你电脑的“文稿”目录下,新建一个纯英文命名的文件夹。
比如我这里命名为:
260406cursor-test
00aefbaa-3d7a-11f1-9542-00163e09d72f.png
本地新建文件夹
2、在 Cursor里打开这个文件夹打开 Cursor,点击顶部菜单栏的 File -> Open Folder…。 然后选中我们刚才创建的项目文件夹(比如我们刚才起名 20260406cursor-test)。
26a0.jpg 避坑提醒:一定要选「Open Folder」而不是「Open」,因为只有打开“整个文件夹”,AI 才能拿到完整的项目权限。
否则它很多时候只能看单个文件,后面帮你建文件、改结构、写资源路径时都容易出问题。
231f104e-3d7a-11f1-9542-00163e09d72f.png
3、在项目里先把基础结构建好打开后,左侧一般只会看到一个空文件夹,这时候我们先把最基础的结构搭起来:
鼠标 Hover 到 260406cursor-test 的文件夹,右侧有 4 个悬浮图标
新建文件:点击文件图标(带+号的纸片)
  • 选 New File
  • 输入 index.html
  • 再右键新建 style.css
新建文件夹:点击文件夹图标(带+号的文件夹)
  • 选 New Folder
  • 第一个命名assets ,放图片素材
  • 第二个命名reference ,放原型/设计参考图
26a0.jpg 为什么要建这两个空文件夹?
-assets:我们要把 MasterGo 里导出的图标、切图都扔进去,路径才不会乱。
-reference:把你想要复刻的原型图、设计稿扔进去。后面我们要对 AI 说:“参考这个 reference 文件夹里的图”,它才能真正开始“按图做题”,而不是自由发挥。
51eca6de-3d7a-11f1-9542-00163e09d72f.png
成功后,文件里显示是这样的
59c9f640-3d7a-11f1-9542-00163e09d72f.png
第三步:Node.js很多设计师第一次看到这一步都会想:
我只是想做个页面,为什么还要装 Node.js?
答案很简单:
因为我们这次不是只让 AI“写一段代码”,而是要让它进一步去连接 MasterGo、读取设计稿信息,而这一步依赖的 MCP,本质上就是跑在 Node 环境里的。
所以,Node.js 不是额外负担,而是必须先补上的底层环境。
1、官网下载安装直接去 Node.js 官网下载就行。 如果你不知道选哪个版本,优先选 LTS(长期支持版)。我下载的 v24.14.1版本 目前没啥问题
下载地址: https://nodejs.org/en/download
61d2f350-3d7a-11f1-b422-00163e09d72f.png
2、安装方式下载后一路下一步安装即可。
安装成功后,不代表这一步就结束了,真正关键的是下面这一步。
7e585b96-3d7a-11f1-9542-00163e09d72f.png

全部评论 0

您需要登录后才可以回帖 立即登录
说说你的想法......
0
0
0
返回顶部