# Ck:stitch

> AI design generation with Google Stitch. Generate UI designs from text prompts, export Tailwind/HTML/DESIGN.md, orchestrate design-to-code pipeline. Use for rapid prototyping, UI generation, design exploration.

- Skill: `phuc-nt/ck-stitch` (Agent Skill, multi-file: 10 files)
- Install (CLI): `npx skillmds@latest add phuc-nt/ck-stitch`
- Raw SKILL.md: https://api.skillmd.com/api/skills/phuc-nt/ck-stitch/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: phuc-nt (https://skillmd.com/u/phuc-nt)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/phuc-nt/ck-stitch

---


# 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

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

Add to `.env` or `.opencode/.env`.

### Optional

```bash
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 `.opencode/.mcp.json` for native design context in Claude Code:

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

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

### Install SDK

```bash
cd .opencode/skills/stitch/scripts && npm install
```

## Quick Start

```bash
# 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.

```bash
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.

```bash
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.

```bash
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.

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

## Orchestration Pipeline

### Design-to-Code Flow

1. **Check quota** — Run `stitch-quota.ts check`. If exhausted, suggest `ck:ui-ux-pro-max` fallback.
2. **Generate** — Run `stitch-generate.ts` with user's design prompt
3. **Review** — Show generated design image to user for feedback
4. **Variants** (optional) — Generate alternatives if user wants exploration
5. **Export** — Run `stitch-export.ts --format all` to get HTML + DESIGN.md
6. **Implement** — Hand off exported artifacts to implementation skill:
   - `ck:frontend-design` — React/Vue/Svelte components from Tailwind export
   - `ck:ui-ux-pro-max` — Full page layouts with style guide integration
   - `ck:ui-styling` — Design token extraction from DESIGN.md
7. **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 `ck: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` |