ระบบดีไซน์ · หลังบ้าน
ระบบดีไซน์ของ The Duck Dose หลังบ้าน
ภาษากลางของหน้าจอ /admin — ปุ่ม ข้อความ ไอคอน และฟอร์มชุดเดียว ที่ทุกหน้าหยิบไปใช้ซ้ำได้
ทำไมต้องมีระบบดีไซน์?
หน้า /admin โตขึ้นเรื่อย ๆ จนสไตล์ปุ่ม ฟอร์ม และตารางถูกคัดลอกซ้ำในหลายไฟล์ ระบบดีไซน์รวบทุกอย่างไว้ที่เดียว
สม่ำเสมอ
ปุ่มหลักสีเหลืองเดียวกัน โฟกัสริงเดียวกัน ทุกหน้าจึงดูเป็นผลิตภัณฑ์เดียว
เร็วขึ้น
ประกอบหน้าใหม่จากบล็อกสำเร็จรูป ไม่ต้องเขียนคลาส Tailwind ซ้ำทุกครั้ง
แหล่งความจริงเดียว
อยากเปลี่ยนสีแบรนด์หรือรัศมีขอบ แก้ที่โทเคนชั้นเดียว แล้วเปลี่ยนทั้งระบบ
ขยายต่อได้
มี Storybook ไว้ดูและทดสอบทุกคอมโพเนนต์แยกจากหน้าแอป เพิ่มของใหม่ได้อย่างมั่นใจ
โครงสร้างสามชั้น
ยึดแนวปฏิบัติมาตรฐาน: ค่าดิบ (primitive) → ความหมาย (semantic) → คอมโพเนนต์ (component)
Primitive — ค่าดิบ
สีดิบ รัศมีขอบ ขนาดตัวอักษร เช่น yellow-400, rounded-lg — ยังไม่มีความหมายว่าใช้ตรงไหน
Semantic — ความหมาย
จับค่าดิบมาตั้งชื่อตามบทบาท: action.primary, surface.raised, status.success
Component — คอมโพเนนต์
Button, Text, Icon, Field, Modal ที่ประกอบจากโทเคนความหมาย พร้อมใช้ในหน้า /admin
เวิร์กโฟลว์การออกแบบ
สองเส้นทางที่ทำให้ดีไซน์กับโค้ดเป็นแหล่งความจริงเดียวกัน
จากดีไซน์สู่ระบบ
ดีไซน์ใน Figma ถูกซิงก์กลับเป็นโทเคน/สเปกของระบบ ดีไซน์เนอร์กับระบบจึงตรงกันเสมอ
จากโค้ดสู่ npm
Claude Code อ่านดีไซน์ผ่าน Figma MCP สร้างคอมโพเนนต์ + Storybook รีวิว แล้วจึงเผยแพร่เป็นแพ็กเกจ
คอมโพเนนต์จริงจากระบบ
ทุกชิ้นด้านล่างนำเข้าจาก @/src/design-system โดยตรง — นี่คือของจริงที่หน้า /admin ใช้
ปุ่ม
สถานะ
ตัวอักษร
Admin
Page title
Section title
Body text — the default for descriptions and paragraphs in the back office.
mono · 0F1A2B · metaCard + EmptyState
No items yet.
Composed from Card, Text and Button primitives.