Visual Editor

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

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

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

1. สลับไปยังโหมด Visual ในแถบเครื่องมือ (พร้อมกับ Preview, Code และ Dashboard)
2. เลื่อนเมาส์ไปเหนือองค์ประกอบใน preview — จะมี overlay ไฮไลต์แสดงขึ้นมา
3. คลิกที่องค์ประกอบเพื่อเลือก
4. แก้ไข properties ในแผง sidebar: ข้อความ สี ระยะห่าง ฟอนต์ เส้นขอบ รูปภาพ เอฟเฟกต์

การเปลี่ยนแปลงจะถูกนำไปใช้กับ preview ทันทีและเขียนลงไฟล์ต้นฉบับของคุณ ใช้ปุ่ม Reset last edit ใน sidebar เพื่อยกเลิกการเปลี่ยนแปลง 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
• สไตล์ฟอนต์ — สลับตัวเอียง
• การจัดวางข้อความ — left, center, right, justify
• สีข้อความ — สี Tailwind ใดก็ได้
• สีพื้นหลัง — สี Tailwind ใดก็ได้
• ระยะห่าง — Padding และ margin ทุกด้าน
• เส้นขอบ — ความกว้าง สี และความโค้ง (ใช้ได้กับ container elements ที่ไม่มีเนื้อหาข้อความ)
• รูปภาพ — แทนที่ด้วยการค้นหาภาพ stock photo หรืออัปโหลดรูปของคุณเอง (ใช้กับ img elements และ background images)
• เอฟเฟกต์ — Shadow และ opacity

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

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

Page palette

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

ถาม AI เกี่ยวกับองค์ประกอบที่เลือก

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

องค์ประกอบ Static กับ Dynamic

Visual Editor ทำงานได้ดีที่สุดกับ static elements ที่ className และเนื้อหาข้อความเป็น string literals ใน JSX สำหรับ dynamic elements (computed classNames, conditional rendering, expressions) editor จะ fallback ไปยัง AI chat พร้อม structured prompt โดยอัตโนมัติ

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

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

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

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

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

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

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

สามารถเลิกทำการแก้ไขด้วย Visual Editor ได้ไหม?

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

ทำไมถึงแก้ไขได้บางองค์ประกอบแต่ไม่ได้บางองค์ประกอบ?

ข้อความ static และ className attributes สามารถแก้ไขได้โดยตรง ส่วนค่าที่เป็น dynamic หรือ computed (template literals, ternary expressions, function calls) จะ fallback ไปยัง AI chat โดยอัตโนมัติ

Visual Editor กับ Code Editor ต่างกันอย่างไร?

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