设计师和产品经理直接交付代码：Figma 与代码双向同步的全套开源实践
AI will upend your process—for the better ft. Justin Meyer (Bitovi) | Config 2026 · Justin Meyer
全片 20 分钟·真正值得盯屏约 6 分钟·3 个必看点
- 0:12 – 1:58听
开场：交付流程正在被谁改写
开篇抛出核心判断——软件开发不再只属于工程师，设计师和产品负责人几小时内就能做出原型并提交成百上千行代码。
先用原型跟利益相关者和真实用户迭代、把大风险提前打掉，工程师最后只需要构建一次。
这一段基本是观点陈述，屏幕上没有需要盯着看的东西，边做别的事听完就行。▶ 跳到 0:12讲者 · Justin Meyer - 1:58 – 4:13听
团队采纳 AI 的三级台阶
把团队演进拆成三段：先是个别产品负责人自己做原型推到代码仓库，再到人人会用代理、擅长在任务系统与设计文件之间搬运工作，最后把跑熟的路径搬上云端。
别一步到位，先找到那条被反复走通的路径，再考虑把它自动化。
讲的是组织演进阶段，配图多是文字提纲，听讲述比看屏幕收获更大。▶ 跳到 1:58讲者 · Justin Meyer - 4:13 – 6:00看
为什么原型总是「哪里怪怪的」
指出让 AI 直接做原型必然出现的一致性问题：字体排版前后不统一、数据模型自相矛盾，比如表单里存的是全名，下拉框却只显示名字。给出的解法是三类专用能力包——一个管品牌的颜色与间距规范，一个防止重复造已有组件，一个负责在用假数据时保持数据结构一致有条理。
原型阶段就要把品牌规范、组件清单和数据模型固化下来，否则后面每一步都在放大不一致。
这里放出了具体的出错案例，屏幕上能看到同一份数据在表单和下拉框里长得不一样，看图才明白问题有多隐蔽。▶ 跳到 4:13讲者 · Justin Meyer - 6:00 – 8:20听
在复杂代码库里给原型腾出空间
介绍在现有代码库中加一层接口模拟，让 AI 只专心搭前端，不必连续做架构调整、数据结构变更这一串决定；随后讲如何把原型一键分享出去让干系人试用。
把决策链掐短，非技术同事做原型的速度和成功率会显著提高。
属于工程取舍的解释，画面上以流程示意为主，听清楚为什么要加这一层就够了。▶ 跳到 6:00讲者 · Justin Meyer - 8:20 – 9:59略
设计师怎么接手这个原型
原型通过云端开发环境的链接直接分享，设计师和干系人不用装环境就能上手体验，反馈回来立刻改，进入设计师与工具协作的环节。
可点击的链接比任何评审文档都更快换来真实反馈。
主要是流程和界面截图，快速扫过看清协作路径即可，不必逐句听。▶ 跳到 8:20讲者 · Justin Meyer - 9:59 – 11:40看
把代码原型搬回设计文件，再逐像素校准
演示如何反向把跑起来的原型重建成设计稿——先底层组件和图标，再拼复合组件，最后出整页，并生成设计师习惯的组件变体；关键增强是加了一道截图比对，用组件展示工具提高精度，抓出细微偏差再让工具改回去。
生成设计稿只是一半，加一道视觉比对才能真正达到可用精度。
全段几乎都是屏幕操作和前后对照图，描边粗细、控件位置这类差异只有看画面才能感受到。▶ 跳到 9:59讲者 · Justin Meyer - 11:40 – 14:14看
设计评审和用户故事都交出去
展示两件事：评审环节自动读取任务单和设计文件，产出一致性问题与行为问题并作为批注发回设计稿由设计师回答；写用户故事环节则生成带设计链接的任务初稿，交产品负责人过目。
因为团队把设计文件当作唯一权威来源，连设计问答的上下文也刻意留在设计文件里，而不是散落到聊天记录。
批注是怎么回到设计稿上、提的问题具体长什么样，都在屏幕上，光听只会觉得抽象。▶ 跳到 11:40讲者 · Justin Meyer - 14:14 – 19:32略
实现落地与云端接管
讲从设计正确落地到代码的两个抓手——取到设计的结构化描述，以及声明每个设计组件及其变体对应哪段代码；最后把整条链路搬上云，像指派同事一样把任务派给代理，产出分支后人工在云端环境做上线前评审。
把组件与代码的对应关系声明清楚，按讲者的实践，实现与设计对得上的概率能提高约三倍。
后半段以配置说明和流程图为主，快速扫过抓住那两个抓手和收尾的自动化形态就够了。▶ 跳到 14:14讲者 · Justin Meyer