Design Document
แหล่งรวม design token, component library, และ design–to–code workflow สำหรับแพลตฟอร์ม AppBuddy AI ใช้เป็น reference กลางสำหรับทีม UX/UI และ Frontend
สิ่งที่อยู่ใน Document นี้
สีหลัก, typography, spacing, radius — foundation ของทุกอย่างในระบบ
Button, Badge, Input, Avatar, Toggle — component พื้นฐานที่เล็กที่สุด
Logo, SearchInput, ChatInput, Pagination — กลุ่ม atom ที่ทำงานร่วมกัน
AppShell, SideMenu, CollapsedMenuBar — layout และ section ขนาดใหญ่
190+ icons พร้อม copy import statement — ค้นหาและคลิกเพื่อคัดลอกได้เลย
Preview หน้า Chat, Canvas, Icons — ดูภาพรวมของ UI จริง
วิธีใช้งาน
เปิด Design Tokens ก่อน
ทำความเข้าใจสี, spacing, และ typography ที่ใช้ในระบบ ก่อนลงมือสร้าง component
ดู Atoms สำหรับ component พื้นฐาน
ใช้ Button, Badge, Input และ atom อื่น ๆ ตรง ๆ โดยไม่ต้องสร้างใหม่
ประกอบ Molecules และ Organisms
รวม atom เป็น molecule แล้วนำ molecule ไปประกอบเป็น organism สำหรับ layout จริง
ค้นหา Icon ที่ต้องการ
ไปที่ Icons Library คลิก icon เพื่อ copy import statement แล้วนำไปใช้ในโค้ดได้เลย