Build mode biến preview của một codebase đã adopt thành trình chỉnh sửa trực quan: click một phần tử trong app đang chạy, đổi nó trên màn hình — chữ, khoảng cách, màu — và thay đổi ghi ngược lại vào code thật trên branch 1design/<slug>. Đó là chỉnh UI ngay nơi UI sống.

Mở nó

Trên một codebase project, tab Build cạnh Preview và Sketch chuyển panel sang Build mode: app của bạn render trực tiếp, và lớp chỉnh sửa kích hoạt trên nó. Hover làm nổi bật phần tử dưới con trỏ; click chọn nó và mở bề mặt chỉnh sửa — các thuộc tính phần tử mở ra, chỉnh được tại chỗ.

Build mode — app đang chạy với một phần tử được chọn để chỉnh

Chỉnh trên màn hình

Bề mặt chỉnh sửa bao phủ các thuộc tính hợp lý cho mắt nhìn:

Chữ — click vào copy, gõ thay thế
Khoảng cách — padding và gap trên phần tử đang chọn
Màu — màu fill hay màu chữ, lấy từ token của dự án
Type — cỡ, độ đậm, family trên các phần tử chữ

Thay đổi áp dụng trực tiếp lên preview — bạn thấy chỉnh sửa ngay chỗ nó rơi vào, không phải trong một property panel tách rời kết quả.

Ghi ngược lại vào code

Chỉnh sửa trực quan không phải một lớp phủ giả — nó ánh xạ tới style thật của phần tử và ghi thay đổi vào file sở hữu chúng, trên branch 1design/<slug>. Lượt tiếp theo hay bản build tiếp theo đọc nó như mọi thay đổi code khác — diff của worktree lớn thêm đúng bằng chỉnh sửa bạn vừa làm.

Adopt một repo, gửi một lượt, thanh branch hiển thị commit đi trước.

Kiểm tra giới hạn theo diff

Codebase project verify diff, không phải cả codebase — các file đã đổi của lượt (hay của chỉnh sửa) được kiểm tra, và Review changes trên thanh branch hiển thị chính xác cái gì đã nhúc nhích. Một chỉnh sửa trực quan là một diff như mọi diff khác — nó rơi vào branch, giới hạn trong các file nó chạm vào.

Build vs Preview vs Sketch

Preview — nhìn app đang chạy; điều hướng bằng comment và pin
Build — chỉnh UI trực quan, thay đổi ghi vào code
Sketch — thả các sketch .1d ánh xạ sang component

Build mode dành cho chỉnh sửa mà bạn thấy — cái button đáng lẽ to hơn, cái heading đáng lẽ chặt hơn. Khi thay đổi là một flow mới hay một cuộc xào lại nhiều phần tử, brief vẫn là công cụ.

Review và merge

Chỉnh sửa Build mode sống trên cùng branch worktree với các lượt agent — thanh branch theo dõi số commit đi trước, Review changes hiển thị diff mà công việc tạo ra, và Merge into main đưa nó về khi đã ổn. Đường chỉnh-sửa-sang-code là thật, nên merge là một merge thật.

Nó giỏi gì

Pass trực quan — khoảng cách, màu, type khắp một app, chỉnh tại chỗ
Sửa copy — sửa chữ ngay trên màn hình
Tinh chỉnh token — nhích một màu hay một cỡ và xem nó rơi vào code
Dặm cuối — pass polish nơi một brief là quá tay

Mẹo: Chỉnh sửa Build mode là code, nên hãy review diff trước khi merge — một tweak trực quan là code trung thực, nhưng "trông đúng trên màn hình" và "đọc đúng trong file" đều đáng kiểm tra trước khi branch merge.

Build mode: chỉnh UI thật của bạn một cách trực quan