Design Commands

15+ slash commands chính cho việc tạo, phân tích, review và optimize design.

Cập nhật: Old /design:* commands (/design:good, /design:fast, /design:3d, /design:screenshot, /design:video, /design:describe) đã bỏ.Thay bằng lệnh mới dưới đây.

Bảng tham chiếu

Lệnh	Mô tả	Output
`/stitch "mô tả"`	AI design generation (Google Stitch)	HTML/CSS/Tailwind
`/design-shotgun "mô tả"`	Multiple design variants song song	HTML/CSS variations
`/design-html <mockup>`	Finalize → production HTML/CSS	HTML/CSS/JS
`/design-consultation`	Tạo DESIGN.md (design system source of truth)	DESIGN.md
`/design-review`	Visual QA + auto-fix	Screenshots + fixes
`/design-md <json>`	Analyze Stitch → synthesize DESIGN.md	DESIGN.md
`/huashu-design:*`	HTML hi-fi design (prototype, animation, deck, variants…)	HTML/CSS/animations
`/frontend-design "mô tả"`	Distinctive frontend, anti-AI-slop	Production HTML/CSS

Chi tiết từng lệnh

/stitch — AI design generation

Prefix: /stitch, /stitch-design, /stitch-loopGoogle Stitch AI design generation. Thay /design:good cũ.

/stitch "checkout screen mobile"
/stitch "landing page cho SaaS product"
/stitch --from-screenshot ./ref.png
/stitch-design                    # Config Stitch project
/stitch-loop                      # Baton-passing loop pattern

Khi nào dùng:

Tạo design mới từ mô tả text
Design chất lượng cao, research-backed
Thay thế /design:good cũ

/design-shotgun — Multiple design variants

Prefix: /design-shotgunSinh nhiều AI design variants song song, mở comparison board, thu thập structured feedback.

/design-shotgun "checkout screen"
/design-shotgun "hero section — 3 styles khác nhau"

Khi nào dùng:

Cần compare design variants
Design decision cần exploration
A/B testing mockups

/design-html — Production HTML/CSS

Prefix: /design-htmlFinalize design → production-quality HTML/CSS. Text reflows, heights computed, dynamic layouts.

/design-html <mockup.png|figma-link>
/design-html ./screenshot.png

Khi nào dùng:

Convert mockup/screenshot → production code
Finalize responsive HTML/CSS
Ensure text reflow + dynamic heights

/design-consultation — Create DESIGN.md

Prefix: /design-consultationTạo DESIGN.md cho project mới: aesthetic, typography, color, layout, spacing, motion.

/design-consultation              # Guided setup
/design-consultation "SaaS product"  # With context

Output: DESIGN.md (design system source of truth)Khi nào dùng:

Project mới cần design system
Cần document design decisions
Establish aesthetic + typography

/design-md — Analyze & synthesize DESIGN.md

Prefix: /design-mdAnalyze Stitch design output → synthesize comprehensive DESIGN.md.

/design-md stitch-output.json
/design-md ./designs/checkout-screens.json

Output: DESIGN.md với patterns, tokens, components từ Stitch analysisKhi nào dùng:

After /stitch generation, need to extract design system
Convert ad-hoc designs → documented system

/design-review — Visual QA + auto-fix

Prefix: /design-reviewIterative visual QA. Screenshot before/after, fix commits atomic.

/design-review                    # Sau khi implement UI
/design-review --auto-fix         # Tự động fix common issues

Khi nào dùng:

After implement UI components
Visual QA trước release
Auto-fix layout/color issues

So sánh design commands

Tiêu chí	`/stitch`	`/design-shotgun`	`/design-html`	`/design-consultation`
Input	Text mô tả	Text mô tả	Screenshot/Figma	Guided setup
Output	HTML/CSS	Multiple variants	Production HTML/CSS	DESIGN.md
Thời gian	3-10 phút	5-15 phút	2-5 phút	5-10 phút
Chất lượng	Cao	Comparative	Production-ready	System docs
Use case	New design	Design exploration	Convert mockup	System foundation

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

Dùng	Không dùng
Tạo design mới từ text → `/stitch`	Khi cần file Figma (dùng Figma skills)
Multiple design variants → `/design-shotgun`	Khi cần edit design `.pen` (dùng Pencil MCP)
Convert mockup → HTML/CSS → `/design-html`	Khi cần 3D interactive (dùng `/huashu-design:*`)
Tạo design system → `/design-consultation`	Khi cần test accessibility (dùng `/qa-full a11y`)
Visual QA → `/design-review`	Khi cần component library (dùng `/shadcn-ui`)

Bắt đầu

Quan trọng

AgentKit (AK) — Migration mới

Tham khảo

Dev — Bắt đầu

Dev — Lệnh chính

Dev — Phân tích & Nghiên cứu

Dev — Công cụ hỗ trợ

Dev — Skills nổi bật

QA — Bắt đầu

QA — Use Cases

PM — Bắt đầu

PM — Lập kế hoạch

PM — Vận hành

PM — Kỹ thuật

PM — Skills nổi bật

DevOps — Bắt đầu

DevOps — Triển khai

DevOps — Bảo mật & Chất lượng

DevOps — Giám sát

DevOps — Skills nổi bật

Design — Bắt đầu

Design — Công cụ

Design — Quy trình

Design — Skills nổi bật

Marketing — Bắt đầu

Marketing — Nội dung

Marketing — Phân phối

Marketing — Quản lý

Design Commands

Design Commands

Bảng tham chiếu

Chi tiết từng lệnh

So sánh design commands

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

​Design Commands

​Bảng tham chiếu

​Chi tiết từng lệnh

​So sánh design commands

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

Design Commands

Bảng tham chiếu

Chi tiết từng lệnh

So sánh design commands

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