Build mode 把已采纳代码库的预览变成可视化编辑器:点击运行中
app 里的一个元素,在屏幕上改它——文本、间距、颜色——改动写回
1design/<slug> 分支上的真实代码。在 UI 所在的地方编辑 UI。
打开它
在 codebase 项目上,Preview 和 Sketch 旁边的 Build 标签 把面板切进 Build mode:你的 app 实时渲染,编辑层在它上面激活。 悬停高亮光标下的元素;点击选中它并打开编辑面——元素暴露的属性, 就地可改。
在屏幕上编辑
编辑面覆盖视觉上有意义的属性:
- 文本 ——点击文案,输入替换内容
- 间距 ——选中元素上的 padding 和 gap
- 颜色 ——填充或文字颜色,来自项目的 token
- 字体 ——文本元素的字号、字重、字族
改动实时应用到预览——你在改动落地的位置看到它,而不是在一个 脱离结果的属性面板里。
写回代码
可视化编辑不是模拟覆盖层——它映射到元素的真实样式,把改动写进
拥有这些样式的文件,在 1design/<slug> 分支上。下一轮或下一次
构建把它当普通代码改动读——worktree 的 diff 恰好增长你做的那个
编辑。
diff 范围的检查
codebase 项目验证的是 diff,不是整个代码库——本轮(或本次编辑) 改动的文件被检查,分支条的 Review changes 准确显示动了什么。 可视化编辑和任何 diff 一样——落在分支上,范围限于它碰过的文件。
Build vs Preview vs Sketch
- Preview ——看运行中的 app;用评论和 pin 做 steering
- Build ——可视化编辑 UI,改动写进代码
- Sketch ——放映射到组件的
.1d草图
Build mode 适合你看得见的修改——应该更大的按钮、应该更紧凑的 标题。当改动是新流程或多元素重排时,brief 依然是工具。
评审与合并
Build mode 的编辑和 agent 轮次活在同一条 worktree 分支上——分支条 追踪领先提交,Review changes 显示工作产生的 diff,Merge into main 在对的时候把它带回去。编辑到代码的路径是真的,所以合并 是真的合并。
它擅长什么
- 视觉走查 ——跨整个 app 的间距、颜色、字体,就地编辑
- 文案修改 ——直接在屏幕上改字
- Token 微调 ——拨一个颜色或尺寸,看它落进代码
- 最后一公里 ——brief 显得过重的打磨轮
Tip: Build mode 的编辑是代码,合并前先评审 diff——可视化微调 是诚实的代码,但"屏幕上看着对"和"文件里读着对"在分支合并前 都值得检查。