从Figma到真实代码：用Cursor重塑软件设计流程

软件设计的演变：从统一到割裂，再到AI驱动的融合

大家好，我是Rio，Cursor的设计师。今天我想带大家回顾软件设计的历史，看看我们是如何走到今天的，并展望在AI工具（特别是Cursor）的帮助下，设计工作流将如何被重塑。

✅ 核心观点：软件设计的未来，是让设计师重新“触摸”代码，让想法瞬间变成可交互的真实产品，而不是停留在静态的Mockup（模型图）里。

设计的“黄金时代”：思考与制作的一体化

如果我们把时间倒回计算机的早期，你会发现一个有趣的现象：软件设计和工程开发原本是一体的。

在那个时代，并没有“设计师”和“工程师”的明确分工。构想软件的人和构建软件的是同一个人。设计就是代码，代码就是设计，思考与制作几乎发生在同一个紧密的循环中。

⭐ 代表人物与理念：

• 比尔·阿特金森 (Bill Atkinson)：他是早期Macintosh团队的成员。他不仅编写了QuickDraw这个负责在Mac上渲染所有像素的2D图形引擎，还设计了著名的MacPaint应用。我们今天在每一个画布类应用中看到的模式（比如“行进中的蚂蚁”选区动画）都是他发明的。从概念到实现，每一个细节都由他掌控。
• 艾伦·凯 (Alan Kay)：他在施乐帕克研究中心发明了Smalltalk语言和Dynabook概念，为我们今天所生活的个人计算世界绘制了蓝图。他有一句我非常喜欢的名言：“预测未来最好的方式，就是去发明它。” 他通过编写代码来构建可运行的系统，从而验证自己的想法——从用户界面到交互模式，再到代码的运行方式，所有这一切都融合在同一个“技艺”中。

📌 关键反思：你会称这些人是设计师还是开发者？这个问题在当时可能没有意义。他们就是建造者 (Builders)。设计即代码，代码即设计，技艺就是全部。

专业化的陷阱：工具割裂与效率悖论

然而，在过去的十年里，发生了一些“奇怪”的事情。我们开始将角色分叉 (Fork) 成各种专业化分工。

• 设计师负责构想愿景、制作Mockup。
• 工程师负责实现这些Mockup。
• 产品经理负责撰写需求文档、召开会议、推动项目进展。

当时的承诺是：专业化分工会让我们更快。但现实是，我们实际上变得更慢，并且离“真正要构建的东西”越来越远。

🛠️ 工具演进的割裂：

1. 开发者工具：程序员们很大程度上仍在使用70年代延续下来的工具范式。终端、Vim、VS Code、Sublime、Git……这些工具的核心逻辑依然显得有些“古老”，尽管代码本身才是最终的“事实来源”。
2. 设计师工具：我们从本地的、基于位图的Photoshop，转向更轻量、基于矢量的Sketch，最终进入了云端实时协作的Figma时代。但问题在于：它们都只是Mockup，不是真实的产品。
3. 协作与管理工具：为了协调团队，我们使用Jira（没人想更新的任务票）、总是会过时的文档，以及试图整合一切但依然面临碎片化的Notion。

🚨 根本问题：这种工具碎片化造成了巨大的割裂。没有人能看到全局，没有人能在脑海中构建完整的图景。线性的、瀑布式的交接成为常态：设计师制作Figma文件 -> 产品经理写文档 -> 工程师拿到任务票。“匹配Figma设计图”成了目标，而非构建优秀的产品。我们陷入了无尽的会议和返工中，迭代循环变得稀少而低效。

💭 总结反思：我们告诉自己这是“最佳实践”，是“设计系统”，是“专业化”。但实际上，我们为了流程而牺牲了技艺，用协调沟通替换了真正的构建。我们失去了那个“思考与制作”的紧密循环。

Cursor的使命：用AI作为通用语言，让设计回归真实

我始终相信，代码才是软件制作的终极真实。而随着AI的发展，代码正在成为人与机器之间的通用语言。如果你能与代码交互，你就能真正深入软件构建的技艺核心。

🔥 这就是Cursor带来的根本性改变： 过去，编写代码非常困难，你需要学习大量概念和工具。但现在，使用Cursor，你完全不需要自己写代码，但你依然在与“真实的东西”交互。这就是“用Cursor进行设计”的不同之处。

我们的使命是赋能未来的所有团队，为他们提供制作软件的最佳AI工具。你可以用Cursor来完成软件制作的整个流程：

👣 Cursor赋能的全流程：

1. 规划与思考：让AI帮助你规划项目，梳理问题。
2. 原型与实现：快速原型化不同的想法，让它变成真实的、可感受的产品。
3. 检查与改进：让AI协助你审查工作，提出改进建议，甚至发现Bug。
4. 学习与理解：最酷的一点是，你可以直接询问AI代理（Agent）：“这是如何工作的？” 在构建的过程中，你就在学习。你可以随时选择去查看和修改代码，但这不是必须的。

🎉 最终价值：你可以直接将想法转化为真正可工作的软件。它不是Mockup，它是真实的。这重新建立了早期建造者们所拥有的那种直接、紧密的创造循环。

实战演示：从Figma到Cursor，无缝构建真实原型

（接下来由Audrey进行演示）

感谢Rio。一个大家可能都好奇的问题是：Rio，你现在还在用Figma做设计吗？你的Cursor到Figma工作流是怎样的？

演示一：将Figma设计转化为Cursor中的真实原型

📝 工作流核心：利用 Figma MCP（模型上下文协议）将Figma与Cursor连接起来。

1. 连接Figma MCP：在Cursor的设置中，添加Figma MCP服务器。你可以从Cursor文档网站的MCP目录一键添加，或者手动配置JSON文件。

   

2. 从Figma导入：在Figma中选中一个画板（Artboard），复制链接。

3. 在Cursor中启动：将链接粘贴到Cursor的聊天框中。如果尚未连接Figma MCP，Cursor会提示你连接。连接后，你可以要求Cursor：“请基于这个Figma设计创建一个真实可用的原型。”

4. 查看结果：Cursor会利用Figma MCP获取设计图的截图、结构信息和所有数值（如间距、颜色值），并将其翻译成代码。很快，一个在本地运行的原型就会在Cursor内置的浏览器中打开。

   

💡 价值所在：作为设计师，你非常清楚自己想要什么组件和细节，而AI可能无法一次做到完美。但通过让AI将Figma设计图转化为真实的代码示例，你可以在本地实时看到设计被翻译成代码后的实际效果，并在开发交接之前就进行更深入的推敲和调整。

演示二：在Cursor中从零开始构建原型

如果你没有使用Figma或V0等工具，也可以完全在Cursor中从零开始。

🔢 从零开始的步骤：

1. 新建项目：在Cursor中打开一个全新的项目文件夹。

2. 切换到“规划模式”：这是Cursor帮助你规划设计的强大功能。AI代理会就你提供的模糊描述提出澄清性问题，确保在开始构建前，你们对目标达成清晰共识。

3. 选择模型：Cursor是模型无关的。你可以根据用例选择最合适的模型，例如Claude 3.5 Sonnet用于深度思考规划，Cursor自家的Composer-1用于快速构建。

4. 给出指令：例如：“为我构建一个具有现代简约风格的博客。请确保使用至少三种不同的颜色组件来形成对比。” 如果你了解前端技术栈（如React, Tailwind），也可以在指令中说明。

5. 交互式规划：在规划模式下，Cursor会询问你技术栈选择（如Next.js）、需要包含的页面（博客列表页、单篇文章页）和内容等。你可以通过多选或聊天随时添加组件。

6. 生成与执行计划：Cursor会输出一份完整的实施计划。确认后，选择构建模型（如Composer-1），Cursor将自动执行命令，创建所有必要的文件和代码。

   

7. 实时预览与迭代：构建完成后，要求Cursor“在本地主机显示博客”。内置浏览器会弹出，你可以立即看到效果。然后，你可以直接聊天要求修改：“让首页的颜色更突出一些”或“调整间距和字体”。Cursor会实时应用更改，你也能立刻看到视觉反馈。

   

演示三：Cursor的可视化编辑器与规则系统

当你有一个可工作的原型，只想做一些微调时，Cursor的可视化编辑器就派上用场了。

🛠️ 可视化编辑器：

• 在Cursor界面右上角激活可视化编辑器图标。

• 你可以直接在产品内选择任何元素（如卡片、标题），进行拖放、更改字体颜色、调整布局、添加阴影等操作。

  

• 每一个更改都会出现“应用”按钮，点击后，Cursor会自动将你的视觉修改转换并写回背后的代码中。

📌 注意事项：这彻底改变了传统的交接流程。你不再需要将标注图发给工程师，等待他们实现，然后再进行反复沟通。你可以自己掌控大部分前期的视觉调整。

🎯 设计系统与规则：为了确保AI生成的内容符合你的品牌或团队规范，Cursor提供了强大的规则系统。

• 用户规则：你的个人偏好（如“始终使用Tailwind CSS”）。

• 项目规则/团队规则：品牌风格指南或设计系统规则。你可以将已有的设计系统参数复制粘贴给Cursor，让它为你创建一条项目规则。例如，规则可以明确规定浅色/深色模式的色值、次要文本颜色等。

  

• 创建规则：你甚至可以让Cursor根据你已构建的原型，自动为你生成一份设计系统规则。

关于Figma + Cursor工作流的最佳实践

💡 Rio的个人工作流分享：

• Figma的角色：目前，Figma在深入处理视觉细节和进行快速的二维空间探索方面依然非常出色。设计师喜欢复制画板来尝试不同方案，这个工作流在Cursor中还不那么容易实现（但正在改进）。
• Figma MCP的使用：我的做法很简单：在Figma选中画板，复制链接，然后丢进Cursor。Cursor会通过MCP获取设计图的结构和数值，并将其转化为代码中的间距、颜色等属性。

问答精华：设计师使用Cursor的实用建议

1. 应该使用哪些模型进行设计？

• 规划与构思：Claude Opus非常出色。
• 视觉效果：Gemini在视觉方面表现很好（但在其他方面可能一般）。
• 快速构建与迭代：Cursor自家的Composer模型，特别是与实时浏览器预览结合时，速度快到让你感觉像是在与AI“思维融合”——“把这个按钮弄大点”，两三秒就完成了。
• 关于“精修”：目前所有模型在察觉细微差异（如对齐偏差、间距不匀）方面都还比较弱。这时需要你亲自介入：在浏览器中点击元素，使用检查器（Inspector）微调数值。

2. 应该使用开源UI库还是内部设计系统？

• 内部设计系统：如果你的内部设计系统易于访问（例如通过npm包引入），那么直接导入到原型中是最好的，能确保一致性。
• 现实挑战：很多时候生产环境非常复杂，难以直接使用。推荐做法是：为自己或团队建立一个迷你原型环境，基于AI擅长的开源技术栈（如React, TypeScript, Chakra UI）搭建，并在其上构建你们最核心的组件版本。这样你就有了一个可以无限创作、且风格一致的原型游乐场。

3. 设计师需要学习Git等开发概念吗？

不需要恐惧。很多概念你可能已经在其他工具（如Notion的版本历史、复制文档）中见过了，只是名称不同。当你遇到时，直接询问AI代理即可。Git本质上是将你的文件夹变成一个可以记录所有更改、支持回退和协作的版本控制系统。

4. 如何设计iOS/Android移动应用？

• 当前：可以通过一些扩展/MCP（如Sweetpad）来连接Cursor工作流与iOS开发。
• 未来：Cursor即将推出的版本会集成iOS模拟器。你只需输入“/simulator”指令，就能启动模拟器，AI代理可以与它交互并截图验证。Android支持也在计划中。

5. 当AI代理“卡住”或跑偏时怎么办？

这本质上是意图传递的问题。AI需要充分理解你的需求。

• 路径一：迭代优化：开始时可以允许AI先做出一个“粗糙”的版本，只要大体结构正确，你再亲自调整细节，将“粗糙品”打磨成“精品”。
• 路径二：前置规划：花更多时间提前思考，与AI一起制定详细的计划（甚至包含Mockup），然后让AI精确执行。这样更可能一次成功。 你可以根据情况选择适合自己的路径。

6. 如何加入动画效果？

推荐使用Motion.dev（源自Framer Motion）。它性能好，功能强大，能实现复杂的布局动画。AI非常擅长使用它。你只需在指令中说“使用Framer Motion实现XX效果”，或者提及你知道的API关键词即可。AI也能做纯CSS动画，但默认参数可能不够精细，需要你调整。

Rio的日常与愿景

💭 用Cursor设计Cursor：我的工作方式已经完全改变。最近，我和Lero用5天时间在Cursor里构建了一个“Baby Cursor 3.0”——一个功能齐全、可交互的未来版Cursor原型。这包含了复杂的交互状态、功能开关等。如果在Figma中模拟所有这些状态可能需要3个月。现在，我想重新设计模型选择菜单，在原型环境中做出3个可交互版本只用了20分钟，而在Figma中做静态探索可能需要一整天。这预示了未来设计和构建的新方式。

给设计师的起步建议

📚 学习资源：可以访问 cursor.com/learn，那里有关于AI核心概念的课程。 🎉 最重要的建议：不要看太多资料，直接开始尝试！ 打开Cursor，新建一个文件夹，把你的疯狂想法放进去，看看它能否实现。第一次可能不完美，但再尝试优化一两次，结果就会很酷。不要再害怕代码，开始构建吧！