Design.md คืออะไร? เขียนแค่ครั้งเดียว คุม AI ออกแบบเว็บ ให้สวยเป๊ะ ไม่หลุด Mood & Tone

ทุกครั้งที่สั่ง AI ออกแบบ UI คุณมักต้องพิมพ์บอกสีหลัก ฟอนต์ และความมนมุมซ้ำๆ หรือผลลัพธ์ที่ได้กลับเพี้ยนไปคนละทาง Design.md คือสเปกไฟล์ข้อความธรรมดาที่รวบรวม Design System ทั้งระบบ ให้ AI ทุกตัวอ่านเข้าใจตรงกัน และส่งต่อให้ทีม Dev นำไปสร้างโค้ดได้ทันที

Design.md คืออะไร

ลองจินตนาการถึง "คู่มือ Hand-off งานระบบดีไซน์" ที่ยุบรวมทุกอย่างมาอยู่ในไฟล์ข้อความ (.md) เพียงไฟล์เดียว Design.md คือสเปกกลางที่รวบรวมค่าวัดผลและกฎเกณฑ์ของแบรนด์ เช่น สี, ฟ้อน, Spacing, Radius, Shadow ไปจนถึงข้อควรทำและข้อห้าม (Do’s & Don’ts) ไว้ในที่เดียว

สิ่งที่ทำให้มันพิเศษกว่าการพิมพ์โน้ตทิ้งไว้ทั่วไป คือมันมี "โครงสร้างมาตรฐานที่ตกลงกันไว้แล้ว" ทำให้ AI ทุกค่าย (ไม่ว่าจะเป็น Claude, Codex, Cursor หรือ Google Stitch) สามารถอ่านสเปกชุดเดียวกันนี้แล้วเข้าใจตรงกันทันที ช่วยลดปัญหา AI เจน UI ออกมาเพี้ยนคนละทิศคนละทาง

จุดเริ่มต้น: สเปกนี้พัฒนาขึ้นโดย Google Labs (ต่อยอดจาก Google Stitch เครื่องมือออกแบบด้วย AI ของ Google) และเปิดเป็น Open Source ให้ทุกคนนำไปพัฒนาต่อได้อย่างอิสระภายใต้ License Apache-2.0

💡 สิ่งที่ UX/UI Designer ต้องทำความเข้าใจ

1. มัน "ไม่ได้มาแทนที่" Figma: คุณยังคงใช้ Figma เป็นพื้นที่ออกแบบหลักตามเดิม แต่ Design.md ทำหน้าที่เป็น "สะพานเชื่อม (Hand-off)" ส่งต่อดีไซน์จาก Figma ไปให้ AI และทีม Dev นำไปสร้างหน้าจอตรงตามสเปก
2. สถานะปัจจุบันยังเป็น alpha: ระบบและสเปกยังอยู่ระหว่างการพัฒนาอย่างต่อเนื่อง บางกฎเกณฑ์อาจมีปรับเปลี่ยนในอนาคต แต่โครงสร้างหลักสามารถนำมาเริ่มทดลองใช้งานจริงได้แล้ว

Design.md มีความสำคัญกับ UX/UI Designer อย่างไร?

1. เขียนครั้งเดียว ใช้ได้กับ AI ทุกตัว: ไม่ยึดติดกับแพลตฟอร์ม หยิบไฟล์ไปใช้กับ AI ไม่ว่าจะเป็น Claude, Codex, Cursor หรือ Google Stitch ได้ทันที
2. เชื่อม Figma และ Code: แปลง Design Tokens (สี, ฟอนต์, spacing) ออกเป็นตัวแปร CSS หรือ Tailwind ให้ทีมพัฒนาใช้งานต่อได้โดยไม่ต้องทำเอกสาร Hand-off ซ้ำซ้อน
3. จัดการง่ายผ่าน Text: แก้ไขผ่านข้อความล้วน เปิดดูประวัติการแก้ไขร่วมกับทีมได้ชัดเจน

โครงสร้างของ Design.md

---
version: alpha
name: CreateSpace
colors:
  primary: "#E11D48"
  secondary: "#2563EB"
typography:
  hero:
    fontFamily: Poppins
    fontSize: 72px
rounded:
  md: 8px
---

# CreateSpace Design System

## Overview
ระบบที่เน้นบล็อกสีจัดและเลย์เอาต์แบบไม่สมมาตร

## Colors
- **Color Primary** (#E11D48): ปุ่มหลักและจุดเน้นในส่วน Hero

• ส่วนหัว (Frontmatter / Machine-Readable Tokens): อยู่ระหว่างเส้น --- เป็นค่าตัวเลขและรหัสสีจริงที่ AI และระบบแปลงโค้ดดึงไปใช้ได้ทันทีโดยไม่ต้องตีความ
• ส่วนเนื้อหา (Prose / Human Context): อยู่ถัดจากเส้น --- ลงมา เขียนด้วย Markdown สำหรับอธิบายบริบทการใช้งาน กฎเกณฑ์ และแนวทางให้คนอ่านเข้าใจ

กฎสำคัญของ สเปก: "Tokens คือค่าจริงที่ผูกพันตามกฎ; ส่วน Prose คือบริบทประกอบการใช้งาน" หากไฟล์ขาดส่วนหัว Frontmatter จะเท่ากับไฟล์นั้นไม่มีค่าจริงให้เครื่องนำไปใช้

มีไฟล์ Figma อยู่แล้ว เริ่มต้นอย่างไรดี?

หากคุณทำระบบ Design System ใน Figma ไว้เรียบร้อยแล้ว ทั้งการตั้งค่า Color Styles, Text Styles และ Variables คุณ ไม่จำเป็นต้องนั่งพิมพ์สเปกเอง

บน Figma Community มีปลั๊กอินฟรีชื่อว่า Design.md ที่ช่วยแกะโครงสร้างไฟล์ Figma ของคุณ แล้วแปลงออกเป็นไฟล์ Design.md ให้อัตโนมัติ

สิ่งที่ปลั๊กอินนี้ export ออกมา:

• Colors: อ่านค่าจาก Color Variables และ Paint Styles (รองรับทั้ง Light Mode และ Dark Mode)
• Typography: อ่าน Text Styles ทั้งหมด ตั้งแต่ชื่อฟอนต์, Weight, Size, Line Height และระยะห่างตัวอักษร
• Spacing: สแกนและดึงค่า Spacing จาก Variable Collections
• Shapes & Radius: อ่านค่ารัศมีมุมมนทั้งหมดในระบบ
• Elevation & Depth: ดึงค่าทั้ง Drop Shadow และ Inner Shadow
• Components: ดึง Properties และตัวเลือก Variant ทั้งหมดในไฟล์

หมายเหตุ: ในขั้นตอนการ Export คุณสามารถเลือกได้ว่าจะดึงเฉพาะค่า Tokens ตั้งต้นอย่างเดียว หรือจะดึงพร้อมชิ้นส่วน Components ทั้งหมด

วิธีตรวจเช็กความถูกต้องของไฟล์ (Lint & Export)

รันคำสั่งผ่าน Terminal โดยใช้ npx เพื่อตรวจสอบโดยไม่ต้องติดตั้งโปรแกรมถาวร:

ตรวจเช็กรูปแบบและข้อผิดพลาด:

npx @google/design.md lint DESIGN.md

ทดสอบดึงค่าไปใช้จริงในรูปแบบ Tailwind:

npx @google/design.md export --format css-tailwind DESIGN.md

หากคำสั่ง Export คืนค่าตัวแปร CSS เช่น --color-primary: #e11d48; แสดงว่าไฟล์พร้อมใช้งาน หากได้กล่องเปล่า แสดงว่าไฟล์ยังขาดส่วนหัว Frontmatter

ตอนนี้ใครใช้ Design.md บ้าง

เครื่องมือที่อ่านหรือสร้างไฟล์นี้ได้ และผมเปิดดูแล้วว่าพูดถึง Design.md จริง

การเตรียมไฟล์ Design.md ให้มีทั้งส่วนหัว Frontmatter และส่วนเนื้อหา Prose ช่วยลดช่องว่างระหว่างงานออกแบบและโค้ด ทำให้ AI สร้างอินเทอร์เฟซได้ตรงตามระบบดีไซน์ที่คุณตั้งไว้โดยไม่ต้องแก้ไขซ้ำ