ทำไม UX/UI Designer ควรรู้เรื่องนี้
AI Tools ไม่ได้ทำงานได้ดีเพียงเพราะเรา Prompt เก่งอย่างเดียว แต่ต้องรู้จักกำหนดกติกาให้ AI ทำงานด้วย Designer ที่ใช้ AI ได้ดีคือคนที่รู้จักวางกรอบให้ AI ทำงานสม่ำเสมอและต่อยอดได้
- กติกาด้านหน้าตาและสไตล์งานออกแบบ
- กติกาด้านวิธีคิดและขั้นตอนการทำงาน
- การทำงานร่วมกับ AI ให้สม่ำเสมอและต่อยอดได้
สองไฟล์ที่ Designer สาย AI เจอบ่อยที่สุดคือ Design.md และ Skill.md ซึ่งทำคนละหน้าที่ แต่ใช้ร่วมกันได้อย่างทรงพลัง
Design.md คืออะไร?
Design.md คือไฟล์ Markdown ที่ใช้กับ Google Stitch เพื่อกำหนดแนวทางด้านการออกแบบให้ AI เข้าใจว่า งาน UI ที่กำลังจะสร้างควรหน้าตาเป็นแบบไหน
สิ่งที่ Design.md ครอบคลุมมักเป็นเรื่องของ Visual Direction และ Design System เช่น
Visual & Design System
Skill.md คืออะไร?
Skill.md คือไฟล์ Markdown ที่ใช้กับ Claude AI / Claude Skills เพื่อกำหนดวิธีการทำงานของ AI ว่าควรทำงานเฉพาะทางอย่างไรให้เป็นระบบ
สิ่งที่ Skill.md ครอบคลุมมักเป็นเรื่องของ Workflow และ Process เช่น
Workflow & Process
Design.md กับ Skill.md เหมือนกันตรงไหน
แม้จะถูกออกแบบมาเพื่อเครื่องมือคนละตัว แต่แนวคิดเบื้องหลังของทั้งสองไฟล์มีจุดร่วมที่ชัดเจน
Design.md กับ Skill.md แตกต่างกันอย่างไร
ความต่างหลักอยู่ที่ เป้าหมาย และ โฟกัส ของไฟล์ Design.md โฟกัสที่ "หน้าตา" ส่วน Skill.md โฟกัสที่ "วิธีคิดและขั้นตอน"
ตัวอย่างการใช้ Design.md ในงาน UX/UI
Design.md เหมาะกับทุกสถานการณ์ที่เราต้องการคุมหน้าตาให้สม่ำเสมอ ไม่ว่า AI จะ Generate กี่หน้าจอ ก็ยังอยู่ในทิศทางเดียวกัน
- ใช้กำหนด Mood & Tone ของแอป
- ใช้คุม Style ของ Landing Page
- ใช้สร้าง UI หลายหน้าที่หน้าตาไปทางเดียวกัน
- ใช้สร้าง Design Direction ก่อนส่งต่อเข้า Figma
- ใช้เป็น Design Rule สำหรับ AI Generated UI
ตัวอย่างการใช้ Skill.md ในงาน UX/UI
Skill.md เหมาะกับงานที่ต้องการให้ AI ทำงานเฉพาะทางซ้ำ ๆ ได้อย่างมีขั้นตอน เช่น การ Review งาน หรือการสรุปผล Research
- UX/UI Audit
- Heuristic Review ตามหลัก Jakob Nielsen
- Design System Review
- User Flow Review
- Research Synthesis
- สรุปผล Survey / Interview
- สร้าง Prompt สำหรับ AI Workflow
- Figma Annotation หรือ Comment สำหรับ Review งาน
ถ้าเป็น UX/UI Workflow ควรใช้คู่กันอย่างไร
วิธีที่ทรงพลังที่สุดคือใช้ Design.md และ Skill.md ร่วมกัน Design.md คุมหน้าตา ส่วน Skill.md คุมกระบวนการ
ตัวอย่าง Workflow
- 1ใช้ Design.md กำหนดทิศทางภาพรวมของ UI เช่น Mood, สี, Typography, Components
- 2ใช้ Google Stitch Generate หน้าจอตาม Design.md ที่กำหนดไว้
- 3ใช้ Skill.md ให้ Claude Review หน้าจอหรือ Flow ตามเกณฑ์ UX
- 4ให้ Claude วิเคราะห์ปัญหา UX และเสนอแนวทางปรับปรุง
- 5นำผลลัพธ์กลับไป Iterate ต่อใน Figma หรือ AI Tool อื่น
Design.md ช่วยให้ "หน้าตาดีและสม่ำเสมอ"
Skill.md ช่วยให้ "กระบวนการคิดและการตรวจงานเป็นระบบ"
สำหรับมุมมองที่ใหญ่กว่าเรื่องไฟล์ .md อ่านเพิ่มได้ที่ Vibe Design vs Vibe Code ซึ่งจะช่วยให้เห็นภาพว่าทักษะใหม่ของ UX/UI Designer ยุค AI ครอบคลุมอะไรบ้าง
ข้อควรระวัง
- อย่าคิดว่า Design.md แทน Design System จริงได้ทั้งหมด มันคือกติกาให้ AI ไม่ใช่ระบบที่ทีมใช้งานจริง
- อย่าคิดว่า Skill.md ทำให้ AI เข้าใจบริบทธุรกิจทั้งหมดทันที
- Designer ยังต้องเข้าใจ UX Research, UX Design, UI Design, Design System และ Business Context
- AI ช่วยให้เร็วขึ้น แต่ Designer ต้องเป็นคนกำหนดทิศทางและตัดสินใจ
สรุป Design.md กับ Skill.md
- Google Stitch → ใช้ Design.md
- Claude AI → ใช้ Skill.md
- Design.md = Design Rule (งานควรหน้าตาเป็นแบบไหน)
- Skill.md = Working Rule (เวลาทำงานนี้ ต้องทำอย่างไร)
ถ้าเข้าใจทั้งสองอย่าง จะใช้ AI ในงาน UX/UI ได้แม่นขึ้น เป็นระบบขึ้น และต่อยอดได้ดีขึ้น
อยากใช้ AI ในงาน UX/UI แบบเป็นระบบ?
ถ้าคุณอยากเข้าใจการใช้ AI ในงาน UX/UI แบบเป็นระบบ ตั้งแต่ UX Research, UX Design, UI Design, Design System, Figma ไปจนถึง AI Workflow สามารถติดตามบทความและคอร์สเรียนจาก UXUI STUDIO ได้
เรียน UX/UI ให้เข้าใจตั้งแต่พื้นฐาน จนใช้ AI เป็นผู้ช่วยในการทำงานออกแบบได้อย่างมีประสิทธิภาพ
คำถามที่พบบ่อยเกี่ยวกับ Design.md และ Skill.md
Design.md คืออะไร?
Design.md คือไฟล์ Markdown ที่ใช้กำหนดแนวทางด้านการออกแบบให้ AI เช่น Google Stitch โดยระบุ Mood & Tone, Visual Direction, Color, Typography, Spacing, Layout, Components และ Design System เพื่อให้ AI สร้าง UI ออกมาในสไตล์ที่ต้องการอย่างสม่ำเสมอ
Skill.md คืออะไร?
Skill.md คือไฟล์ Markdown ที่ใช้กำหนดวิธีการทำงานของ AI เช่น Claude AI / Claude Skills โดยระบุ Instructions, Workflow, Checklist, Rules, Step-by-step process และ Templates เพื่อให้ AI ทำงานเฉพาะทางได้อย่างเป็นระบบ
Design.md กับ Skill.md ต่างกันอย่างไร?
Design.md เน้นกำหนดว่า งาน UI ควรหน้าตาเป็นแบบไหน ส่วน Skill.md เน้นกำหนดว่า เวลาทำงานนี้ AI ควรทำอย่างไร สรุปสั้น ๆ คือ Design.md = Design Rule และ Skill.md = Working Rule
Google Stitch ใช้ Skill.md ได้ไหม?
Google Stitch ออกแบบมาให้ใช้ Design.md เป็นหลักในการกำหนด Visual Direction ของ UI ไม่ได้ใช้ Skill.md โดยตรง แต่เราสามารถนำแนวคิดของ Skill.md ไปประยุกต์ในการเขียน Prompt หรือคู่มือการทำงานควบคู่กันได้
Claude AI ใช้ Design.md ได้ไหม?
Claude AI สามารถอ่านและเข้าใจไฟล์ Markdown ได้ทุกแบบรวมถึง Design.md แต่ระบบ Claude Skills จะใช้ Skill.md เป็นไฟล์มาตรฐานในการกำหนด Workflow มากกว่า ส่วน Design.md เหมาะกับการเป็น Reference ด้านสไตล์งานออกแบบ
UX/UI Designer ควรรู้เรื่อง Design.md และ Skill.md ไหม?
ควรรู้ เพราะในยุค AI การกำหนดกติกาที่ชัดเจนให้ AI ทำงาน คือทักษะใหม่ของ Designer ช่วยให้ทำงานเร็วขึ้น สม่ำเสมอขึ้น และต่อยอดงานออกแบบกับ AI Tools ได้อย่างเป็นระบบ
Design.md และ Skill.md ช่วยให้ใช้ AI ทำงานออกแบบดีขึ้นอย่างไร?
Design.md ช่วยให้ AI สร้าง UI ที่หน้าตาสม่ำเสมอตาม Brand และ Design System ส่วน Skill.md ช่วยให้ AI ทำงานเฉพาะทาง เช่น UX Audit, Heuristic Review หรือ Design System Review ได้อย่างเป็นขั้นตอน ลดการอธิบายซ้ำในทุก Prompt