Build mode は、アドプトしたコードベースのプレビューをビジュアルエディタに変えます。動作中のアプリの要素をクリックし、画面上で変更します。テキスト、余白、色。変更は 1design/<slug> ブランチ上の実際のコードに書き戻されます。UI が存在する場所で UI を編集する機能です。
開く
コードベースプロジェクトで、Preview と Sketch の隣の Build タブでパネルが Build mode に切り替わります。アプリがライブでレンダリングされ、その上で編集レイヤーが有効になります。ホバーでカーソル下の要素がハイライトされ、クリックで選択して編集サーフェスが開きます。要素が公開するプロパティをその場で編集できます。
画面上での編集
編集サーフェスは、視覚的に意味のあるプロパティをカバーします。
- Text — コピーをクリックして、置き換えを入力
- Spacing — 選択した要素のパディングとギャップ
- Color — プロジェクトのトークンから、塗りまたはテキスト色
- Type — テキスト要素のサイズ、ウェイト、ファミリ
変更はプレビューにライブで適用されます。結果から切り離されたプロパティパネルではなく、着地する場所で編集が見えます。
コードへの書き戻し
ビジュアル編集はモックオーバーレイではありません。要素の実際のスタイルにマップされ、それを所有するファイルへ、1design/<slug> ブランチ上に変更を書き込みます。次のターンや次のビルドは、それを他のコード変更と同じように読みます。worktree の diff が、あなたの編集分だけ正確に増えます。
diff スコープのチェック
コードベースプロジェクトはコードベース全体ではなく diff を検証します。ターン(または編集)の変更ファイルがチェックされ、ブランチバーの Review changes が何が動いたかを正確に表示します。ビジュアル編集も他と同じ diff です。ブランチに着地し、触れたファイルにスコープされます。
Build vs Preview vs Sketch
- Preview — 動作中のアプリを見る。コメントとピンでステアリング
- Build — UI を視覚的に編集し、変更がコードに書き込まれる
- Sketch — コンポーネントにマップされる
.1dスケッチを置く
Build mode は見える編集のためのものです。もっと大きくすべきボタン、もっと締めるべき見出し。変更が新しいフローや複数要素の再配置なら、ブリーフの出番です。
レビューとマージ
Build mode の編集は、エージェントのターンと同じ worktree ブランチに存在します。ブランチバーは先行コミットを追跡し、Review changes が成果の diff を表示し、正しければ Merge into main が元に戻します。編集からコードへの経路は本物なので、マージも本物のマージです。
得意なこと
- ビジュアルパス — アプリ全体の余白、色、タイプをその場で編集
- コピー編集 — 画面そのもので文言を直す
- トークン調整 — 色やサイズを微調整して、コードへの着地を見る
- ラストワンマイル — ブリーフが大げさすぎる、磨き上げパス
ヒント: Build mode の編集はコードなので、マージ前に diff をレビューしましょう。ビジュアルの微調整は正直なコードですが、「画面上で正しく見える」と「ファイルで正しく読める」は、ブランチをマージする前にどちらも確認する価値があります。