stitch-design
Generate UI designs using Google Stitch AI with optimized prompts
Best use case
stitch-design is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Generate UI designs using Google Stitch AI with optimized prompts
Teams using stitch-design should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/stitch-design/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How stitch-design Compares
| Feature / Agent | stitch-design | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Generate UI designs using Google Stitch AI with optimized prompts
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
> **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.
---Related Skills
design-expert
UI/UX design expertise — component design, design system selection, responsive layout. Includes auto-detection from package.json and Context7 integration for library docs.
api-designer
Designs RESTful APIs with endpoint naming, versioning strategies (URL path, header-based), pagination (offset and cursor), error response schemas, and OpenAPI conventions. Use when the user asks about REST API design, creating endpoints, URL structure, API versioning, status codes, Swagger, or OpenAPI specs.
vue-expert
Vue 3 gotchas and decision criteria. Covers reactivity traps, Composition API pitfalls, and Pinia patterns.
typescript-expert
TypeScript gotchas and decision criteria covering nullish coalescing pitfalls (|| vs ??), strict tsconfig settings (noUncheckedIndexedAccess, exactOptionalPropertyTypes), type guard patterns, discriminated unions, and as const vs enum. Use when writing TypeScript, configuring tsconfig, implementing type guards, or debugging null/undefined errors.
tree-of-thoughts
Branch, evaluate, prune, expand — structured search over solution space. Use for architecture with multi-step decisions, refactor planning, or complex debug hypothesis trees. Paper: Yao et al. 2023.
test-writer
Write tests with TDD following structured patterns. Ensures consistent AAA structure, proper coverage targets, and framework-specific conventions. Without this skill, tests lack consistent naming, miss coverage targets, and skip anti-pattern checks.
session-continuation
Manage workflow state across sessions with handoff and resume. TOON-based state persistence.
sequential-thinking
Structured thinking process for complex analysis. Supports revision, branching, and dynamic adjustment.
self-improve
Apply learned improvements to the Aura Frog plugin. Updates rules, adjusts agent routing, modifies workflow configurations, and generates knowledge base entries.
self-healing-orchestrator
Proposes patches for F2 (local-logic) and F3 (local-design) failures. NEVER applies without user approval. Confidence ≥0.7 to propose; below that, escalates raw findings. Counts toward replan_budget. Per-task: max 1; per-session: max 5.
self-consistency
Generate N independent reasoning paths and vote on the answer. Use for architectural trade-offs, ambiguous design decisions, or when single-path reasoning risks locking onto the first plausible answer. Paper: Wang et al. 2022.
scalable-thinking
Design for scale while keeping implementation simple (KISS).