​
Design Commands

7 slash commands chính cho việc tạo, phân tích và fix design.

​
Bảng tham chiếu

LệnhMô tảOutput
/design:good "mô tả"Design chất lượng cao (research + UI/UX intelligence + implement)HTML/CSS/JS
/design:fast "mô tả"Design nhanh, ít trau chuốt hơnHTML/CSS/JS
/design:3d "mô tả"Design 3D interactive với Three.jsHTML + Three.js
/design:screenshotReplicate design từ screenshotHTML/CSS/JS
/design:videoTạo design từ video referenceHTML/CSS/JS
/design:describeMô tả chi tiết design từ ảnh/videoText analysis
/fix:ui "vấn đề"Fix UI/CSS issuesCode fix

​
Chi tiết từng lệnh

Design chất lượng cao nhất. Chạy workflow đầy đủ:
  1. Research — Tìm design intelligence (styles, colors, typography)
  2. Analyze — Phân tích yêu cầu, chọn style phù hợp
  3. Implement — Tạo HTML/CSS/JS với real assets
  4. Review — Kiểm tra visual quality
/design:good "landing page cho AI SaaS product, minimalist style"
/design:good "dashboard analytics với dark mode"
/design:good "mobile app onboarding flow"
Khi nào dùng: Design quan trọng, cần chất lượng cao, có thời gian.

​
So sánh commands

Tiêu chí/design:good/design:fast/design:3d
ResearchCó (sâu)KhôngCó
Thời gian5-15 phút1-3 phút5-10 phút
Chất lượngCao nhấtTrung bìnhCao (3D)
AI imagesCó (Gemini/Nano Banana)KhôngKhông
Use caseProduction designQuick prototypeInteractive experience

​
Screenshot & Video Analysis

Đính kèm screenshot, Claude phân tích và replicate design.
/design:screenshot
# Paste hoặc drag screenshot vào terminal
Workflow: Analyze layout → Extract colors/fonts → Replicate in HTML/CSS

​
Khi nào dùng / không dùng

DùngKhông dùng
Tạo UI mới từ mô tảKhi cần file Figma (dùng Figma skills)
Quick prototypeKhi cần design system tokens (dùng design-system)
Fix UI bugsKhi cần test accessibility (dùng /qa-full a11y)
Replicate từ screenshotKhi cần edit design file .pen (dùng Pencil MCP)