เลิกแก้ UI ของ AI ที่พังด้วยตัวเองเสียที

เครื่องมือเขียนโค้ด AI ของคุณมักจะสอบตกเรื่องการออกแบบ

คุณสั่งให้สร้างปุ่ม AI ก็ให้สีฟ้าเฉดหนึ่ง พอคุณสั่งให้สร้างคอมโพเนนต์อื่น AI ก็ให้สีฟ้าอีกเฉดหนึ่ง เรื่องนี้เกิดขึ้นเพราะ AI ขาดระบบการออกแบบ (design system) ที่เข้มงวด

Google Labs ได้ปล่อย design.md ออกมาเพื่อแก้ปัญหานี้

มันคือข้อกำหนด (specification) ที่ช่วยให้เครื่องมืออย่าง Cursor, Claude Code และ GitHub Copilot สามารถอ่านกฎการออกแบบของคุณได้ ซึ่งจะช่วยป้องกันปัญหาเรื่องระยะห่างที่ไม่สม่ำเสมอ ฟอนต์ที่ผิดพลาด และสีที่เพี้ยนไปจากเดิม

วิธีการทำงาน:

design.md เป็นไฟล์ Markdown ที่แบ่งออกเป็นสองส่วน

  • YAML Front Matter: ส่วนนี้จะบรรจุ design tokens ที่แม่นยำ คุณสามารถกำหนดสี, typography, ระยะห่าง (spacing) และความโค้งมนของมุม (corner radii) ไว้ที่นี่
  • Markdown Body: ส่วนนี้จะบรรจุเหตุผลเบื้องหลังการออกแบบ (design rationale) โดยจะอธิบายว่าทำไมคุณถึงใช้สีนั้นๆ และเมื่อไหร่ที่ควรหลีกเลี่ยง

โครงสร้างนี้ช่วยให้ AI เข้าใจทั้งข้อมูลและตรรกะ มันไม่ได้เห็นแค่รหัส hex เท่านั้น แต่มันจะเข้าใจว่าสีเฉพาะเจาะจงนี้มีไว้สำหรับหัวข้อ (headlines) และไม่ควรนำไปใช้กับเนื้อหา (body text)

คุณสมบัติหลักของ design.md CLI:

  • Linting: ตรวจสอบว่า tokens ของคุณถูกต้องหรือไม่ และยังตรวจสอบความต่างของสี (contrast) ตามมาตรฐานการเข้าถึง WCAG AA ด้วย
  • Diffing: แสดงให้เห็นอย่างชัดเจนว่ามี tokens ตัวไหนบ้างที่เปลี่ยนไปเมื่อคุณอัปเดตการออกแบบ
  • Exporting: แปลงไฟล์การออกแบบของคุณให้เป็น Tailwind CSS, JSON หรือ W3C Design Tokens
  • Spec: สร้างคู่มือที่คุณสามารถส่งให้ AI เพื่อสอนวิธีอ่านไฟล์ของคุณ

ทำไมเรื่องนี้ถึงสำคัญ:

นักพัฒนาส่วนใหญ่ใช้ CLAUDE.md หรือ AGENTS.md สำหรับกฎทั่วไป แม้ว่าจะมีประโยชน์ แต่ไฟล์เหล่านี้ส่วนใหญ่เป็นภาษาธรรมชาติ (natural language) ซึ่งทำให้ AI ยังต้องคาดเดาค่าเฉพาะเจาะจงอยู่ดี

design.md จะเปลี่ยนระบบการออกแบบของคุณให้กลายเป็นข้อมูลที่เครื่องจักรสามารถอ่านได้ (machine-readable data)

วิธีใช้งาน:

  1. วาง DESIGN.md ไว้ที่ root ของโปรเจกต์
  2. ใน CLAUDE.md หรือ Cursor rules ของคุณ ให้เพิ่มบรรทัดนี้: "For UI tasks, read DESIGN.md first and strictly follow the tokens and rationale."

เลิกพูดซ้ำๆ ว่า "สีผิด" กับ AI ของคุณ แล้วให้ "แหล่งข้อมูลความจริงชุดเดียว" (single source of truth) แก่มันแทน

Source: https://dev.to/isray_notarray/designmd-if-your-ai-generated-ui-keeps-drifting-youre-missing-googles-designmd-4abh

Optional learning community: https://t.me/GyaanSetuAi