一、起步顺序：先想清楚，再让 AI 写代码#

很多人一上来就打开 Cursor 让 AI 生成页面，结果越做越乱。更稳妥的顺序是：

1. 市场调研与竞品分析：下载同类产品体验流程，在 Figma 里梳理灵感、明确自己要做什么。
2. 用 AI 整理需求：把零散的原始需求丢给 GPT 或 Claude，让它补全遗漏、结构化输出——结构化的需求喂给 AI 编程工具，产出会规范得多。
3. 出原型稿：用 Figma 的原型能力快速出页面框架。注意它擅长搭框架，但不擅长出好看的插图和图标，素材往往要自己找（可配合 remove.bg、Adobe Express 这类去背景工具）。
4. 再交给 Cursor 写页面。

关键原则：别在原型都没有、只有一句自然语言的时候就让 AI 生成前端。那样你会非常被动，AI 也会凭想象补全你的需求。

二、最重要的一条经验：先建 design system，再拼页面#

这是整个起步阶段最值钱的教训。vibe coding 最麻烦的地方，是一开始没把 UI 的组件、色彩、设计风格定下来，中途才开始加设计规范——这时几乎每改一处都要反复 debug。

正确做法是：拿到 Figma 稿（哪怕只是一张截图）之后，先不要急着拼页面。在 Cursor 里接入 Figma 的 MCP（模型上下文协议，一种让代码编辑器直接读取外部工具数据的接口）后，可以直接读 Figma 链接、把设计稿里的组件拆出来、并把设计稿落地成代码——这正是”先建设计系统”能跑通的工具基础。之后让 Cursor 按三件事推进：

1. 建立 design system（设计系统）文件：统一定义色板、字体、圆角、按钮尺寸、间距、阴影等——这就是所谓 design token（设计变量）。
2. 建立组件库：把设计稿里会用到的组件（主按钮、卡片、输入框等）都做成可复用组件，而不是只做一个按钮。
3. 最后才拼页面：让页面引用组件库里的组件。

为什么必须这样？如果把颜色、字号、间距直接写死在每个页面里，后期想调风格就要逐页改；有了组件库和 design token，改一处、全局生效。这个顺序可以让 AI 生成，prompt 也很好组织：“先建设计系统 → 再建组件库 → 最后按设计系统拼页面”，分块发给 Cursor，比一次发完整需求效果好得多。

三、两个实用技巧#

• Cursor rules 文件：当 Cursor 不遵循你的页面需求时，在项目里建一个 cursor rules（规则文件），把约定写死，例如”预览代码必须按统一方式组织”。这对不熟悉 Xcode 项目结构的人尤其有用——可以在规则里直接规定预览怎么写，省去每次解释。
• 文件重构前先备份：早期需求不清时，AI 可能把新文件覆盖到旧文件上，造成重复劳动。要做文件重构时，先用 Git 提交备份，并让 Cursor 先把将要改动的清单给你确认再执行，避免误删。

四、小结#

起步阶段的核心不是”让 AI 快点写完”，而是”先把可复用的地基打好”：先调研和原型，再建 design system 和组件库，最后拼页面；用 Cursor rules 固化约定，用 Git 兜住误操作。地基稳了，后面加功能才不会越做越乱。