Stitch

Google Stitch — Skill Bundle

This folder contains 6 sub-skills for working with Google Stitch, a design-to-code platform with an MCP server. Each sub-skill has its own SKILL.md with full instructions.

Prerequisites

Most skills require the Stitch MCP Server to be connected. The shadcn-ui skill works independently with the shadcn MCP server or CLI.

Sub-Skill Directory

Read the linked SKILL.md for any sub-skill before using it.

1. design-md — Design System Extraction

→ Read SKILL.md

What: Analyzes Stitch project screens and generates a semantic DESIGN.md file documenting the visual design system (colors, typography, depth, layout, component styles).

When to use:

• Starting a new multi-page project and need a design system reference
• Onboarding to an existing Stitch project
• Need consistent design language across agent-generated screens

Outputs: DESIGN.md file

2. enhance-prompt — Prompt Enhancement

→ Read SKILL.md

What: Transforms vague UI ideas into polished, structured prompts optimized for Stitch generation. Adds UI/UX keywords, design system context, and page structure.

When to use:

• User gives a vague prompt like "make me a login page"
• Previous Stitch generation produced poor results
• Need to inject DESIGN.md tokens into a prompt

Outputs: Enhanced prompt text or next-prompt.md file

3. stitch-loop — Iterative Build Loop

→ Read SKILL.md

What: Autonomous baton-passing loop for building multi-page websites. Each iteration reads a task (next-prompt.md), generates a page, integrates it, updates docs, and writes the next task.

When to use:

• Building a complete multi-page site from scratch
• Need autonomous, continuous page generation
• Want a structured sitemap-driven build process

Depends on: design-md (for DESIGN.md), enhance-prompt (for baton prompts) Outputs: Full site in site/public/, updated SITE.md

4. react-components — Design to React

→ Read SKILL.md

What: Converts Stitch-generated HTML into modular React/TypeScript components with proper props interfaces, mock data layers, and AST-based validation.

When to use:

• Converting a Stitch screen into production React code
• Need type-safe, modular component extraction from HTML
• Want automated validation of component architecture

Outputs: React components in src/, mock data in src/data/mockData.ts

5. remotion — Walkthrough Videos

→ Read SKILL.md

What: Generates walkthrough videos from Stitch project screenshots using Remotion, with smooth transitions, zoom effects, and text overlays.

When to use:

• Need a video showcase of designed screens
• Want to create a professional app walkthrough
• Building a demo reel from Stitch designs

Note: For general Remotion work (not Stitch-specific), use the main remotion skill instead — it has 25+ rule files from Remotion's official repo.

Outputs: Remotion project + rendered .mp4

6. shadcn-ui — Component Library

→ Read SKILL.md

What: Expert guidance for integrating shadcn/ui components — discovery, installation, customization, variants, blocks, and accessibility. Works with the shadcn MCP server or CLI.

When to use:

• Setting up shadcn/ui in a new project
• Installing or customizing shadcn components
• Building forms, data tables, auth layouts, or dashboards
• Need component variant patterns with cva

Note: This skill works independently of Stitch. It's useful for any React/Next.js project.

Outputs: Installed components in components/ui/, configured components.json

Skill Chains

These skills are designed to work together in sequence:

┌─────────────┐     ┌─────────────────┐     ┌──────────────┐
│  design-md  │ ──→ │ enhance-prompt  │ ──→ │ stitch-loop  │
│ (extract    │     │ (polish the     │     │ (build pages │
│  design     │     │  prompt with    │     │  iteratively │
│  system)    │     │  design tokens) │     │  using baton)│
└─────────────┘     └─────────────────┘     └──────────────┘
                                                    │
                                              ┌─────┴──────┐
                                              ▼            ▼
                                    ┌──────────────┐ ┌──────────┐
                                    │   react-     │ │ remotion │
                                    │ components   │ │ (video)  │
                                    │ (production  │ └──────────┘
                                    │  React code) │
                                    └──────────────┘

Typical Workflow

1. design-md → Analyze an existing screen → get DESIGN.md
2. enhance-prompt → Write a prompt for the next page → inject design tokens
3. stitch-loop → Generate page → integrate → write next baton → repeat
4. react-components → Convert final HTML pages to production React
5. remotion → Create a walkthrough video of the finished product

Standalone Usage

• shadcn-ui — Use anytime for React/Next.js UI component work
• design-md — Use standalone to document any project's design system
• enhance-prompt — Use standalone to improve any UI generation prompt

Acknowledgements

• Based on stitch-skills
• This is not an officially supported Google product. This project is not eligible for the Google Open Source Software Vulnerability Rewards Program.