Converts Stitch AI design tool screens to production-ready code and generates complete UI systems. Use when working with the Stitch MCP server, converting Stitch screens to React components, generating DESIGN.md documentation from Stitch projects, integrating Stitch output with shadcn/ui components, or creating UI walkthroughs with Remotion. Triggers on: "use Stitch", "convert Stitch screen", "generate DESIGN.md", "Stitch to React", "generate from Stitch".
Converts Stitch AI design tool screens to production-ready code and generates complete UI systems. Use when working with the Stitch MCP server, converting Stitch screens to React components, generating DESIGN.md documentation from Stitch projects, integrating Stitch output with shadcn/ui components, or creating UI walkthroughs with Remotion. Triggers on: "use Stitch", "convert Stitch screen", "generate DESIGN.md", "Stitch to React", "generate from Stitch".
Using Stitch Skills
Stitch is an AI design tool that generates UI screens from prompts. This skill coordinates six sub-skills to convert Stitch output into production-ready code and documentation.
Requires the Stitch MCP server to be active. If Stitch is not available, use frontend-design + tailwind-design-system instead.
Core Philosophy
Stitch generates the visual blueprint; your job is to translate it into maintainable, accessible, production-ready code. Treat Stitch output as a high-fidelity wireframe — extract design decisions, then implement them properly.
When to Use Each Sub-Skill
Task
Sub-skill
Document a Stitch project's design system
design-md
Convert screens to React component system
react-components
Generate a complete multi-page website
stitch-loop
Improve a vague UI prompt before using Stitch
enhance-prompt
Create a video walkthrough of a Stitch project
remotion
Integrate Stitch output with shadcn/ui
shadcn-ui
1. design-md — Generate Design Documentation
When: After creating a Stitch project, before writing any code.
What it does: Analyzes all Stitch screens and extracts the design system into a DESIGN.md file:
Color palette (with semantic names: --color-primary, --color-surface, etc.)
Typography scale (font families, sizes, weights, line heights)
Spacing system (base unit, scale steps)
Component inventory (list of all UI components seen across screens)
When: Building a full site or app from a single prompt.
What it does: Orchestrates an end-to-end generation loop:
Prompt enhancement (see enhance-prompt)
Generate each page/screen in Stitch
Extract design system → DESIGN.md
Generate React components → components/
Assemble pages with Next.js routing
Add navigation between pages
Gate between steps: Each step's output must be validated before proceeding. Do not generate all screens upfront and convert later — iterate screen by screen so design consistency is maintained.
Output: Complete Next.js app with pages, components, and DESIGN.md.
4. enhance-prompt — Optimize Prompts for Stitch
When: Before generating a screen in Stitch. Especially useful when the idea is vague or high-level.
What it does: Transforms a rough UI idea into a Stitch-optimized prompt by adding:
Platform context: web / mobile / tablet
Visual style: minimalist, bold, glass morphism, etc.
Content specifics: what text, data, and actions appear on screen
Design system hints: color palette direction, font personality
Layout direction: left-to-right, card-based, split-screen, etc.
Input format:
Original idea: [rough description]
Platform: [web/iOS/Android]
Style direction: [reference or adjectives]
Key content: [main elements on screen]
Output: Enhanced Stitch prompt, ready to paste.
5. remotion — Create Video Walkthrough
When: Presenting a Stitch project to stakeholders or for Product Hunt launch.
What it does: Creates a Remotion video that walks through Stitch screens:
Each screen becomes a video segment
Transitions between screens
Highlight animations for key interactions
Voiceover-ready timing (configurable duration per screen)
Setup required:
npm install remotion @remotion/player
Output:remotion/ directory with video composition. Run with npx remotion studio.
6. shadcn-ui — Integrate with shadcn/ui
When: After generating React components from Stitch, to replace custom primitives with shadcn/ui components.
What it does: Maps Stitch-generated components to their shadcn/ui equivalents:
Buttons → <Button> with correct variant
Inputs → <Input>, <Textarea>, <Select>
Cards → <Card>, <CardHeader>, <CardContent>
Dialogs → <Dialog> (not custom modal)
Navigation → <NavigationMenu>, <Tabs>
Process:
Audit generated components for shadcn/ui replacements
