Visual Editor

คลิกที่ element เพื่อแก้ไขข้อความ สี ระยะห่าง ฟอนต์ และอื่นๆ เหมาะสำหรับการปรับแต่งเล็กน้อย สำหรับการเปลี่ยนแปลงใหญ่ควรใช้ chat แทน

Visual Editor ให้คุณเปลี่ยนแปลง UI ของแอปได้โดยการคลิกที่ element และแก้ไข property โดยตรง สลับไปยังโหมด Visual ใน toolbar ของ builder เพื่อเปิดใช้งาน

วิธีการทำงาน

สลับไปยังโหมด Visual — เป็น sub-mode ของ Preview ใน toolbar (toolbar มีสองส่วนคือ Preview และ Admin)
เอาเมาส์ชี้ไปที่ element ในหน้า preview — element จะถูกไฮไลต์ด้วย overlay
คลิกที่ element เพื่อเลือก
แก้ไข property ในแผงด้านข้าง: ข้อความ สี ระยะห่าง ฟอนต์ เส้นขอบ รูปภาพ และเอฟเฟกต์

การเปลี่ยนแปลงจะถูกนำไปใช้ทันทีใน preview และเขียนลงในไฟล์ต้นฉบับของคุณ ใช้ปุ่ม Reset last edit ในแผงด้านข้างเพื่อยกเลิกการเปลี่ยนแปลง property ล่าสุด

ฉันสามารถแก้ไขอะไรได้บ้าง?

ข้อความ — แก้ไข copy โดยตรง
ขนาดฟอนต์ — xs, sm, base, lg, xl ฯลฯ
น้ำหนักฟอนต์ — thin, light, normal, medium, semibold, bold, extrabold
ฟอนต์ — Geist, Inter, Montserrat, Noto Serif, Geist Mono, Fira Code, JetBrains Mono
สไตล์ฟอนต์ — สลับตัวเอียง (Italic)
การจัดแนวข้อความ — left, center, right, justify
สีข้อความ — สี Tailwind ใดก็ได้
สีพื้นหลัง — สี Tailwind ใดก็ได้
ระยะห่าง — Padding และ margin ทุกด้าน
เส้นขอบ — ความหนา สี และความโค้ง (ใช้ได้กับ element ประเภท container ที่ไม่มีเนื้อหาข้อความ)
รูปภาพ — แทนที่ด้วยการค้นหาภาพ stock หรืออัปโหลดรูปของคุณเอง (ใช้ได้กับ element img และ background image)
เอฟเฟกต์ — เงา (Shadow) และความโปร่งใส (Opacity)

เลิกทำ / ทำซ้ำ

ใช้ Cmd+Z (Mac) หรือ Ctrl+Z (Windows) เพื่อเลิกทำการเปลี่ยนแปลง และ Cmd+Shift+Z / Ctrl+Shift+Z เพื่อทำซ้ำ

Page palette

Visual Editor จะตรวจสอบหน้าของคุณและรวบรวมสี Tailwind และ CSS custom property ทุกรายการที่ใช้งานอยู่แล้ว เมื่อคุณเปิด color picker สำหรับ element ที่เลือก คุณสามารถเลือกสีจาก page palette นี้เพื่อให้สอดคล้องกับ design system ที่มีอยู่แล้ว แทนที่จะต้องเดา hex code เอง

ถาม AI เกี่ยวกับ element ที่เลือก

สำหรับการปรับแต่งที่ property editor ไม่สามารถทำได้ ให้พิมพ์ prompt สั้นๆ ลงใน input Ask AI ที่ด้านล่างของแผงด้านข้าง element ที่เลือกจะถูกส่งเป็น context ดังนั้น prompt อย่าง “ทำให้ card นี้กระชับขึ้น” หรือ “เพิ่ม hover state พร้อมเอฟเฟกต์ยกขึ้นเล็กน้อย” จะทำงานได้โดยไม่ต้องอธิบายว่าหมายถึง element ไหน

Element แบบ Static กับ Dynamic

Visual Editor ทำงานได้ดีที่สุดกับ static element ที่ className และเนื้อหาข้อความเป็น string literal ใน JSX สำหรับ dynamic element (className ที่คำนวณ, การ render แบบมีเงื่อนไข, expression ต่างๆ) editor จะสลับไปใช้ AI chat พร้อม structured prompt โดยอัตโนมัติ

ควรใช้ Visual Editor เมื่อไหร่?

Visual Editor เหมาะที่สุดสำหรับ การปรับแต่งเล็กน้อยที่รวดเร็ว:

แก้ไขคำผิด
ปรับระยะห่าง
เปลี่ยนสี
อัปเดตข้อความบนปุ่ม

สำหรับการเปลี่ยนแปลงขนาดใหญ่ (เพิ่ม section ใหม่ ปรับโครงสร้าง layout หรือฟีเจอร์ใหม่) ให้ใช้ AI chat แทน

บันทึกการเปลี่ยนแปลงอย่างไร?

การเปลี่ยนแปลงจะถูกบันทึกอัตโนมัติเมื่อคุณแก้ไข property ไฟล์จะถูกเขียนลงใน runtime และการเปลี่ยนแปลงจะถูก commit เข้าประวัติเวอร์ชันในรอบ builder ถัดไปที่มีการ commit

คำถามที่พบบ่อย

สามารถเลิกทำการแก้ไขจาก visual ได้ไหม?

ได้ ใช้ Cmd+Z / Ctrl+Z เพื่อเลิกทำ Visual Editor มี undo/redo stack ของตัวเอง

ทำไมบาง element แก้ไขได้แต่บางอันแก้ไขไม่ได้?

ข้อความ static และ attribute className สามารถแก้ไขได้โดยตรง ส่วนค่าที่เป็น dynamic หรือคำนวณ (template literal, ternary expression, function call) จะสลับไปใช้ AI chat โดยอัตโนมัติ

ควรใช้ Visual Editor หรือ AI chat?

เครื่องมือ	เหมาะสำหรับ
Visual Editor	การเปลี่ยน property อย่างรวดเร็ว (ข้อความ สี ระยะห่าง) โดยการคลิก
AI Chat	การเปลี่ยนแปลงซับซ้อน ฟีเจอร์ใหม่ การ debug

นี่คือสองวิธีเดียวในการแก้ไขแอปของคุณ — ไม่มี code editor ดูเพิ่มเติมที่ การแก้ไขและการเข้าถึงโค้ดของคุณ