Jan 28, 2026
Vibe Designning 初探：设计师提效 60%
一、工作流的痛点：传统路径的低效循环
现有的开发流程是典型的瀑布流模式 ：产品经理将市场和老板的需求细化为原型 ；设计师基于原型产出设计稿，关注用户体验 ；最终由工程师将设计稿还原为可发布上线的代码，聚焦技术实现 。
- 角色分工： 产品经理聚焦商业价值 ；设计师聚焦用户体验 ；程序员聚焦技术实现 。
- 理想路径： 摒弃原型和设计稿，探索一条理想路径，让整个链路交付的都是前端代码（HTML） 。
二、AI 赋能的初步尝试：代码生成与挑战
AI 的介入，正试图打破传统路径的壁垒 。
- 产品经理： 可以直接通过 AI 将功能列表生成代码 ，但由于缺乏上下文（增量迭代）或产品经理的审美差异，生成的代码通常“不能直接上线使用” 。
- 设计师： 也能通过 AI 将原型生成代码 ，部分解决了体验和细节问题，但目前通过 AI 对话调整细节的效率远低于直接调整设计稿 。
- 程序员： 可将设计稿通过 AI 生成代码，并整合到现有代码库中 。
三、Vibe Design 探索：打通“代码-设计”双向通道
为了解决当前 AI 生成代码的体验和细节问题 ，我们必须打通一条代码与设计相互转换的回路（C2D & D2C） 。
1. 代码到设计（C2D）：当代码需要“美颜”
当产品输出了能在浏览器上预览的代码，但设计师无法通过 AI 调整界面细节时 ，就需要将代码还原为设计稿进行调整 。
- 方案一： 使用浏览器插件（如
html.to.figma）将网页转换为 Figma 文件 。但这有点麻烦，且插件通常收费 。 - 方案二（推荐）： 利用
FigmaMake重新实现 HTML 代码，实现从FigmaMake到FigmaDesign的无缝衔接 。
1.在浏览器中打开 HTML 页面，通过“检查”（Inspect）功能打开开发者工具 。
2.在开发面板中，选中并右键复制整个 <body> 元素（Copy outerHTML） 。
3.将复制的 HTML 代码作为提示词输入 FigmaMake，实现网站的一比一还原 。
4.从 FigmaMake 导入 FigmaDesign 后，设计师即可直接调整细节并交付优化后的设计稿 。
2. 设计到代码（D2C）：设计稿的“一键生成”
从设计到代码（D2C）则属于开发命题 。在 Figma 生态中，可以直接复制设计稿通过 FigmaMake 实现代码生成 。这能为开发人员提升 40% 到 60% 的工作效率，在约定框架下（如 React + TailwindCss），静态页面甚至可以直接使用 。
四、工作流重塑的挑战与未来畅想
1. 现状的尴尬：人员能力与技术风险
- 人才结构： 目前设计师普遍“不具备代码理解能力” ，而多数理工科背景的产品经理则缺乏设计审美和用户视角 ，这为 AI 生成代码带来了可用性风险 。
- 技术瓶颈： AI 的输出不稳定 ，对于成熟产品的开发存在风险 。如何将既有的产品设计规范融入到 AI 驱动的全新链路中，仍是巨大挑战 。
2. 未来的憧憬：角色的融合与消亡
“边界的模糊和工作流的重塑会一直进行” 。在 AI 足够强大的那天，所有角色都将通过对话来调整代码 。届时，如果产品经理拥有设计审美和用户视角，设计师将不再必要 ；如果设计师具备产品 Sense，产品经理的角色也将被弱化 。当新功能的代码能够自动无缝衔接到已有代码库中，前端开发的角色也可能面临终结 。