Stitch

Generate UI designs from natural language prompts using Google Stitch AI, then export to Tailwind CSS, HTML, or a DESIGN.md spec for your project.

What This Skill Does

Stitch bridges the gap between design intent and implementation. Describe a screen or component in plain language, and Stitch generates visual designs that can be handed off to frontend skills for code implementation.

When to Use

  • Need a UI mockup before writing frontend code
  • Designer and engineer collaboration (generate → review → implement)
  • Rapid prototyping of new screens or components
  • Converting rough sketches into design specs

Core Capabilities

  • Text-to-UI design generation via Google Stitch API
  • Export to Tailwind CSS components, raw HTML, or DESIGN.md
  • Design-to-code pipeline: Stitch → frontend-design or ui-ux-pro-max
  • Free tier: 200 credits/day (standard), 50/day (experimental models)

Requirements

# Required environment variable
export STITCH_API_KEY="your-api-key"

Get your API key at stitch.withgoogle.com.

Arguments

ArgumentDescription
"prompt"Natural language description of the UI to generate
--export tailwind|html|design-mdOutput format (default: design-md)

Example Usage

/ck:stitch "SaaS dashboard with dark sidebar, metrics cards, and data table"
/ck:stitch "Mobile onboarding flow with 3 steps" --export tailwind
/ck:stitch "Payment checkout form" --export html

Design-to-Code Pipeline

/ck:stitch "describe UI" --export design-md
    → DESIGN.md created
    → /ck:frontend-design reads DESIGN.md
    → Tailwind components generated
    → /ck:test validates output