Build mode: แก้ UI จริงของคุณแบบภาพ

Build mode เปลี่ยนตัวอย่างของ codebase ที่นำเข้าเป็นตัวแก้ไขภาพ: คลิกองค์ ประกอบในแอปที่รัน เปลี่ยนมันบนหน้าจอ — ข้อความ ช่องว่าง สี — และการเปลี่ยนเขียน กลับลงโค้ดจริงบน branch 1design/<slug> มันคือการแก้ UI ที่ที่ UI อยู่

การเปิด

บนโปรเจกต์ codebase แท็บ Build ข้าง Preview และ Sketch สลับแผงเข้า Build mode: แอปของคุณเรนเดอร์สด และเลเยอร์แก้ไขเปิดบนมัน Hover ไฮไลต์องค์ ประกอบใต้เคอร์เซอร์; คลิกเลือกมันและเปิดพื้นผิวแก้ไข — คุณสมบัติที่องค์ประกอบ เปิด แก้ในที่

Build mode — แอปที่รันพร้อมองค์ประกอบที่เลือกสำหรับแก้

การแก้บนหน้าจอ

พื้นผิวแก้ไขครอบคลุมคุณสมบัติที่สมเหตุสมผลแบบภาพ:

  • ข้อความ — คลิกข้อความ พิมพ์ทดแทน
  • ช่องว่าง — padding และ gap บนองค์ประกอบที่เลือก
  • สี — สีเติมหรือสีตัวอักษร จาก token ของโปรเจกต์
  • ตัวอักษร — ขนาด น้ำหนัก ชุดบนองค์ประกอบตัวอักษร

การเปลี่ยนใช้สดกับตัวอย่าง — คุณเห็นการแก้ที่ที่มันลง ไม่ใช่ในแผงคุณสมบัติที่ แยกจากผลลัพธ์

การเขียนกลับลงโค้ด

การแก้ภาพไม่ใช่ overlay หลอก — มันแปลเป็นสไตล์จริงขององค์ประกอบและเขียนการ เปลี่ยนลงไฟล์ที่เป็นเจ้าของมัน บน branch 1design/<slug> เทิร์นถัดไปหรือการ สร้างถัดไปอ่านมันเหมือนการเปลี่ยนโค้ดอื่น — diff ของ worktree โตด้วยการแก้ที่ คุณทำเป๊ะ

นำ repo เข้าใช้ ส่งเทิร์น แถบ branch แสดง commit ที่นำ

การตรวจแบบจำกัด diff

โปรเจกต์ codebase ยืนยัน diff ไม่ใช่ทั้ง codebase — ไฟล์ที่เทิร์น (หรือการ แก้) เปลี่ยนถูกตรวจ และ Review changes ของแถบ branch แสดงเป๊ะว่าอะไรขยับ การแก้ภาพเป็น diff เหมือนอื่น — มันลงบน branch จำกัดที่ไฟล์ที่มันแตะ

Build vs Preview vs Sketch

  • Preview — ดูแอปที่รัน; steer ด้วยคอมเมนต์และหมุด
  • Build — แก้ UI แบบภาพ การเปลี่ยนเขียนลงโค้ด
  • Sketch — วาง sketch .1d ที่แปลเป็น component

Build mode สำหรับการแก้ที่คุณเห็น — ปุ่มที่ควรใหญ่กว่า พาดหัวที่ควรแน่นกว่า เมื่อการเปลี่ยนเป็น flow ใหม่หรือการสลับหลายองค์ประกอบ บรีฟยังเป็นเครื่องมือ

Review และ merge

การแก้ Build-mode อยู่บน branch worktree เดียวกับเทิร์น agent — แถบ branch ติดตาม commit ที่นำ Review changes แสดง diff ที่งานผลิต และ Merge into main นำกลับเมื่อมันถูก เส้นทางแก้-เป็น-โค้ดเป็นของจริง ดังนั้น merge เป็น merge จริง

มันถนัดอะไร

  • ผ่านภาพ — ช่องว่าง สี ตัวอักษรข้ามทั้งแอป แก้ในที่
  • แก้ข้อความ — แก้คำบนหน้าจอเอง
  • ปรับ token — ขยับสีหรือขนาดแล้วดูมันลงในโค้ด
  • ไมล์สุดท้าย — การผ่านขัดที่บรีฟเป็น overkill

Tip: การแก้ Build mode เป็นโค้ด ดังนั้น review diff ก่อน merge — การ tweak ภาพเป็นโค้ดที่ซื่อสัตย์ แต่ "ดูถูกบนหน้าจอ" และ "อ่านถูกในไฟล์" ทั้งคู่ ควรเช็กก่อน branch merge

ที่เกี่ยวข้อง