เฮโล้ ห่างหายกันไปนาน เพราะแอดรู้สึกเบื่อและอิ่มตัว แถมป่วยออดๆ แอดๆ จนน่ารำคาญตัวเอง ออกกำลังกายหนักแต่ป่วย เป็นธรรมดาของคนออกกำลังกายหนักจนเกินไไป เอาล่ะเข้าเรื่องและเนื้อหาด้านล่างไม่ได้สร้างด้วย AI
.
วันนี้ใครทำงานกับ AI agent อย่าง Cursor, Claude Code หรือ Codex น่าจะคุ้นกับปัญหานี้ดี output มันไม่นิ่ง
.
ลองนึกภาพตามนะ
- วันจันทร์เปิด Cursor สั่งให้ทำหน้า pricing ปุ่ม CTA ออกมามน 16px สีแบรนด์เป๊ะ พอวันพุธจะเพิ่ม section ใหม่ในหน้าเดียวกัน เปิด Claude Code สั่งสร้างปุ่มแบบเดียวกัน
- รอบนี้นี้ทำมน 8px สีเพี้ยนไปนิดนึง
- พอวันศุกร์ทีมหลังบ้านใช้ Codex ทำหน้า dashboard กลายเป็นว่าฟอนต์ headline ที่เคยเป็น Inter เปลี่ยนเป็น Manrope ซะงั้นทั้งที่เป็นโปรเจกต์เดียวกัน
.
ปัญหานี้ไม่ใช่ของใครคนใดคนหนึ่ง คนทำงานกับ AI ทุกคนเจอ และเป็นเหตุผลที่หลายทีมยังไม่กล้าให้ AI ทำ production จริง เพราะรู้ว่าออกมาแล้วต้องนั่ง fix manual อยู่ดี
.
แล้วต้นเดือนที่ผ่านมา Google ก็ open source ของออกมาแก้ปัญหานี้โดยตรง ชื่อว่า DESIGN.md
.
จริง ๆ ของชิ้นนี้ฝังอยู่ในเครื่องมือ Stitch ของ Google มาเกือบปีแล้ว แต่เพิ่งปล่อย Apache 2.0 ให้ทุกคนเอาไปใช้ ทุกคนเอาไปต่อยอด ทุกคนเอาไปใส่ใน AI ตัวอื่นได้อย่างเป็นทางการ
ไอเดียมันเรียบง่ายมาก
.
เขียน design system ทั้งหมดของเราเป็น markdown ไฟล์เดียว วางไว้ที่ root ของโปรเจกต์ แล้ว AI agent จะอ่านไฟล์นี้ก่อนเริ่มงานทุกครั้ง
แค่นี้
ในไฟล์มีสองส่วนเท่านั้น
- ส่วนบนเป็น YAML สำหรับเครื่อง ใส่ค่าดิบ ๆ ลงไปเลย เช่น
- primary: #1A1C1E
- secondary: #6C7278
- h1 fontSize: 3rem
- rounded sm: 4px
- rounded md: 8px
- spacing md: 16px
.
ส่วนล่างเป็น markdown สำหรับคนอ่าน ใช้บอกเหตุผลที่ token ตัวบนเลือกค่านั้น เล่าว่า brand เรามี personality แบบไหน สี tertiary เอาไว้ใช้กับอะไรบ้าง ห้ามเอาไปทำพื้นหลังนะ ปุ่ม primary ใช้ตอน CTA หลักเท่านั้น ฯลฯ
.
โครงสร้างเดินตามลำดับนี้
- Overview เล่าตัวตนของแบรนด์
- Colors ทั้งหมดของ palette
- Typography ฟอนต์และ scale
- Layout grid และ spacing
- Elevation and depth เงาและ layer
- Shapes radius และรูปร่าง
- Components ปุ่ม input card
- Do's and Don'ts ข้อห้ามและคำแนะนำ
.
ทีนี้พอ AI อ่านไฟล์นี้ก่อนทำงาน เวลาเราสั่ง "ทำปุ่ม CTA ให้หน่อย" มันจะไม่เดาแล้ว มันจะเปิด DESIGN.md อ่าน เห็นว่า primary เป็น #1A1C1E rounded md เป็น 8px font หลักคือ Public Sans ก็จับมาประกอบให้ตรงกับ system ทุกครั้ง
.
เวลาเปลี่ยน AI ก็ไม่ต้องสอนใหม่ เพราะไฟล์เดียวกัน Cursor อ่านได้ Claude Code อ่านได้ Copilot อ่านได้ Codex ก็อ่านได้
ถึงตรงนี้ฟังดูดีเกินจริง ลองมาดูจุดที่ชอบจริงและจุดที่ยังเด็กกัน
ที่ชอบจริงคือ มันแก้ pain point ของคนทำงานจริง
format มันก็แค่ markdown กับ YAML ที่ developer และ designer ส่วนใหญ่เขียนเป็นอยู่แล้ว ไม่ต้องเรียนภาษาใหม่ ไม่ต้องลง tool พิเศษ เปิด VS Code พิมพ์ได้เลย มันยึด W3C Design Token Format ที่เป็น standard อยู่แล้ว และมี CLI ส่งออกเป็น Tailwind หรือ DTCG ได้ ใครใช้ Style Dictionary อยู่ก็ไม่ต้องทิ้งของเดิม
.
และที่สำคัญที่สุด มันไม่ได้ออกแบบมาให้ผูกกับ Google AI ตัวไหน Cursor ก็อ่านได้ Claude ก็อ่านได้ Copilot ก็อ่านได้
แต่ก็มีจุดที่ต้องบอกตรง ๆ ก่อนเอาไปใช้ ตัวมันเองยัง alpha อยู่ ใน GitHub Google เขียนเลยว่า expect changes ใครเริ่มเขียนตอนนี้อาจต้องมานั่ง migrate ตอนเวอร์ชันถัดไปออก component ใน spec ปัจจุบันรองรับแค่ 8 property คือ backgroundColor, textColor, typography, rounded, padding, size, height, width แค่นั้น
.
แปลว่ายังไม่มี border ไม่มี shadow ไม่มี transition ไม่มี gradient stop ไม่มี animation ไม่มี breakpoint ใครทำ design system จริงรู้ว่านี่คือพื้นฐานที่ต้องมี ไม่มี dark mode ไม่มี multi-theme เวอร์ชันนี้รองรับ theme เดียว
.
เรื่อง motion, accessibility, content guideline, voice & tone, iconography, illustration style ที่ design system ของบริษัทจริงต้องมี ในนี้ยังไม่มี และที่ทำให้ยังตัดสินใจเทใจไม่ลง คือยังไม่มีบริษัท AI ตัวอื่นออกมาประกาศรองรับ DESIGN.md อย่างเป็นทางการ ถ้าสุดท้าย Anthropic, OpenAI, Microsoft ไม่เอาด้วย มันก็จะกลายเป็น standard อีกตัวที่มาทับซ้อนกับ W3C DTCG, Tailwind, Style Dictionary โดยไม่จำเป็น
.
ถามว่ามันคือ standard ของยุค agent หรือเป็นแค่กระแสที่ผ่านมาแล้วผ่านไป ความเห็นตรง ๆ จาก Design Lazyyy
ทิศทางถูก แต่เวอร์ชันนี้ยังเด็กไป
.
ถ้าโปรเจกต์เป็น landing page, MVP, หรือ side project ที่ token ไม่เยอะ DESIGN.md เอามาใช้ได้เลยวันนี้ คุ้มแน่นอน เพราะแค่ไฟล์เดียวก็ทำให้ output ของ AI สม่ำเสมอขึ้นเยอะ แต่ถ้าเป็น design system ของบริษัทขนาดกลางขึ้นไป มี token หลักพัน มี theme หลายชุด มี motion guideline มี accessibility spec มี content style guide ของเดิมที่ใช้อยู่ยังตอบโจทย์กว่า
.
เดาว่าอนาคต DESIGN.md จะถูกแยกออกเป็นหลายไฟล์ แทนที่จะยัดทุกอย่างไว้ในไฟล์เดียว เพราะยิ่งใส่เยอะยิ่งกิน context ของ AI มาก เหลือพื้นที่ทำงานจริงน้อยลง อาจจะเป็น
- DESIGN.md สำหรับ core token
- MOTION.md สำหรับ animation และ transition
- A11Y.md สำหรับ accessibility
- ICONOGRAPHY ที่ต้องเป็น asset ภาพ ไม่ใช่ text
.
เรื่องนี้สำคัญยังไง เพราะ design system กำลังเปลี่ยนผู้ใช้ปลายทาง
เมื่อก่อน design system เขียนไว้ให้ designer คนต่อไปอ่าน ให้ developer หยิบไปใช้ มันคือเอกสาร
.
วันนี้ design system ต้องเขียนไว้ให้ AI agent อ่านด้วย และอ่านได้ตรงกับที่คนตั้งใจ นี่คือ shift ที่ใหญ่ไม่ต่างจากตอนที่ design system แรก ๆ เกิดขึ้น และคนที่เริ่มคิดเรื่องนี้ก่อน จะได้เปรียบก่อนเสมอ
DESIGN.md อาจจะไม่ใช่คำตอบสุดท้าย แต่มันคือสัญญาณที่ชัดที่สุดว่าวงการกำลังเดินไปทางนี้
.
ใครอยากลองของจริง spec ทางการอยู่ที่ github.com/google-labs-code/design.md
ตัวอย่างพร้อมใช้ที่ getdesign.md ให้ generator ที่ designmd.ai
และ Stitch ของ Google เองที่ stitch.withgoogle.com
ลองเอา DESIGN.md ของ brand เราใส่เข้าไปใน Cursor หรือ Claude Code แล้วสั่งให้ทำ component ดู เทียบกับตอนไม่มีไฟล์นี้
.
#DesignLazyyy #DesignSystem #AIDesign #DESIGNmd