Help us improve
Share bugs, ideas, or general feedback.
From stitch-design
Generate UI designs with Google Stitch AI. Use when user asks to create UI, design a page, prototype an interface, generate a screen, make a mockup, or mentions stitch or design prototyping. Conversational brainstorm-first workflow.
npx claudepluginhub kyzdes/claude-stitch-design --plugin stitch-designHow this skill is triggered — by the user, by Claude, or both
Slash command
/stitch-design:stitch-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill orchestrates Google Stitch AI to generate UI designs through a conversational workflow. Instead of sending raw prompts to Stitch, it guides the user through brainstorming, parameter selection, and iterative refinement — then composes optimal prompts and manages all artifacts locally.
Creates p5.js generative art with seeded randomness, noise fields, and interactive parameter exploration. Use for algorithmic art, flow fields, or particle systems.
Share bugs, ideas, or general feedback.
This skill orchestrates Google Stitch AI to generate UI designs through a conversational workflow. Instead of sending raw prompts to Stitch, it guides the user through brainstorming, parameter selection, and iterative refinement — then composes optimal prompts and manages all artifacts locally.
Output: Self-contained HTML files (inline Tailwind CSS, Google Fonts, Material Symbols) that open directly in a browser, plus PNG screenshots.
Follow these steps in order. Do not skip steps.
API Key check (MANDATORY, always do this first):
STITCH_API_KEY environment variable is set (run echo $STITCH_API_KEY via Bash)node ${CLAUDE_PLUGIN_ROOT}/scripts/setup-key.mjs "<key>"
b. Set for current session: export STITCH_API_KEY="<key>"
c. Source profile to apply: source ~/.zshrcWorkspace init:
mkdir -p ./stitch-design/references
Project management (critical — prevents duplicate projects):
./stitch-design/context-map.md — if it exists, extract the active project IDlist_projects (fast read-only call)
RULE: Never create a new project when retrying or re-generating. Always reuse the project ID from context-map.md.
Read ./stitch-design/usage.json if it exists — check today's credit usage.
Determine the user's intent from their input:
If the user gave a vague description (e.g., "make me a cool app", "I need a dashboard"):
./stitch-design/design-requirements.mdIf the user gave a specific description (e.g., "dark analytics dashboard with sales charts"):
If the user said "no brainstorm" or similar:
References — the user may provide:
./stitch-design/references/, use in Step 4 via upload_screens_from_imagesNote all references in ./stitch-design/design-requirements.md.
Ask the user using AskUserQuestion for the following parameters. Provide sensible defaults and explain options briefly.
Required:
Optional (suggest defaults):
If the user provides all this information upfront, skip asking and confirm the parameters.
Compile all context into an optimized prompt for Stitch:
Prompt composition guidelines:
Show the composed prompt to the user for approval. Let them adjust before sending.
Save the prompt to ./stitch-design/prompts.md with a timestamp:
## [DATE] - [Screen Name]
**Parameters**: device=DESKTOP, variants=3, range=EXPLORE
**Prompt**:
> [the actual prompt sent to Stitch]
./stitch-design/usage.jsoncreate_project(title: "[descriptive project name]")
IMMEDIATELY write the project ID to ./stitch-design/context-map.md BEFORE generating anything. This prevents duplicate projects on retry.Tell the user: "Generating design (~1 min)..."
For text-based generation:
generate_screen_from_text(projectId: "...", prompt: "...", deviceType: "DESKTOP", modelId: "GEMINI_3_PRO")
For reference image:
upload_screens_from_images(projectId: "...", images: [...])
Then optionally: edit_screens(projectId: "...", screenIds: ["..."], prompt: "...")
For variants (after initial screen exists):
generate_variants(projectId: "...", screenIds: ["..."], prompt: "...", variantCount: 3, creativeRange: "EXPLORE", aspects: ["COLOR_SCHEME", "LAYOUT"])
If the call succeeds → proceed to 4.4 Download.
If ECONNRESET / timeout / fetch failed:
sleep 90 via Bash)list_screens(projectId) — check for new screenslist_screens againUse human-readable paths derived from project title and screen context:
./stitch-output/{project-slug}/{screen-slug}/index.html
./stitch-output/{project-slug}/{screen-slug}/preview.png
Slug rules:
mentoring-bookingcalendar-view{screen-slug}-edit-1/, -edit-2/, etc.{screen-slug}-variant-1/, -variant-2/, etc.Download each artifact:
node ${CLAUDE_PLUGIN_ROOT}/scripts/download.mjs "<html-url>" "./stitch-output/{project-slug}/{screen-slug}/index.html"
node ${CLAUDE_PLUGIN_ROOT}/scripts/download.mjs "<image-url>" "./stitch-output/{project-slug}/{screen-slug}/preview.png"
Open in browser:
open ./stitch-output/{project-slug}/{screen-slug}/index.html
Inline preview: Read the downloaded PNG file using the Read tool — it displays the image inline in the chat. The user sees the result without switching to a browser.
Update context-map.md (upsert — do not duplicate entries):
## Project: [name]
- Project ID: `...`
- Created: [date]
### Screens
| Screen ID | Type | Description | Files | Parent |
|-----------|------|-------------|-------|--------|
| abc123 | generated | analytics dashboard | stitch-output/.../index.html | — |
| def456 | variant-1 | color variation | stitch-output/.../index.html | abc123 |
Update prompts.md — append the sent prompt with timestamp and parameters.
Update usage.json — increment the counter for today:
{ "daily": { "YYYY-MM-DD": { "generations": N, "edits": N, "variants": N, "total": N } }, "limits": { "daily_bonuses": 400, "daily_redesign": 15 } }
Show structured result to user:
After showing results, offer next actions:
edit_screens (creates new screen, original preserved)generate_variantscreate_design_system + apply_design_systemEach iteration follows the same fire-and-poll protocol (4.3) and mandatory post-generation steps (4.5).
Every operation in this skill must be safe to repeat:
create_project when active project exists → skip, return existing IDdownload when file exists → overwrite silently (no error)context-map.md writes → upsert by screen ID, never create duplicate entriesusage.json writes → increment, not overwrite| Tool | Use For |
|---|---|
create_project | Start a new design project |
list_projects | Find existing projects / health-check |
generate_screen_from_text | Generate screen from text prompt |
generate_variants | Create N variations of existing screen |
edit_screens | Modify existing screen (creates new, preserves original) |
upload_screens_from_images | Upload wireframe/screenshot as starting point |
get_screen | Get screen data (HTML/image URLs) |
list_screens | List screens in project / poll for completed generation |
DeviceType: MOBILE | DESKTOP | TABLET | AGNOSTIC
ModelId: GEMINI_3_PRO (quality, default) | GEMINI_3_FLASH (speed)
CreativeRange: REFINE (subtle) | EXPLORE (moderate) | REIMAGINE (radical)
VariantAspect: LAYOUT | COLOR_SCHEME | IMAGES | TEXT_FONT | TEXT_CONTENT
ECONNRESET / timeout / fetch failed during generation: → Use fire-and-poll protocol (Step 4.3). The generation usually completes server-side despite the connection reset.
All MCP calls failing (including fast ones like list_projects):
Max retries: 2 for any generation/edit/variant operation. After 2 failures → stop and report.
generate_screen_from_text, edit_screens, and generate_variants may timeout via the MCP proxy with ECONNRESET after ~60 seconds. This is a transport-layer limitation of the stdio proxy, not a Stitch API error. The generation almost always completes server-side despite the connection reset. The fire-and-poll protocol in Step 4.3 handles this by checking list_screens after a timeout to find the completed result.
User: /stitch-design
User: /stitch-design dark dashboard like Linear [attaches screenshot]
User: /stitch-design (in a project with existing stitch-design/ folder)