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, 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 oh-my-skills
npx skills add https://github.com/akillness/oh-my-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

Run
```
enhance-prompt
```
before any
```
stitch-design
```
generation for better results
Use
```
design-md
```
to produce a DESIGN.md before starting
```
stitch-loop
```
multi-page work
Validate React components for naming consistency after
```
react-components
```
output
Keep Stitch screen outputs in a dedicated
```
screens/
```
directory for
```
remotion
```
to consume
Use
```
shadcn-ui
```
integration only after
```
react-components
```
has established the component tree
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 — Apache-2.0 License

stitch-skills

NPX Install

Tags

SKILL.md Content

stitch-skills — Agent Skills for Stitch MCP

Installation

Plugin (Claude Code)

Skill (any platform)

When to use

Do not use when

Available skills

stitch-design

stitch-loop

enhance-prompt

design-md

react-components

remotion

shadcn-ui

Repository structure

Operating rules

Examples