google-labs-code / stitch-skills
★ 6,400A skill package that teaches your agent 7 capabilities — every one documented and browsable below, no GitHub required · by google-labs-code.
Each skill below is one capability this package teaches your agent. Install the whole package, or open a skill to install just that one.
Analyze Stitch design projects and generate semantic DESIGN.md files as prompting source of truth. Retrieves screen metadata, HTML/CSS source, and design assets from Stitch projects via MCP Server tools to extract design tokens and visual patterns Synthesizes findings into structured DESIGN.md files covering atmosphere, color palette with hex codes, typography, component styling, and layout principles Translates technical values (Tailwind classes, border-radius, shadows) into evocative...
4 files — installable on its own
Transforms vague UI ideas into polished, Stitch-optimized prompts with design system context. Assesses missing elements (platform, page type, visual style, colors, components) and fills gaps systematically Checks for and integrates DESIGN.md files to ensure consistency across multi-page projects Applies enhancement techniques including UI/UX keyword specificity, mood amplification, page structure organization, and proper color formatting Outputs structured prompts ready for Stitch...
4 files — installable on its own
Create professional walkthrough videos from Stitch app designs using Remotion with smooth transitions and text overlays. Retrieves screens from Stitch projects and orchestrates them into Remotion video compositions with zoom effects, fade transitions, and contextual text overlays Supports modular component architecture with ScreenSlide and WalkthroughComposition components, plus advanced features like interactive hotspots and voiceover integration Generates screen manifests, downloads...
10 files — installable on its own
Expert guidance for discovering, installing, and customizing shadcn/ui components in your project. shadcn/ui is a copy-paste component collection, not a library—components live in your codebase for full ownership and customization without version lock-in Includes 50+ accessible, pre-built components (buttons, dialogs, forms, tables, etc.) built on Radix UI or Base UI primitives with Tailwind CSS styling Supports theme customization via CSS variables, component variants with...
13 files — installable on its own
Unified design system entry point for creating and editing high-fidelity UI screens with Stitch MCP. Transforms rough design ideas into structured prompts using professional UI/UX terminology and design system context Synthesizes existing Stitch projects into .stitch/DESIGN.md "source of truth" documents for consistency across screens Routes requests intelligently between text-to-design generation, screen editing, and design system documentation workflows Automatically manages assets by...
39 files — installable on its own
Autonomous website builder using iterative Stitch generation with baton-passing loop coordination. Implements a relay pattern where each agent iteration reads a task from .stitch/next-prompt.md , generates a page via Stitch MCP, integrates it into the site, and writes the next task for continuation Manages Stitch project state through .stitch/metadata.json , persisting project IDs, screen metadata, and design theme across iterations Requires .stitch/DESIGN.md (visual design system) and...
8 files — installable on its own
Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography,…
3 files — installable on its own
Stitch Design Skills
A collection of agent skills and plugins for Google Stitch, following the Agent Skills open standard. Compatible with coding agents such as Codex, Antigravity, Gemini CLI, Claude Code, and Cursor.
Quick Start
1. Install Plugins (Recommended)
The fastest way to set up the full Stitch plugin suite globally.
Codex
Add the Stitch Skills marketplace, then install the plugins you need.
<details open> <summary><strong>Via CLI</strong> (recommended)</summary>codex plugin marketplace add google-labs-code/stitch-skills --ref main \
--sparse .agents/plugins \
--sparse plugins/stitch-design \
--sparse plugins/stitch-build \
--sparse plugins/stitch-utilities</details> <details> <summary><strong>Via the Codex UI</strong></summary>[!TIP] The
--sparseflags are optional — they limit the checkout to only the listed paths for a faster clone. Omit them to pull the entire repository.
Navigate to Settings → Plugin Marketplaces → Add and fill in:
| Field | Value |
|---|---|
| Source | https://github.com/google-labs-code/stitch-skills |
| Git ref | main |
| Sparse paths | (optional) .agents/plugins, plugins/stitch-design, plugins/stitch-build, plugins/stitch-utilities |
Once the marketplace is registered, install any combination of:
stitch-design— design-focused skillsstitch-build— build and component skillsstitch-utilities— utility and helper skills
Claude Code & Cursor
# Claude Code — installs into the current project
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code# Cursor — installs into the current workspace
npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor2. Install Skills Selectively
Choose only the specific skills you need.
[!IMPORTANT] Stitch Design Skills often have inter-dependencies. If you choose to install skills selectively, ensure you include all required dependencies.
npx skills add google-labs-code/stitch-skillsYou can run the following commands to see the help documentation for plugins and skills:
npx plugins --help
npx skills --helpPrerequisites
These skills require the Stitch MCP server to be configured and running in your agent's environment. Make sure you have followed the Stitch MCP Setup Instructions to register the server and set up appropriate environment variables and credentials.
Available Plugins
Design (stitch-design)
Core design workflows for creating, managing, and optimizing designs within Stitch.
| Skill | Description | Prompt Example |
|---|---|---|
| stitch::code-to-design | Convert frontend code (React, Vue, etc.) to a Stitch Design via HTML extraction + design system + upload | "Upload the frontend code at /path/to/dashboard into a Stitch project named 'Dashboard-Migration-2026'." |
| stitch::generate-design | Generate new screens from text or images, edit existing screens, and create design variants | · "Make a browse tab for a mobile app for romance and date night ideas."<br>· "Edit the login screen to add a 'Remember Me' checkbox and change the button color to blue."<br>· "Generate 3 design variants of the home screen with dark mode and high-density layouts." |
| stitch::manage-design-system | Manage design systems in Stitch — upload DESIGN.md and apply themes to screens | "Upload our design system from .stitch/DESIGN.md and apply it to all screens." |
| stitch::extract-design-md | Extract a comprehensive DESIGN.md directly from frontend source code | "Scan /src and extract the design system into .stitch/DESIGN.md." |
| stitch::extract-static-html | Extract self-contained static HTML from running web apps, inlining CSS and images | "Extract a static HTML snapshot of http://localhost:3000/profile." |
| stitch::upload-to-stitch | Upload local assets (images, mockups, HTML) to a Stitch project | "Upload .stitch/landing_page.html to Stitch project projects/987654321." |
Build (stitch-build)
Code generation, framework integration, and asset compilation from Stitch designs.
| Skill | Description | Prompt Example |
|---|---|---|
| stitch::react-components | Convert Stitch screens to React component systems with automated validation and design token consistency | · "Convert all screens in Stitch project projects/123 to React components."<br>· "Sync the app to the last updates of the Stitch project 13039335308618232534." |
| stitch::react-native | Convert Stitch HTML designs to production-ready React Native components with StyleSheet and platform-specific code | · "Convert the Stitch design to React Native components with proper theme and navigation."<br>· "Sync the app to the last updates of the Stitch project 13039335308618232534." |
| remotion | Generate walkthrough videos from Stitch projects using Remotion with smooth transitions and zooming | "Generate a walkthrough video of the Stitch project projects/456." |
| shadcn-ui | Expert guidance for integrating and building applications with shadcn/ui components | "Set up shadcn/ui and build a data table with sorting and filtering." |
Utilities (stitch-utilities)
Supporting tools for enhancing prompts, generating design specs, and enforcing design standards.
| Skill | Description | Prompt Example |
|---|---|---|
| design-md | Analyze Stitch projects and generate comprehensive DESIGN.md files in semantic language | "Analyze Stitch project projects/123 and generate a DESIGN.md." |
| enhance-prompt | Transform vague UI ideas into polished, Stitch-optimized prompts with UI/UX keywords | "Enhance this prompt: 'make a settings page'." |
| stitch-loop | Generate complete multi-page websites from a single prompt with automated validation | "Build a 5-page portfolio website with Stitch." |
| taste-design | Generate DESIGN.md files enforcing premium, anti-generic UI standards | "Generate a premium DESIGN.md with strict typography and calibrated colors." |
Repository Structure
plugins/
├── stitch-design/ — Core design workflow plugin
│ ├── plugin.json
│ └── skills/
│ ├── code-to-design/
│ ├── generate-design/
│ ├── manage-design-system/
│ ├── extract-design-md/
│ ├── extract-static-html/
│ └── upload-to-stitch/
├── stitch-build/ — Code generation & build plugin
│ ├── plugin.json
│ └── skills/
│ ├── react-components/ — stitch::react-components
│ ├── react-native/
│ ├── remotion/
│ └── shadcn-ui/
└── stitch-utilities/ — Design utilities & assistants plugin
├── plugin.json
└── skills/
├── design-md/
├── enhance-prompt/
├── stitch-loop/
└── taste-design/Each skill follows the Agent Skills standard:
skills/<skill-name>/
├── SKILL.md — The "Mission Control" for the agent
├── scripts/ — Executable enforcers (Validation & Networking)
├── resources/ — The knowledge base (Checklists & Style Guides)
└── examples/ — The "Gold Standard" syntactically valid referencesAdding New Skills
All new skills need to follow the file structure above to implement the Agent Skills open standard.
Great candidates for new skills
- Validation: Skills that convert Stitch HTML to other UI frameworks and validate the syntax.
- Decoupling Data: Skills that convert static design content into external mock data files.
- Generate Designs: Skills that generate new design screens in Stitch from a given set of data.
This is not an officially supported Google product. This project is not eligible for the Google Open Source Software Vulnerability Rewards Program.
Install the whole package (7 skills):
npx skills add https://github.com/google-labs-code/stitch-skillsOr install a single skill:
npx skills add https://github.com/google-labs-code/stitch-skills --skill <name>Pick the skill name from the Skills tab — each entry there installs independently.