t1k:web:ui:stitch

Field	Value
Module	`ui`
Version	`1.7.0`
Effort	`medium`
Tools	—

Keywords: AI design, Google Stitch, prototype, stitch, Tailwind, UI generation

How to invoke

/t1k:web:ui:stitch
[design prompt or action]

Google Stitch — AI Design Generation

Generate high-fidelity UI designs from text prompts via Google Stitch. Export Tailwind/HTML, orchestrate design-to-code pipelines with existing UI skills.

Free tier: 200 credits/day (standard), 50/day (experimental). Resets at midnight UTC.

Setup

Required

# Get API key at https://stitch.withgoogle.com → Settings → API Keys
export STITCH_API_KEY="sk_..."

Add to .env or $HOME/.claude/.env.

Optional

export STITCH_PROJECT_ID="my-project"    # Default project (auto-creates if unset)
export STITCH_QUOTA_LIMIT="200"          # Override daily limit

MCP Server (recommended)

Add to $HOME/.claude/.mcp.json for native design context in Claude Code.

Official MCP (preferred — Google-shipped):

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "@google/stitch-sdk", "mcp"],
      "env": { "X-Goog-Api-Key": "${STITCH_API_KEY}" }
    }
  }
}

Base URL: https://stitch.googleapis.com/mcp. Also available as a Gemini CLI extension — run gemini extension install stitch (requires Gemini CLI).

Community proxy (legacy fallback):

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["@_davideast/stitch-mcp", "proxy"],
      "env": { "STITCH_API_KEY": "${STITCH_API_KEY}" }
    }
  }
}

The community proxy (@_davideast/stitch-mcp) predates the official SDK. Prefer the official option above; use the proxy only if the official MCP is unavailable.

See references/stitch-mcp-setup.md for alternative options (gcloud, auto-installer).

Install SDK

cd $HOME/.claude/skills/stitch/scripts && npm install

Quick Start

# Check quota
npx tsx scripts/stitch-quota.ts check

# Generate design
npx tsx scripts/stitch-generate.ts "A checkout page with payment form and cart summary"

# Export as HTML + DESIGN.md
npx tsx scripts/stitch-export.ts <screen-id> --format all --output ./stitch-exports/

Actions

generate

Generate UI design from text prompt.

npx tsx scripts/stitch-generate.ts "<prompt>" [--project <id>] [--device mobile|desktop|tablet] [--variants <count>]

Returns: screen ID, preview image URL. With --variants: additional design alternatives.

export

Export generated design as HTML/Tailwind, screenshot, or DESIGN.md.

npx tsx scripts/stitch-export.ts <screen-id> [--format html|image|all] [--output <dir>]

Outputs:

design.html — Semantic HTML with Tailwind CSS classes
design.png — Screenshot of the design
DESIGN.md — Agent-readable design spec (colors, typography, spacing, components)

quota

Check and manage daily quota.

npx tsx scripts/stitch-quota.ts check       # Show remaining credits
npx tsx scripts/stitch-quota.ts increment   # Bump after generation
npx tsx scripts/stitch-quota.ts reset       # Force reset (auto-resets daily)

edit

Refine an existing design.

const editedScreen = await screen.edit("Make the header darker and add a search bar");

Orchestration Pipeline

Design-to-Code Flow

Check quota — Run stitch-quota.ts check. If exhausted, suggest ui-ux-pro-max fallback.
Generate — Run stitch-generate.ts with user’s design prompt
Review — Show generated design image to user for feedback
Variants (optional) — Generate alternatives if user wants exploration
Export — Run stitch-export.ts --format all to get HTML + DESIGN.md
Implement — Hand off exported artifacts to implementation skill:
- frontend-design — React/Vue/Svelte components from Tailwind export
- ui-ux-pro-max — Full page layouts with style guide integration
- ui-styling — Design token extraction from DESIGN.md
Track quota — Run stitch-quota.ts increment

Handoff Protocol

Export creates DESIGN.md in project root or plan directory
Implementation skills detect DESIGN.md and use it as design spec
DESIGN.md takes precedence over text descriptions when present
If no DESIGN.md exists, skills fall back to normal text-based design flow

See references/design-to-code-pipeline.md for detailed patterns and examples.

Quota Management

200 credits/day (standard mode), resets at midnight UTC
Local tracking via ~/.claudekit/.stitch-quota.json
Warns when remaining credits < 20%
Fallback: When exhausted, use ui-ux-pro-max for text-based design generation

See references/quota-management.md for strategies.

Limitations

No React export — HTML/Tailwind only; Claude converts to React/Vue components
Non-responsive layouts — Must add breakpoints manually during implementation
No animations — Static designs only; add micro-interactions in code
Single-user — No multiplayer/collaboration features
Hard daily quota — No paid tier to increase limits
Generic output risk — Combine with style guides for differentiation

References

Topic	File
SDK API	`references/stitch-sdk-api.md`
MCP Setup	`references/stitch-mcp-setup.md`
Pipeline Patterns	`references/design-to-code-pipeline.md`
Quota Strategy	`references/quota-management.md`

Gotchas

STITCH_API_KEY in MCP env IS a secret leak vector — rotate quarterly, never log, prefer per-instance closure to env-var.
Stitch’s transform DSL caches per-content-hash — invalidate on tooling upgrade or stale outputs ship.
Pipeline failures don’t always non-zero exit — wrap stitch run in set -e AND check exit code explicitly.