/stitch — AI Design Generation
Skill mới trong bộ claudekit — AI-powered design generation (Google Stitch). Generate UI từ text prompts → Tailwind CSS + HTML + DESIGN.md spec. Perfect rapid prototyping, mobile-first, design exploration.
Tổng quan
/stitch generate design nhanh từ prompt. Input: “dark checkout form” → Output: Tailwind HTML + design spec. Không cần manual design tool, just prompt + iterate.
Khi dùng: Design exploration, mobile wireframes, color variants, multi-screen flows, rapid iteration.
Prefix & flags
Workflow
1
Optional: Setup design tokens (first time)
2
Enhance vague prompt (optional)
3
Generate design
4
Iterate if needed
5
Finalize for code
Ví dụ
Simple component
Multi-screen checkout
Dark mode
Compare 5 variants
So sánh skill khác
Common pitfalls
- Vague prompts: “Make a form” = boring. Be specific: “dark checkout, progress indicator, mobile-first, minimal spacing”.
- No DESIGN.md before: Inconsistent across screens. Run
/design-consultationtrước, hoặc setup tokens với/stitch-design. - Skip
/design-html: Stitch output là rough draft. Always finalize. - Too many variants: > 5 = comparison paralysis. Generate 3, iterate on best.
- No code integration: Stitch HTML still needs dev work. Dùng
/design-html→ integrate.
FAQ
Requires API key?
Requires API key?
Google Stitch API. First setup:
/stitch-design --setup → Google Cloud credentials.Output formats?
Output formats?
design-{name}.html (HTML + Tailwind), design-{name}-DESIGN.md (spec), browser preview.Iterate on design?
Iterate on design?
Yes: refine prompt + regenerate, or edit HTML directly (minor tweaks).
/stitch vs /design-shotgun?
/stitch vs /design-shotgun?
/stitch: 1 prompt → 1-5 focused designs. /design-shotgun: 1 prompt → 10+ wildly different. Use shotgun for broad exploration, stitch for refinement.Accessibility built-in?
Accessibility built-in?
Semantic HTML, alt text placeholders. Always run
/design-html after → full a11y check.