Build mode: edit UI nyata Anda secara visual

Build mode mengubah pratinjau codebase yang diadopsi menjadi editor visual: klik elemen di app Anda yang berjalan, ubah di layar — teks, spasi, warna — dan perubahannya menulis kembali ke kode nyata di branch 1design/<slug>. Ia mengedit UI di tempat UI itu hidup.

Membukanya

Pada proyek codebase, tab Build di samping Preview dan Sketch mengalihkan panel ke Build mode: app Anda ter-render langsung, dan lapisan edit aktif di atasnya. Hover menyorot elemen di bawah kursor; klik memilihnya dan membuka permukaan editnya — properti yang diekspos elemen, bisa diedit di tempatnya.

Build mode — app berjalan dengan elemen terpilih untuk diedit

Mengedit di layar

Permukaan edit mencakup properti yang masuk akal secara visual:

  • Text — klik copy-nya, ketik penggantinya
  • Spacing — padding dan gap pada elemen terpilih
  • Color — warna fill atau teks, dari token proyek
  • Type — ukuran, weight, family pada elemen teks

Perubahan diterapkan langsung ke pratinjau — Anda melihat edit di tempat ia mendarat, bukan di panel properti yang terpisah dari hasilnya.

Edit visual bukan overlay mock — ia dipetakan ke style nyata elemen dan menulis perubahan ke file yang memilikinya, di branch 1design/<slug>. Turn berikutnya atau build berikutnya membacanya seperti perubahan kode lainnya — diff worktree bertambah persis sebesar edit yang Anda buat.

Adopsi repo, kirim turn, branch bar menampilkan commit di depan.

Pemeriksaan diff-scoped

Proyek codebase memverifikasi diff, bukan keseluruhan codebase — file yang diubah turn (atau edit) yang diperiksa, dan Review changes di branch bar menampilkan persis apa yang bergerak. Edit visual adalah diff seperti lainnya — ia mendarat di branch, ter-scope ke file yang disentuhnya.

Build vs Preview vs Sketch

  • Preview — lihat app yang berjalan; steer dengan komentar dan pin
  • Build — edit UI secara visual, perubahan menulis ke kode
  • Sketch — jatuhkan sketsa .1d yang dipetakan ke komponen

Build mode untuk edit yang bisa Anda lihat — tombol yang seharusnya lebih besar, heading yang seharusnya lebih rapat. Saat perubahannya adalah alur baru atau pengacakan multi-elemen, brief tetap alatnya.

Review dan merge

Edit Build mode hidup di branch worktree yang sama dengan turn agen — branch bar melacak commit di depan, Review changes menampilkan diff yang dihasilkan pekerjaan, dan Merge into main membawanya kembali saat sudah benar. Jalur edit-ke-kode itu nyata, jadi merge-nya adalah merge sungguhan.

Apa yang dikuasainya

  • Pass visual — spasi, warna, huruf di seluruh app, diedit di tempatnya
  • Edit copy — perbaiki kata-kata di layar itu sendiri
  • Tuning token — geser warna atau ukuran dan saksikan mendarat di kode
  • Jarak terakhir — pass poles di mana brief berlebihan

Tip: Edit Build mode adalah kode, jadi review diff sebelum merge — tweak visual adalah kode jujur, tapi "terlihat benar di layar" dan "terbaca benar di file" sama-sama layak diperiksa sebelum branch di-merge.

Terkait