How do I install the Stitch Design skill?

Run npx skillmds@latest add tomevault-io/stitch-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Stitch Design safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Stitch Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Stitch Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Stitch Design?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Stitch Design by tomevault-io — Agent Skill

Name: Stitch Design
Author: tomevault-io

File contents

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

Skill: Google Stitch Design

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

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

Workflow

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

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.

Source: nguyenthienthanh/aura-frog — distributed by TomeVault.

---name: stitch-designdescription: Generate UI designs using Google Stitch AI with optimized prompts Use when this capability is needed.---> **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 DesignGenerate UI designs using Google Stitch AI (https://stitch.withgoogle.com).```toonstitch_info[1]{engine,limits,export}: Gemini 2.5 Flash/Pro,350 gen/month (Standard),Figma paste or HTML/CSS```---## Workflow```toonworkflow[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 RequirementsAsk: app type (dashboard/landing/mobile/ecommerce/forms), target audience, theme, key features, existing brand.### 2. Generate PromptLoad template from `references/prompt-templates.md` matching app type. Fill with gathered requirements.### 3. Create Review DocumentSave to `.claude/workflow/stitch-design-review-{project-name}.md` with specs, acceptance criteria, and checklists for: visual design, UX, technical, brand alignment.### 4. Guide UserProvide optimized prompt (copy-paste ready), link to Stitch, step-by-step instructions, export guidance (Figma recommended vs HTML/CSS).### 5. Process Exported CodeReview HTML/CSS, extract design tokens, map to project design system, generate component files per conventions.---## Design Types```toondesign_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.------> Source: [nguyenthienthanh/aura-frog](https://github.com/nguyenthienthanh/aura-frog) — distributed by [TomeVault](https://tomevault.io).

Frequently asked questions

Stitch Design