Google เปิดซอร์ส DESIGN.md — ไฟล์เดียวบอก AI ว่างานควรหน้าตาแบบไหน

ภาพจำง่ายสุดคือ มันเหมือน CLAUDE.md แต่สำหรับงานดีไซน์ ถ้า CLAUDE.md คือไฟล์ที่เราเขียนกติกางานโค้ดเอาไว้ให้ AI อ่านก่อนลงมือ DESIGN.md ก็คือไฟล์ที่เราเขียนกติกาหน้าตางานเอาไว้ให้ AI agent อ่านก่อนปั้น UI

ในไฟล์เดียวนี้เราบอกได้เลยว่า product ของเราควรใช้สีอะไร ฟอนต์ไหน spacing เท่าไหร่ ปุ่มหน้าตาแบบไหน layout วางยังไง รวมถึงเรื่อง accessibility ด้วย เป็นการรวมข้อมูลดีไซน์ที่กระจัดกระจายให้มาอยู่ในที่เดียว แล้วให้ AI agent หยิบไปใช้เป็นตัวตั้งต้นตอนสร้างงาน

จุดที่ทำให้มันใช้ได้จริงคือ ในไฟล์มีทั้ง structured tokens — ค่าจริง ๆ อย่าง hex ของสี ชื่อ font ค่า radius ค่า spacing — บวกกับส่วน Markdown ที่เขียนอธิบาย design intent ว่าทำไมถึงเลือกแบบนี้ เครื่องอ่านค่า token ไปใช้ได้ คนอ่านคำอธิบายเข้าใจได้ และเพราะมันเป็นไฟล์ข้อความ เลยเก็บใน version control คุมประวัติการแก้ได้เหมือนโค้ดทั่วไป

ตัวเลขที่ทำให้คนหันมามองคือ Google เปิดซอร์สไฟล์นี้เมื่อ 21 เม.ย. แล้วแตะ 70,000+ GitHub stars ภายในเวลาราว 2 สัปดาห์ ซึ่งเร็วมากสำหรับของที่หน้าตาเรียบ ๆ เป็นแค่ไฟล์ Markdown ไฟล์เดียว

ความต่างจากของเดิมอยู่ตรงนี้ ปกติข้อมูลดีไซน์เราเก็บไว้สองแบบ — แบบหนึ่งคือใน Figma ที่สวยและคนดูเข้าใจ แต่ AI agent หยิบไปใช้ตรง ๆ ตอนเขียนโค้ดได้ยาก อีกแบบคือ JSON design tokens ที่เครื่องอ่านได้ดีแต่เป็นค่าดิบ ๆ ไม่มีคำอธิบายว่าเจตนาเบื้องหลังคืออะไร DESIGN.md เอาสองโลกนี้มารวมในไฟล์เดียว มี token ที่เครื่องอ่านได้ บวกคำอธิบาย design intent ที่คนอ่านเข้าใจ และอยู่ในรูปไฟล์ข้อความที่ version-controlled

อีกสัญญาณว่าไม่ใช่แค่กระแสชั่วคราวคือ คอมมูนิตี้เริ่มแชร์ DESIGN.md ของจริงกันแล้ว มีของ Linear, Stripe, Notion และ Vercel ออกมาให้ดูเป็นตัวอย่าง

ฟันธงเลย ถ้าใครทำเว็บด้วย AI coding agent อยู่แล้ว อันนี้ลองได้เลย เพราะมันแก้ปัญหาที่เจอจริงทุกวัน คือ AI ทำดีไซน์ออกมาไม่ตรงแบรนด์ แล้วเราต้องคอยสั่งซ้ำเรื่องสี ฟอนต์ ระยะห่าง ทุกครั้งที่เริ่มงานใหม่ พอมี DESIGN.md เป็นไฟล์อ้างอิงไฟล์เดียว AI ก็หยิบกติกาหน้าตางานไปใช้ได้เองโดยเราไม่ต้องพิมพ์ซ้ำ

วิธีเริ่มที่เสี่ยงน้อยสุดคือ ไปดู DESIGN.md ของ Linear, Stripe, Notion หรือ Vercel ที่คอมมูนิตี้แชร์ไว้ก่อน ใช้เป็นโครงตั้งต้น แล้วค่อยปรับ token — สี ฟอนต์ spacing — ให้เป็นของแบรนด์เรา จากนั้นวางไฟล์ไว้ในโปรเจกต์เหมือนที่เราวาง CLAUDE.md ข้อดีที่ตามมาคือ เพราะมันเป็นไฟล์ข้อความ version-controlled ทีมเห็นประวัติการแก้ดีไซน์ได้ และทุกคนทำงานกับ AI บนกติกาหน้าตางานชุดเดียวกัน