工作经验｜使用AI交付规范化页面的流程
工作经验 · 4 分钟
在使用 vibe coding 交付真实、可落地的设计稿的工作场景下，我逐渐形成了一套更稳定的流程。
我的流程是：先自己梳理需求和用户流程；再判断核心页面布局，搭低保真初稿；然后搭建设计系统和组件规范；之后使用 Codex / Claude，通过 Figma MCP + Skill 读取 Figma 画布；再用自然语言告诉 AI 我的需求，让它把初稿里的临时元素替换成设计系统里的规范组件。
比如替换组件、绑定颜色变量、绑定文字变量；最后我再人工检查。
在这套工作流程中，AI 最有用的地方，就是帮助处理一些重复但重要的规范化工作。
比如：1. 对页面中的元素绑定颜色变量、文字变量；2. 补充不同状态的组件，比如输入框的默认、聚焦、输入中、错误、禁用状态。
这些事情手动做很耗时间。
但我不太建议直接让 AI 从 0 搭建设计系统。设计规范、组件规则，需要人先理解和判断。AI 更适合在规则明确之后，帮你执行和整理。
推荐油管的设计教程，收益良多。