stitch-design git:20260515.6be9f59A

Immutable. This exact content never changes and is served at /api/v1/blob/9f8e4fbc4adbd346.

---
name: stitch-design
description: Generate UI designs using Google Stitch AI with optimized prompts
autoInvoke: false
priority: medium
triggers:
  - "stitch"
  - "AI design"
  - "generate UI"
  - "design with AI"
  - "stitch design"
user-invocable: false
---

> **AI-consumed reference.** Optimized for Claude to read during execution.
> Human-readable explanation: see [docs/architecture/HIERARCHICAL_PLANNING.md](../../../docs/architecture/HIERARCHICAL_PLANNING.md)
> or [docs/getting-started/](../../../docs/getting-started/) depending on topic.


# Skill: Google Stitch Design

Generate UI designs using Google Stitch AI (https://stitch.withgoogle.com).

```toon
stitch_info[1]{engine,limits,export}:
  Gemini 2.5 Flash/Pro,350 gen/month (Standard),Figma paste or HTML/CSS
```

---

## Workflow

```toon
workflow[5]{step,action,output}:
  1,Gather requirements,Requirements doc
  2,Generate prompt,Optimized Stitch prompt
  3,Create review doc,.claude/workflow/stitch-design-review-*.md
  4,Guide user,Instructions + link
  5,Process export,Component code
```

### 1. Gather Requirements

Ask: app type (dashboard/landing/mobile/ecommerce/forms), target audience, theme, key features, existing brand.

### 2. Generate Prompt

Load template from `references/prompt-templates.md` matching app type. Fill with gathered requirements.

### 3. Create Review Document

Save to `.claude/workflow/stitch-design-review-{project-name}.md` with specs, acceptance criteria, and checklists for: visual design, UX, technical, brand alignment.

### 4. Guide User

Provide optimized prompt (copy-paste ready), link to Stitch, step-by-step instructions, export guidance (Figma recommended vs HTML/CSS).

### 5. Process Exported Code

Review HTML/CSS, extract design tokens, map to project design system, generate component files per conventions.

---

## Design Types

```toon
design_types[5]{type,use_case,template}:
  dashboard,Admin panels; analytics,references/prompt-templates.md#dashboard
  landing,Marketing; product pages,references/prompt-templates.md#landing
  mobile,iOS/Android screens,references/prompt-templates.md#mobile
  ecommerce,Product; cart; checkout,references/prompt-templates.md#ecommerce
  forms,Multi-step wizards,references/prompt-templates.md#forms
```

---

## Related Files

- `references/prompt-templates.md` - Optimized prompts by type
- `references/design-checklist.md` - Detailed review checklist
- `references/export-guide.md` - Export from Stitch

**Note:** Stitch has no API -- user must manually paste prompt and export results.

---