​
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, 7 slash commands, 6 Figma skills, và 3 MCP tools cho prototyping.
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ả?
│   ├─ Design chất lượng cao → /design:good "mô tả"
│   ├─ Design nhanh → /design:fast "mô tả"
│   └─ Design 3D interactive → /design:3d "mô tả"
│
├─ Tạo design từ hình ảnh/video?
│   ├─ Từ screenshot → /design:screenshot (đính kèm ảnh)
│   ├─ Từ video → /design:video (đính kèm video)
│   └─ Mô tả design → /design:describe (đính kèm ảnh/video)
│
├─ Làm việc với Figma?
│   ├─ Figma → Code → figma:figma-implement-design
│   ├─ Code → Figma → figma:figma-generate-design
│   └─ Build design system → figma:figma-generate-library
│
├─ Styling & Design System?
│   ├─ shadcn/ui + Tailwind → ui-styling skill
│   └─ Design tokens → design-system skill
│
├─ Prototyping nhanh?
│   ├─ AI screen generation → Stitch MCP
│   ├─ Design editor → Pencil MCP
│   └─ MVP nhanh → rapid-prototyper agent
│
├─ Fix UI bị lỗi?
│   └─ /fix:ui "mô tả vấn đề"
│
└─ Review design?
    ├─ Web guidelines → web-design-guidelines skill
    ├─ Accessibility → /qa-full a11y URL
    └─ Lighthouse audit → Chrome DevTools MCP

​
Bảng tham chiếu nhanh

LệnhMô tảTrang
/design:good "mô tả"Tạo design chất lượng cao (research + implement)Chi tiết
/design:fast "mô tả"Tạo design nhanhChi tiết
/design:3d "mô tả"Design 3D interactive với Three.jsChi tiết
/design:screenshotTạo design từ screenshotChi tiết
/design:videoTạo design từ videoChi tiết
/design:describeMô tả design từ ảnh/videoChi tiết
/fix:ui "vấn đề"Fix UI/CSS issuesChi tiết
Figma skillsFigma ↔ Code integrationChi tiết
Stitch / Pencil MCPAI prototyping toolsChi tiết

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

Design Commands

/design:good, /design:fast, /design:3d, /fix:ui — Tạo và fix 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

1

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

/design:describe screenshot.png       # Phân tích design reference
/design:good "mô tả trang cần thiết kế"  # Tạo design mới
Designer nhận requirements từ PM (PRD) hoặc Dev (UI spec).
2

Thiết kế — Prototyping

/design:good "landing page cho SaaS product"
/design:3d "interactive product showcase"
Hoặc dùng Stitch/Pencil MCP để prototyping nhanh.
3

Design System — Styling

# Tạo/cập nhật design tokens
# Dùng ui-styling skill cho shadcn/ui + Tailwind
# Dùng design-system skill cho token architecture
4

Figma Sync

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

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

Review — QA

# Review theo web guidelines
# Check accessibility
/qa-full a11y https://staging.site.com

# Lighthouse audit qua Chrome DevTools

​
11 Agents UI/UX

AgentVai tròKhi nào dùng
ui-designerVisual design, component libraries, pixel-perfectThiết kế UI mới
ux-architectCSS systems, layout frameworks, UX structureKiến trúc UX
ux-researcherUsability testing, user behavior analysisNghiên cứu UX
brand-guardianBrand identity, consistency, positioningĐảm bảo brand
frontend-developerReact/Vue, responsive, accessible web appsCode frontend
rapid-prototyperUltra-fast MVP, proof-of-conceptPrototype nhanh
accessibility-auditorWCAG compliance, assistive tech testingKiểm tra a11y
image-prompt-engineerAI image generation promptsTạo ảnh AI
inclusive-visuals-specialistCulturally accurate, anti-bias visualsẢnh inclusive
visual-storytellerVisual narratives, multimediaKể chuyện bằng hình
whimsy-injectorPlayful elements, micro-interactionsThêm personality

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

Phối hợp vớiCông cụ DesignCông cụ team kia
PMNhận PRD, UI spec/prd → design requirements
DevFigma → Code, design tokens/cook → implement UI
QADesign review, a11y/qa-full:accept --design
MarketingBrand assets, banners/ckm:brand:update
  • /design:* commands 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 MCP cho prototyping nhanh