一、赛博西西弗斯
作为设计师，最近咱们可能都有种“赛博西西弗斯”式的无力感： 我们似乎越来越容易陷入一种“高精度的低效”里。
在 Figma 里，我们是古希腊掌控像素的“神”。
为了 4px 的间距，为了一个按钮的微交互，我们愿意把图层命名整理得像强迫症患者的抽屉，拉着上下游开 800 个会去对齐。
但在“交付”的那一刻。 神仙下凡，脸先着地
我们描绘的是 Happy Path（理想路径）——数据饱满，动效丝滑，像是精修的帅哥美女。 但落地到代码时，受限于技术栈、排期、或者那句经典的“这个实现不了”。 上线的往往是设计稿的“低配战损版”。
但这并不是研发同学的错（保命声明）。
问题的根源，在于我们一直在用一种“有损压缩”的方式协作。
传统的流程，本质上是“有损压缩”： 我们输出的是“意图”（我要一种空气感），标注变成“数字”（Opacity: 80%），代码还原成“逻辑”（div class="bg"）。
在这个过程中，信息的丢失率比刚买的基金跌得还快
我一直认为，AI 的出现，不是为了在这个卷成麻花的赛道里再造一个“美工”。
它是来物理消灭那个让信息失真的“翻译层”。
当 AI 能瞬间把草图变成代码时，一个极其黑色幽默的问题砸到了脸上：
如果“画图”本身不再是壁垒。如果“翻译”不再需要人工。
那我们手里死死攥着的—— 到底是一把定义产品的“屠龙刀”？ 还是一把只能给圆角抛光的“修脚锉”？
二、别慌，版本更新了
最近两年，有个概念挺火：Design Engineer（设计工程师）
第一次听到这个词的时候，我的本能反应是抗拒的。
“设计师已经卷成麻花了，好不容易把 Figma 玩包浆了，现在还要我去啃代码？
这种抗拒，源于我们长期以来被一种刻板印象锁住了。 我们以为写代码就是背单词——必须记住那些枯燥的div、padding
必须面对黑底绿字、并且随时会爆出一行红字的终端窗口。
对于习惯了“所见即所得”的设计师来说，这简直是反人性的。
但在 2025 年，逻辑已经彻底反转了。
以前，代码是机器的语言，人得迁就机器。 现在，AI 让机器学会了“人话”。
这让“开发”这件事的门槛，发生了一次根本性的地理大漂移：
那这和我设计师有什么干系？
以前的门槛叫“怎么写” (How)： 你得懂贝塞尔曲线的 4 个参数，得懂 CSS 的 cubic-bezier，才能写出一个弹跳效果。 这事儿，研发擅长。
现在的门槛叫“要什么” (What)： 你得知道，我要的那个弹跳，是“果冻一样的弹跳”，还是“机械键盘一样的段落感”？
发现了吗？ 描述意图、感知氛围、定义体验。 这不就是我们每天在干的事吗？
当 AI 接管了那个枯燥的“语法层”。 代码，就不再是程序员的“黑魔法”，也不再是需要死记硬背的“天书”。它变成了一种“服务”。
我们只需要学会，如何做一个“合格的甲方”。现在，轮到我们对着 AI 说： “给我来一个五彩斑斓的黑，要大气的，懂？”
它真的能给你做出来，这就是 Vibe coding。
（Vibe coding 就是我们终于混成了甲方：不用管破代码怎么写，只需要指点江山说‘感觉不对’，直到 AI 把你要的那个程序跑通为止。）
三、实战试试
Vibe Coding 是玄学吗？设计师能玩吗？
我决定不玩虚的，直接拿一个常见的落地页开刀。
（Hero + Feature + Footer，Web 开发里最标准的容器。按理说，这对大模型应该是道送分题。）
第一回合：全副武装，然后跪了
直接上了目前的“地表最强组合”：Cursor + Figma MCP 插件 + Claude 4.5。
为了防止 AI 放飞自我，我还特意写了一段 800 字的 Rules（可以理解为系统提示词）
要求它必须以“资深前端”的身份，严格遵循 Pixel-Perfect（一比一还原），并和设计稿原图，反复对比，这套 Prompt 我放在文末了，有需要的自取。
我当时觉得，这把稳了。
结果代码跑出来的瞬间，我沉默了。
怎么说呢。 整体骨架还是对的，但是细节丢失了太多。
我不信邪，又让它“再修一下”。 结果它开始胡编乱造一些不存在的 CSS 属性，越修越抽象。
第二回合：寻找“病灶”
Claude 4.5 已经是碳基生物能用到的最强战力了。
是 Prompt 写得不好吗？我差点就把 CSS 手册喂给它了，那是 Cursor 不好用？ 也不是。
看到日志的时候，我悟了。
真相是：它撑到了
（AI 的上下文包括我们发送的信息、prompt、系统提示词、每轮的记忆、回答的信息....）
figma mcp 提取的 json 里面包含了：隐藏的废案图层、冗余的 Group 嵌套、乱七八糟的坐标数据。
当我们把这些生数据直接喂进去时。 瞬间撑爆了 AI 的 上下文窗口 (Context Window)。
AI 记不住这么多信息，顾头不顾腚，翻车是必然的。
第三回合：给数据“拆箱”与“喂饭”
1. AI 不是许愿池里的王八。 它听不懂你的“随便”，也看不懂你的“大概”。
如果在 Figma 源头里就是一锅粥，那脚本也救不了。
要想让 AI 跑出完美代码。稍微做一点点“数据”管理，开发（和 AI）都会给你磕头。
把 Auto Layout 焊死（给 AI 喂逻辑） 别再用透明矩形去挤位置了，也别用空格键去调间距了。 在 AI 眼里，那不是“留白”，那是“诈骗”。 给它最严格的容器逻辑，它才能还你最结实的代码骨架。
拒绝“Frame 1”地狱（给 AI 喂语义） 图层命名，不再是为了好找，而是为了“定义”。 当你在图层里写下 Submit_Button 时，你是在告诉 AI： “这货是个按钮，不是个画着字的方块。” 给 AI 一个语义锚点，别让它去猜谜。
别让 AI 用 CSS 画清明上河图，对于那些复杂的矢量图标，放过 AI，它会写到 CPU 冒烟，然后给你画个四不像。 直接切成 SVG 投喂。
2. 我们也不搞一键生成，而是分步投喂：
别指望 AI 能一口气吃成个胖子。 我们把页面拆解成了 Header、Card、List 等多个独立的小件。我们每次选中一个进行还原调试，这样 AI 就能每次只关注于一个模块进行还原。
最后一步，就像拼乐高一样。 让 AI 把这些写好的组件，拼装起来。
FIGMA 整理好之后，我们选择对应模块，复制链接然后发送指令
（使用 React + [Tailwind/CSS Modules] 将我发送的 Figma 设计稿还原为为页面。我们会分模块进行，因此请务必考虑全局样式的复用性，并仔细对比参考图的间距、字体和颜色，追求像素级还原。现在请完成第一个模块：Hero 区域）
Cursor 会自己获取对顶区域的截图，甚至是获取完整的上下区域截图进行参考
每个模块生成后我们可以检查效果是否正常还原。
若存在问题，Cursor 现在还内置了浏览器，支持快速选择元素，我们可以点击选择对应元素。并发送给 AI 进行修改，如果还是过大，当然我们也可以选择更小的节点重新生成。
比如这个卡片的效果不对，我选中卡片的 div 后发送：
< div >卡片背景的描边是具有渐变的，内阴影具有混合模式（叠加），帮我修复
如果一些细节样式不对，我们可以 shift+D 打开 figma 开发模式，直接复制对应的样式给 AI
调整后
我们分别把每个模块都实现后，再简单实现下响应式和一些小的交互效果。
我们看下最终效果。
当视频在手机上无法加载，可前往PC查看。当 Figma 里的每一个 Auto Layout 都变成了代码里的 Flexbox。 当每一个图层命名都变成了 AI 读得懂的语义。
这比任何 Prompt 技巧都管用
目前的 AI 还没进化到“魔法”的程度。 所谓的“一键生成”，在面对复杂业务时往往失效。
只有当我们学会拆解问题，懂得如何给 AI 提供清晰、纯净的输入时（也就是如何拆解上下文），它才能发挥出真正的价值。
想象一下，以后再碰到类似页面，我们直接把代码甩过去，是多么的优雅。
一旦我们开始清晰地“定义意图”，我们就慢慢拿回了那个丢失已久的权利： 所见，即所得。意图，即产品。
四、当“画图”不再是护城河
最后的最后，聊聊未来。
以前，设计行业像是一个森严的中世纪公会。 我们靠着日复一日的“刨木头”——切图、标字号、画图标——来传承手艺。 那时候，我们的护城河是你熟练掌握了 设计软件的所有快捷键，是你闭着眼能画出符合 iOS 规范的圆角。
现在，AI 无情地剥夺了我们“磨练手艺”的机会
但也第一次给了我们“直接造房子”的权利
AI 一分钟可以生成 100 种界面。 它能算出哪种布局点击率最高，但它不懂“美感”。 它能写出完美的逻辑代码，但它不懂“文化隐喻”
唯一的区分度，在于“品味”和“判断”。
以前，设计和研发之间，横着一堵“柏林墙”。 我们在墙这头画图，他们在墙那头写代码。 我们唯一的交流，是名为“评审”的扯皮，和名为“走查”的互相折磨。
现在，AI 把这堵墙推倒了。 未来的协作只剩两端：“定义问题的人” 和 “解决问题的 AI”。 中间的翻译层，未来将不复存在。
当战术执行的成本趋近于零。 一个设计师 + 一个 AI，就是一支队伍。 你不再需要一个庞大的研发团队来为你实现想法。 你只需要一个好点子，加上一点点指挥 AI 的能力。
写在最后
篇幅有限，很多理论，包括涉及到代码规范和后端的内容，并没有展开（勿喷）。
在未来（也许就是明年），你不需要懂 React，不需要懂 Git。 自然语言，就是最高级的编程语言。 你只需要用最直觉的话、最潦草的草图，去描述你的“意图”。 而 AI，负责把意图变成现实。
