把代码搬上画布：设计师直接改生产代码并发 PR 的完整现场演示
Designing in code | Config 2026 · Georgia Russ
全片 42 分钟·真正值得盯屏约 29 分钟·3 个必看点
- 0:17 – 5:43听
速度不是答案：AI 时代设计还剩什么
开场直面一个矛盾：AI 让做原型快到前所未有，但更快并没有让设计变好。讲者把设计的价值重新落回发散探索和协作上，并由此引出本场主题——为什么答案是把代码请进画布。
只有看到很多个想法，才判断得出一个想法到底好不好；速度只优化了做法，没替你选出对的那个。
整段是观点铺陈，屏幕上基本只有标题字幕，边做别的事听着就行。▶ 跳到 0:17讲者 · Georgia Russ - 5:43 – 9:38听
代码不是产物，是画布上的一种材料
解释新概念的心智模型：画布上的代码块并不是把代码塞进设计文件，而是一扇指向真实仓库的窗口，设计与代码成为可随时来回切换的两种模态。
把它理解成『窗口』而不是『嵌入』，后面所有演示的逻辑才立得住。
概念解释为主，配图只是辅助示意，听清楚这个比喻比盯着屏幕更重要。▶ 跳到 5:43讲者 · Georgia Russ - 9:38 – 16:11看
把仓库拉进画布，再让它自己分裂
现场演示两条创建路径：从已连接的 GitHub 账号里选仓库克隆进来自动跑通，或者直接选中一个设计图层说『用代码把它做出来』变成可交互原型。随后一条指令同时下发给画布上的多个代码块协同修改。
不需要开发机、不需要懂 Git、不用碰终端，克隆和跑通都由 agent 代劳。
全段都是屏幕操作：仓库选择、自动配置、代码块被复制成一排变体同时刷新——这些状态变化只有看才成立。▶ 跳到 9:38讲者 · Niko - 16:11 – 20:33看
把所有屏幕摊开，把所有人拉进来
演示确定性的屏幕提取：走一遍流程后一键把经过的每一屏铺到画布上，用来对比不同方案的流程差异、讨论『该不该有密码框』这类边界。接着以增长 PM 的身份复制一个代码块直接改，最后揭示演示中那个完整可用的 Figma Design 本身也是画布上的一个代码块。
画布不只是自己干活的地方，更是把工程师和 PM 拉进讨论的地方——AI 很擅长做出看起来精致却漏洞百出的东西，早期的边界反馈因此格外值钱。
屏幕铺开的瞬间和『它居然跑的是完整产品』的揭晓都是画面效果，讲述内容离开画面会失去分量。▶ 跳到 16:11讲者 · Ben - 20:33 – 24:18听
游乐场还是生产线：什么时候用哪个
给出实践分流原则：探索阶段用去掉后端包袱的原型环境，模型跑得更快也更省 token；进入实现阶段再直接在真实生产代码上敲细节。
按用例分流，别用一套环境硬扛探索和落地两件事。
属于方法论过渡段，没有需要盯的操作，听结论即可。▶ 跳到 20:33 - 24:18 – 30:55看
在真实生产代码上动手
把 GitHub 仓库克隆到本地后开始改生产代码：先让 agent 借助代码库上下文把整个网站画成一张结构图看清全貌，再用贴在元素上的批注下达修改指令，每次对话自动生成一次提交形成可回退的历史，改动全程被分支保护着。
分支和提交历史被包装成非工程角色也能直觉上手的样子，改错了随时退回去。
结构图的生成、批注下达时元素泛起的微光、徽章逐步出现在页面上，都是靠画面才能确认『改对了地方』的过程。▶ 跳到 24:18讲者 · Georgia Russ - 30:55 – 34:23看
设计师接棒：设计稿落进生产代码
设计师视角接手：先用产品结构图确认这个功能到底在生产里实现了没有、徽章需要出现在哪些界面；再在空白画布上自由起草，把设计链接丢进编辑器、框住目标区域说『按我的设计加上它』；结果接近但不完全对时，直接拖动元素微调到位。
设计师第一次拥有生产代码级别的可见性——不用进应用建测试账号找状态，也能确认方案覆盖是否完整。
从结构图到框选区域再到手动拖动元素归位，是一条连续的操作链，看画面才能体会那种手感回到设计师手里的感觉。▶ 跳到 30:55讲者 · Angel Nenciso - 34:23 – 42:26看
闭环：改回设计系统，一键提交发布
对齐和颜色不满意时改用熟悉的设计面板直接调；内置的连接器能识别代码库里的变量和组件，让改动天然落在设计系统约束内，分歧太大时还能反向同步回设计库。最后把纯代码页面复制回画布出图，满意后一键创建 PR 交工程师评审，并以四条原则收尾。
设计师直接改生产代码、走正常评审流程合入，这条路径已经通了。
前半段的面板微调和变量选择偏静态，可以稍快带过；但代码页面被送回画布、以及提交评审的那一下是整场的落点，值得停下来看完。▶ 跳到 34:23讲者 · Angel Nenciso