How google-labs-code/stitch-skills works
Stitch Design Skills is a catalog of agent-invoked workflows for creating, extracting, managing, and reusing Stitch designs, plus generating code and media from them. The main design path converts frontend code into HTML, captures design-system guidance, and uploads assets to Stitch; separate skills generate or edit designs directly. Build skills turn Stitch screens into framework components or walkthrough videos, while utilities support prompt refinement and design documentation. Edges reflect README-documented workflows or the upload script’s explicit API call; unsampled skill instructions may contain additional sequencing not shown here.
Main entry points: extract-static-html Extract static HTML · code-to-design Code to design · remotion Walkthrough video · upload-to-stitch Upload assets
Components 24
Design workflows
- Code to design
plugins/stitch-design/skills/code-to-design - Generate designs
plugins/stitch-design/skills/generate-design - Manage design system
plugins/stitch-design/skills/manage-design-system - Extract DESIGN.md
plugins/stitch-design/skills/extract-design-md - Upload assets
plugins/stitch-design/skills/upload-to-stitch - Batch screen upload
plugins/stitch-design/skills/upload-to-stitch/scripts/upload_to_stitch.py
Build workflows
- React components
plugins/stitch-build/skills/react-components - React Native
plugins/stitch-build/skills/react-native - Vite dashboard
plugins/stitch-build/skills/react-vite-dashboard - Walkthrough video
plugins/stitch-build/skills/remotion - Screen slide
plugins/stitch-build/skills/remotion/resources/screen-slide-template.tsx - shadcn/ui guidance
plugins/stitch-build/skills/shadcn-ui
Design utilities
- Design documentation
plugins/stitch-utilities/skills/design-md - Enhance prompts
plugins/stitch-utilities/skills/enhance-prompt - Site specification
plugins/stitch-utilities/skills/site-md - Iterative design loop
plugins/stitch-utilities/skills/stitch-loop - Design standards
plugins/stitch-utilities/skills/taste-design
HTML capture
- Extract static HTML
plugins/stitch-design/skills/extract-static-html - Browser snapshot
plugins/stitch-design/skills/extract-static-html/scripts/snapshot.ts - JSX conversion
plugins/stitch-design/skills/extract-static-html/scripts/extract_inline_html.ts - Inline local assets
plugins/stitch-design/skills/extract-static-html/scripts/post_process.ts
Other components
- Coding agent
- Stitch service
- Frontend app
Connections 32
- Coding agent → Code to design: invokes
README.md - Coding agent → Generate designs: invokes
README.md - Coding agent → Manage design system: invokes
README.md - Coding agent → Extract DESIGN.md: invokes
README.md - Coding agent → Upload assets: invokes
README.md - Coding agent → Extract static HTML: invokes
README.md - Coding agent → React components: invokes
README.md - Coding agent → React Native: invokes
README.md - Coding agent → Vite dashboard: invokes
README.md - Coding agent → Walkthrough video: invokes
README.md - Coding agent → shadcn/ui guidance: invokes
README.md - Coding agent → Design documentation: invokes
README.md - Coding agent → Enhance prompts: invokes
README.md - Coding agent → Site specification: invokes
README.md - Coding agent → Iterative design loop: invokes
README.md - Coding agent → Design standards: invokes
README.md - Frontend app → Extract static HTML: captures from
README.md - Code to design → Extract static HTML: uses extraction
README.md - Code to design → Extract DESIGN.md: uses design system
README.md - Code to design → Upload assets: uploads result
README.md - Extract static HTML → Browser snapshot: supports capture
- Extract static HTML → JSX conversion: supports conversion
- Extract static HTML → Inline local assets: supports inlining
- Upload assets → Batch screen upload: can use
- Batch screen upload → Stitch service: posts screens
plugins/stitch-design/skills/upload-to-stitch/scripts/upload_to_stitch.py - Manage design system → Stitch service: applies themes
README.md - Generate designs → Stitch service: creates or edits
README.md - React components → Stitch service: converts screens
README.md - React Native → Stitch service: converts screens
README.md - Vite dashboard → Stitch service: converts screens
README.md - Walkthrough video → Stitch service: uses project screens
README.md - Walkthrough video → Screen slide: renders with