# Stitch Skills

> Generates high-fidelity UI screens, multi-page websites, DESIGN.md documentation, and React components from natural-language prompts using the Stitch MCP server, with support for prompt refinement and walkthrough video creation via Remotion.

- Skill: `akillness/stitch-skills` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add akillness/stitch-skills`
- Raw SKILL.md: https://api.skillmd.com/api/skills/akillness/stitch-skills/raw
- Safety review: CAUTION (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend, Coding & Dev Tools, Design & Media, Frontend Frameworks, UI Design
- Tags: Design Documentation, Prompt Refinement, React, Remotion, Screen Generation, Shadcn Ui, Stitch, Ui Generation
- Author: akillness (https://skillmd.com/u/akillness)
- Updated: 2026-08-22
- Page: https://skillmd.com/skills/akillness/stitch-skills

---


# stitch-skills — Agent Skills for Stitch MCP

> AI-powered UI design generation, prompt refinement, and screen-to-code workflows.

`stitch-skills` is a library of Agent Skills for the [Stitch MCP server](https://stitch.withgoogle.com), following the Agent Skills open standard for compatibility with Claude Code, Cursor, and Gemini CLI.

> **Note:** This is not an officially supported Google product.

## Installation

### Plugin (Claude Code)
```bash
claude plugin marketplace add google-labs-code/stitch-skills
```

### Skill (any platform)
```bash
# List available skills
npx skills add google-labs-code/stitch-skills --list

# Install a specific skill globally
npx skills add google-labs-code/stitch-skills --skill stitch-design --global
npx skills add google-labs-code/stitch-skills --skill stitch-loop --global
npx skills add google-labs-code/stitch-skills --skill enhance-prompt --global
npx skills add google-labs-code/stitch-skills --skill react-components --global
npx skills add google-labs-code/stitch-skills --skill remotion --global
npx skills add google-labs-code/stitch-skills --skill shadcn-ui --global
npx skills add google-labs-code/stitch-skills --skill design-md --global

# Install from jeo-skills
npx skills add https://github.com/akillness/jeo-skills --skill stitch-skills
```

## When to use

- Generate **high-fidelity UI screens** from natural-language prompts via Stitch
- Create **multi-page websites** from a single prompt with automated file organization
- Produce **DESIGN.md documentation** that translates design systems for AI agents
- **Refine vague UI ideas** into polished, Stitch-optimized prompts with specificity
- Convert Stitch designs into **React component architectures** with consistency checks
- Generate **walkthrough videos** from Stitch projects using Remotion
- Integrate **shadcn/ui components** into React applications

## Do not use when

- You need token-level design system lint/diff/export → route to `google-design`
- You need WCAG contrast audit only → route to `web-accessibility`
- You need full backend API design → route to `backend-api`
- You need generic React state management → route to `react-patterns`

## Available skills

### stitch-design
Primary skill for prompt refinement and screen generation through the Stitch MCP system.

```
Workflow:
1. Enhance the user's prompt for Stitch
2. Call stitch_generate_screen MCP tool
3. Validate and iterate on the output
```

### stitch-loop
Automates multi-page website creation from a single prompt.

```
Workflow:
1. Parse top-level pages from the prompt
2. Generate each screen via stitch_generate_screen
3. Organize files and validate output
4. Produce a complete, linked website
```

### enhance-prompt
Transforms vague UI ideas into polished, Stitch-optimized prompts.

```bash
# Example: add design keywords, specificity, and system context
Input:  "a login page"
Output: "A clean, minimal login page with email/password fields,
         a primary CTA button using brand colors, subtle card elevation,
         and a 'Forgot password?' link below the form."
```

### design-md
Generates `DESIGN.md` documentation that translates design systems into natural, semantic language optimized for Stitch screen generation.

```bash
# Output: repo-root DESIGN.md with brand tokens in Stitch-friendly language
```

### react-components
Converts Stitch screens to React component architectures with consistency validation.

```
Workflow:
1. Parse Stitch screen JSON/HTML output
2. Map elements to React component tree
3. Validate component naming and prop consistency
4. Output component files with TypeScript types
```

### remotion
Creates walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays.

```bash
# Requires: npx remotion studio
# Output: MP4 walkthrough video of Stitch screens
```

### shadcn-ui
Provides guidance on implementing shadcn/ui components within React applications built from Stitch designs.

```bash
npx shadcn-ui@latest init
npx shadcn-ui@latest add button card input form
```

## Repository structure

Each skill follows the Agent Skills open standard:

```
stitch-skills/
├── stitch-design/
│   ├── SKILL.md        — agent mission documentation
│   ├── scripts/        — validation and networking executables
│   ├── resources/      — knowledge base (checklists, style guides)
│   └── examples/       — reference implementations
├── stitch-loop/
├── enhance-prompt/
├── react-components/
├── remotion/
├── shadcn-ui/
└── design-md/
```

## Operating rules

1. Run `enhance-prompt` before any `stitch-design` generation for better results
2. Use `design-md` to produce a DESIGN.md before starting `stitch-loop` multi-page work
3. Validate React components for naming consistency after `react-components` output
4. Keep Stitch screen outputs in a dedicated `screens/` directory for `remotion` to consume
5. Use `shadcn-ui` integration only after `react-components` has established the component tree
6. Iterate: enhance → generate → review → refine is the recommended cycle

## Examples

```bash
# Full UI generation workflow
# 1. Enhance your prompt
stitch enhance-prompt "a dashboard for monitoring server health"

# 2. Generate screens via Stitch MCP
stitch generate "..." --pages overview,alerts,settings

# 3. Convert to React
stitch react-components ./screens/

# 4. Add shadcn/ui
npx shadcn-ui@latest add card badge table

# 5. Generate walkthrough video
stitch remotion ./screens/ --output walkthrough.mp4
```

Source: [google-labs-code/stitch-skills](https://github.com/google-labs-code/stitch-skills) — Apache-2.0 License