UI/UX Design — Công cụ thiết kế

Claude Code cung cấp bộ công cụ UI/UX toàn diện: 11 agents chuyên biệt, 15+ slash commands, 6 Figma skills, và 3 MCP tools cho prototyping.

Cập nhật: Old /design:* commands (/design:good, /design:fast, /design:3d, /design:screenshot, /design:video, /design:describe) đã bỏ.Thay bằng: /stitch, /design-shotgun, /design-html, /design-consultation, /design-review, /design-md, /huashu-design, /frontend-design.

Tất cả lệnh chỉ chạy trên Claude Code CLI. Chạy claude trong thư mục project.

Dùng lệnh nào?

Bạn muốn làm gì?
│
├─ Tạo design mới từ mô tả?
│   ├─ AI design cao cấp (Stitch) → /stitch "mô tả"
│   ├─ Multiple variants song song → /design-shotgun "mô tả"
│   ├─ HTML/CSS production-ready → /design-html <mockup|figma-link>
│   └─ Design consultation (tạo DESIGN.md) → /design-consultation
│
├─ Design HTML hi-fi (Huashu)?
│   ├─ Prototype 5 screens → /huashu-design:prototype "iOS app"
│   ├─ Animation timeline 60fps → /huashu-design:animation "hero"
│   ├─ Slide deck 10 slides → /huashu-design:deck "pitch deck"
│   └─ Choose design direction → /huashu-design:advisor
│
├─ Làm việc với Figma?
│   ├─ Figma → Code → /figma:figma-implement-design
│   ├─ Code → Figma → /figma:figma-generate-design
│   └─ Code Connect mapping → /figma:figma-code-connect
│
├─ Styling & Design System?
│   ├─ shadcn/ui + Tailwind → /shadcn-ui
│   ├─ Design tokens → /design-consultation
│   └─ Design system analyze → /design-md
│
├─ Prototyping nhanh?
│   ├─ AI screen generation → Stitch MCP
│   ├─ Design editor → Pencil MCP
│   └─ Frontend distinctive → /frontend-design
│
├─ Review & QA?
│   ├─ Visual QA + auto-fix → /design-review
│   ├─ Web guidelines → web-design-guidelines skill
│   └─ Accessibility → /qa-full a11y URL
│
└─ Architecture diagrams?
    ├─ SVG/PNG diagrams (8 styles) → /tech-graph
    ├─ Hand-drawn → /excalidraw
    └─ Mermaid inline diagrams → /mermaidjs-v11

Bảng tham chiếu nhanh

Lệnh	Mô tả	Trang
`/stitch "mô tả"`	AI design generation (Google Stitch)	Chi tiết
`/design-shotgun "mô tả"`	Multiple variants song song	Chi tiết
`/design-html <mockup>`	Finalize → production HTML/CSS	Chi tiết
`/design-consultation`	Tạo DESIGN.md (design system source of truth)	Chi tiết
`/design-review`	Visual QA + auto-fix	Chi tiết
`/huashu-design:prototype`	HTML hi-fi prototype	Chi tiết
`/frontend-design "landing page"`	Distinctive frontend, anti-AI-slop	Chi tiết
Figma skills	Figma ↔ Code integration	Chi tiết
Stitch / Pencil MCP	AI prototyping tools	Chi tiết

Các nhóm công cụ

Design Commands

/stitch, /design-shotgun, /design-html, /design-consultation, /design-review — Tạo, so sánh và review design.

Figma Integration

6 skills: Figma → Code, Code → Figma, design system, component mapping.

UI Styling

shadcn/ui, Tailwind CSS, design tokens, 50+ styles database.

Prototyping

Stitch MCP, Pencil MCP, rapid prototyping, Three.js 3D.

Design Review

Web guidelines, accessibility audit, Lighthouse, WCAG 2.1 AA.

11 Agents

ui-designer, ux-architect, brand-guardian, accessibility-auditor…

Workflow thiết kế trong sprint

Nhận yêu cầu — Phân tích

/design-consultation              # Analyze requirements
/design-md stitch-output.json     # Synthesize DESIGN.md from analysis

Designer nhận requirements từ PM (PRD) hoặc Dev (UI spec).

Thiết kế — Prototyping

/stitch "landing page cho SaaS product"
/design-shotgun "checkout screen — 3 variants"
/huashu-design:prototype "iOS app 5 screens"

Hoặc dùng Stitch/Pencil MCP/Huashu để prototyping nhanh.

Design System — Styling

# Tạo/cập nhật design tokens từ DESIGN.md
/shadcn-ui                        # shadcn/ui + Tailwind setup
# Dùng design tokens cho component consistency

Figma Sync

# Push design lên Figma
/figma:figma-generate-design

# Hoặc implement từ Figma
/figma:figma-implement-design

Review — QA

# Visual QA + auto-fix
/design-review

# Check accessibility
/qa-full a11y https://staging.site.com

11 Agents UI/UX

Agent	Vai trò	Khi nào dùng
`ui-designer`	Visual design, component libraries, pixel-perfect	Thiết kế UI mới
`ux-architect`	CSS systems, layout frameworks, UX structure	Kiến trúc UX
`ux-researcher`	Usability testing, user behavior analysis	Nghiên cứu UX
`brand-guardian`	Brand identity, consistency, positioning	Đảm bảo brand
`frontend-developer`	React/Vue, responsive, accessible web apps	Code frontend
`rapid-prototyper`	Ultra-fast MVP, proof-of-concept	Prototype nhanh
`accessibility-auditor`	WCAG compliance, assistive tech testing	Kiểm tra a11y
`image-prompt-engineer`	AI image generation prompts	Tạo ảnh AI
`inclusive-visuals-specialist`	Culturally accurate, anti-bias visuals	Ảnh inclusive
`visual-storyteller`	Visual narratives, multimedia	Kể chuyện bằng hình
`whimsy-injector`	Playful elements, micro-interactions	Thêm personality

Phối hợp với các team

Phối hợp với	Công cụ Design	Công cụ team kia
PM	Nhận PRD, UI spec	`/prd` → design requirements
Dev	Figma → Code, design tokens	`/cook` → implement UI
QA	Design review, a11y	`/qa-full:accept --design`
Marketing	Brand assets, banners	`/ckm:brand:update`

/stitch, /design-shotgun, /design-html tạo output dạng HTML/CSS/JS (không phải Figma file)
Dùng Figma skills nếu cần làm việc trực tiếp trong Figma
Dùng Stitch/Pencil/Huashu MCP cho prototyping nhanh
/design-consultation generates DESIGN.md — design system source of truth

​UI/UX Design — Công cụ thiết kế

​Dùng lệnh nào?

​Bảng tham chiếu nhanh

​Các nhóm công cụ

Design Commands

Figma Integration

UI Styling

Prototyping

Design Review

11 Agents

​Workflow thiết kế trong sprint

​11 Agents UI/UX

​Phối hợp với các team

UI/UX Design — Công cụ thiết kế

Dùng lệnh nào?

Bảng tham chiếu nhanh

Các nhóm công cụ

Workflow thiết kế trong sprint

11 Agents UI/UX

Phối hợp với các team