design-system-design.mdlisted

# 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 (ถ้าผู้ใช้ย