design-system-design-md

name	Design System (DESIGN.md)
description	เลือก/สร้าง/apply design system ให้โปรเจค โดยใช้ DESIGN.md format (Google Stitch) — ใช้เมื่อผู้ใช้พูดถึง design system, เลือก look & feel, brand style, สี/font ของ project, อยากให้ดูเหมือนแบรนด์ X, กำหนด visual identity, DESIGN.md, design token spec — แม้ไม่ได้พูดว่า "design system" โดยตรง ถ้าบริบทเป็นเรื่องกำหนด style/look ให้โปรเจคก็ให้ใช้ skill นี้

PMO Skill: Design System (DESIGN.md)

Related Skills:

• Load pmo-wireframe-design — เมื่อต้องสร้าง wireframe หลังจากมี DESIGN.md แล้ว
• Load design-system-patterns — เมื่อต้องแปลง DESIGN.md เป็น code (tokens, themes) สำหรับ Dev
• Load pmo-traceability — log ทุกครั้งที่สร้าง/แก้ DESIGN.md

---

Goal

กำหนด visual identity ให้โปรเจค โดยใช้ DESIGN.md format — ผู้ใช้สามารถ:

1. เลือกจาก library — มี 58 design system ของแบรนด์จริง พร้อมใช้งาน
2. ผสมหลายแบรนด์ — หยิบ color จาก Stripe + typography จาก Linear
3. สร้างใหม่ทั้งหมด — custom design system เฉพาะโปรเจค
4. Apply เข้าโปรเจค — copy DESIGN.md เข้า project folder ให้ wireframe skill ใช้ต่อ

---

Workflow Overview

Step 1: เข้าใจ Context → Step 2: เลือก/ค้นหา Design System → Step 3: Preview & Confirm
→ Step 4: Customize (ถ้าต้องการ) → Step 5: Apply เข้า Project → Step 6: บันทึก & Log

---

Step 1: เข้าใจ Context

ก่อนเลือก design system ต้องเข้าใจ 4 สิ่งนี้:

ต้องรู้	ถามถ้าไม่ระบุ	ตัวอย่าง
Project	"ทำสำหรับ project ไหน?"	P08-JP
ประเภท product	"เป็นแอปประเภทอะไร?"	Fintech, SaaS, E-commerce
Target audience	"กลุ่มเป้าหมายเป็นใคร?"	Admin (BOF), End user (App)
Mood/Feel	"อยากให้ดูแบบไหน? professional, playful, minimal?"	Clean & modern

ถ้าผู้ใช้ระบุแบรนด์ชัดเจน (เช่น "อยากได้แบบ Stripe") → ข้ามไป Step 2.2 เลย

---

Step 2: เลือก/ค้นหา Design System

2.1 แนะนำจาก Context (ถ้าผู้ใช้ยังไม่เลือก)

จัด category ให้ตรง industry ของ project:

Industry	แบรนด์แนะนำ	เหตุผล
Fintech / Banking	Stripe, Wise, Revolut, Coinbase	Financial-grade design, trust-building
SaaS / Dashboard	Linear, Vercel, Supabase, PostHog	Data-heavy, clean dashboard
E-commerce / Marketplace	Airbnb, Shopify, Pinterest	Product discovery, visual browsing
Developer Tools	Cursor, Raycast, Warp, Mintlify	Code-friendly, dark mode native
Enterprise / Corporate	IBM, Apple, NVIDIA	Professional, scalable
Creative / Design	Figma, Framer, Webflow	Expressive, tool-oriented
Communication / Productivity	Notion, Miro, Intercom, Superhuman	Collaboration-focused
Automotive / Luxury	BMW, Ferrari, Tesla, Lamborghini	Premium, high-impact visual

แสดงเป็นตาราง max 5 ตัวเลือก พร้อมเหตุผลสั้นๆ → รอผู้ใช้เลือก

2.2 เปิด DESIGN.md ของแบรนด์ที่เลือก

Path: design-md/{brand}/DESIGN.md

อ่าน DESIGN.md แล้วสรุปให้ผู้ใช้:

## Design System Summary: {Brand}

### Visual Feel
{1-2 ประโยค จาก Section 1: Visual Theme & Atmosphere}

### Color Palette (Key Colors)
| Role | Color | Hex | Usage |
|------|-------|-----|-------|
| Primary | {name} | {hex} | {usage} |
| Accent | {name} | {hex} | {usage} |
| Background | {name} | {hex} | {usage} |
| Text | {name} | {hex} | {usage} |

### Typography
- **Primary Font:** {font family}
- **Headline Style:** {weight, size range}
- **Body Style:** {weight, size range}

### Distinctive Features
- {2-3 bullet points ที่ทำให้ design system นี้แตกต่าง}

### Best For
- {ประเภท project ที่เหมาะ}

### Preview
- Light: `design-md/{brand}/preview.html`
- Dark: `design-md/{brand}/preview-dark.html`

2.3 เปรียบเทียบหลายแบรนด์ (ถ้าผู้ใช้สนใจมากกว่า 1)

แสดงตาราง side-by-side:

## Design System Comparison

| Aspect | {Brand A} | {Brand B} | {Brand C} |
|--------|-----------|-----------|-----------|
| **Feel** | ... | ... | ... |
| **Primary Color** | {hex} | {hex} | {hex} |
| **Font** | ... | ... | ... |
| **Border Radius** | ... | ... | ... |
| **Shadow Style** | ... | ... | ... |
| **Best For** | ... | ... | ... |

---

Step 3: Preview & Confirm

แสดง summary แล้วถามผู้ใช้:

1. "ต้องการใช้ {Brand} เป็นหลักไหม?"
2. "ต้อง customize อะไรเพิ่มไหม? (เช่น เปลี่ยนสี primary, font)"
3. "ต้องการผสมจากแบรนด์อื่นไหม?"

รอ confirm ก่อนดำเนินการ — ห้าม apply โดยไม่ถาม

---

Step 4: Customize (Optional)

4.1 ใช้ตรงๆ (ไม่ customize)

→ copy DESIGN.md จาก library ไป project folder ตรงๆ

4.2 ปรับแต่งบางส่วน

สร้าง DESIGN.md ใหม่โดย:

• ใช้ base จากแบรนด์ที่เลือก
• Override เฉพาะส่วนที่ผู้ใช้ต้องการเปลี่ยน
• เพิ่ม header comment ระบุ source:

<!-- 
  Based on: {Brand} design system (design-md/{brand}/DESIGN.md)
  Customized for: P{XX}-{CODE}
  Changes: {สรุปสิ่งที่เปลี่ยน}
  Created: YYYY-MM-DD
-->

4.3 ผสมหลายแบรนด์

สร้าง DESIGN.md ใหม่โดยหยิบจากหลาย source:

<!-- 
  Design System Mix for P{XX}-{CODE}
  Sources:
  - Colors: {Brand A}
  - Typography: {Brand B}
  - Components: {Brand C}
  Created: YYYY-MM-DD
-->

ต้องรักษาครบ 9 sections ตาม format มาตรฐาน (ดู references/design-md-format.md)

4.4 สร้าง Custom ทั้งหมด

สร้าง DESIGN.md ใหม่ตาม 9-section format โดยถามผู้ใช้:

Section	คำถาม
1. Visual Theme	"อยากให้ดูแบบไหน? (professional, playful, minimal, bold)"
2. Color Palette	"มี brand color อยู่แล้วไหม? primary color คืออะไร?"
3. Typography	"มี font ที่ต้องใช้ไหม? (หรือให้แนะนำ)"
4. Components	"มี component style ที่ชอบไหม? (rounded buttons, sharp cards)"
5. Layout	"ต้องการ spacing แบบไหน? (compact, comfortable, spacious)"
6. Depth	"ต้องการ shadow แบบไหน? (flat, subtle, elevated)"
7-9	derive จาก 1-6

---

Step 5: Apply เข้า Project

5.1 บันทึก DESIGN.md เข้า project folder

{ProjectFolder}/Wireframe/DESIGN.md

เหตุผลที่อยู่ใน Wireframe/: เพราะ DESIGN.md เป็น input หลักของ wireframe design — อยู่ใกล้ output ที่ใช้มัน

5.2 แจ้งผู้ใช้เรื่อง next steps

## DESIGN.md Applied

**Project:** P{XX}-{CODE}
**Based on:** {Brand} / Custom
**Location:** `{ProjectFolder}/Wireframe/DESIGN.md`

### Next Steps
1. **สร้าง Wireframe** — skill `pmo-wireframe-design` จะอ่าน DESIGN.md นี้โดยอัตโนมัติ
2. **สร้าง Design Tokens** (เมื่อถึง phase Dev) — skill `design-system-patterns` จะแปลงเป็น CSS/code
3. **Preview** — เปิด `design-md/{brand}/preview.html` ในเบราว์เซอร์เพื่อดู token catalog

---

Step 6: บันทึก & Log

6.1 Log to Traceability Matrix

บันทึกลง SystemFlow/REQ_Traceability_Matrix.md:

Change Log:

| Date | Source | Module | Action | File | Description | Status |
| YYYY-MM-DD | PM Decision | Design System | Created | Wireframe/DESIGN.md | Apply {Brand} design system | Active |

Decision Log:

| Date | Decision ID | Topic | Options Presented | User Choice | Rationale | Impact |
| YYYY-MM-DD | D{NNN} | Design System Selection | {options shown} | {brand chosen} | {why} | Wireframe + Dev Handoff |

Activity Log:

| Timestamp | Session | Action | Target File | Detail | Result |
| YYYY-MM-DD | S{NNN} | Created | Wireframe/DESIGN.md | Applied {Brand} design system | Done |

---

Available Design Systems (58 brands)

ดูรายการเต็มที่ references/brand-catalog.md

Quick Reference by Category

Category	Brands
AI & ML	Claude, Cohere, ElevenLabs, Minimax, Mistral AI, Ollama, OpenCode AI, Replicate, RunwayML, Together AI, VoltAgent, xAI
Developer Tools	Cursor, Expo, Linear, Lovable, Mintlify, PostHog, Raycast, Resend, Sentry, Supabase, Superhuman, Vercel, Warp, Zapier
Infrastructure	ClickHouse, Composio, HashiCorp, MongoDB, Sanity, Stripe
Design & Productivity	Airtable, Cal.com, Clay, Figma, Framer, Intercom, Miro, Notion, Pinterest, Webflow
Fintech & Crypto	Coinbase, Kraken, Revolut, Wise
Enterprise & Consumer	Airbnb, Apple, IBM, NVIDIA, SpaceX, Spotify, Uber
Automotive & Luxury	BMW, Ferrari, Lamborghini, Renault, Tesla

---

DESIGN.md 9-Section Format

ทุก DESIGN.md ต้องมีครบ 9 sections (ดูรายละเอียดที่ references/design-md-format.md):

#	Section	What it captures
1	Visual Theme & Atmosphere	Mood, density, design philosophy
2	Color Palette & Roles	Semantic name + hex + functional role
3	Typography Rules	Font families, full hierarchy table
4	Component Stylings	Buttons, cards, inputs, navigation with states
5	Layout Principles	Spacing scale, grid, whitespace philosophy
6	Depth & Elevation	Shadow system, surface hierarchy
7	Do's and Don'ts	Design guardrails and anti-patterns
8	Responsive Behavior	Breakpoints, touch targets, collapsing strategy
9	Agent Prompt Guide	Quick color reference, ready-to-use prompts

---

ข้อห้าม

• ห้าม apply DESIGN.md โดยไม่ผ่าน confirm จากผู้ใช้ — ต้องแสดง summary + รอ approve ก่อน
• ห้ามแก้ไข DESIGN.md ใน design-md/ library โดยตรง — library เป็น read-only reference, customize ที่ project folder เท่านั้น
• ห้ามสร้าง DESIGN.md ที่ไม่ครบ 9 sections — ถ้า custom ต้องมีครบทุก section
• ห้ามเลือก design system โดยไม่ดู context ของ project — Fintech ไม่ควรใช้ style ของ gaming site
• ห้ามแก้ DESIGN.md ใน project โดยไม่ log — ทุก change ต้องลง Traceability Matrix