Google Stitch Skills: The Open-Source Agent Skills Library That Turns Designs Into Production Code — 6,500+ GitHub Stars

The gap between design and development has been one of the most persistent bottlenecks in software engineering. Designers create beautiful interfaces in Figma or Sketch, developers rebuild them from scratch in code, and somewhere in that handoff, details get lost, timelines stretch, and frustration builds.

What if your AI coding agent could read a design, understand its structure, and generate production-ready React or React Native components — automatically, with full design token consistency?

That is exactly what Google Stitch Skills does. Released by Google Labs, this open-source library of agent skills integrates with the Google Stitch MCP server to give AI coding agents the ability to generate designs from text, convert existing code into Stitch designs, manage design systems, and output framework-specific code — all through natural language prompts.

With over 6,500 GitHub stars and compatibility with virtually every major AI coding agent, Stitch Skills is rapidly becoming the standard bridge between design and development workflows.

What Is Google Stitch Skills?

Stitch Skills is a curated library of 14+ agent skills organized into three plugin categories:

• stitch-design — Core design workflow skills (generate, convert, upload, extract)
• stitch-build — Code generation and framework integration skills (React, React Native, Remotion, shadcn/ui)
• stitch-utilities — Supporting tools for prompt enhancement, design specs, and quality enforcement

Each skill follows the Agent Skills open standard, which means they work not just with one AI agent but across Claude Code, Cursor, Gemini CLI, Codex, and Antigravity. Write a skill once, use it everywhere.

The architecture follows a clean plugin structure:

plugins/
├── stitch-design/     → Design workflow skills
│   └── skills/
│       ├── code-to-design/
│       ├── generate-design/
│       ├── manage-design-system/
│       ├── extract-design-md/
│       ├── extract-static-html/
│       └── upload-to-stitch/
├── stitch-build/      → Code generation skills
│   └── skills/
│       ├── react-components/
│       ├── react-native/
│       ├── remotion/
│       └── shadcn-ui/
└── stitch-utilities/  → Helper and quality skills
    └── skills/
        ├── design-md/
        ├── enhance-prompt/
        ├── stitch-loop/
        └── taste-design/

Each individual skill follows a consistent internal structure that enforces the Agent Skills standard:

skills/skill-name/
├── SKILL.md       → Mission control for the agent
├── scripts/       → Executable validation and networking
├── resources/     → Knowledge base (checklists, style guides)
└── examples/      → Gold standard reference implementations

How It Works: The Design-to-Code Pipeline

The core workflow with Stitch Skills follows a natural language-driven pipeline. Here is how the most common use cases work:

1. Generate Designs From Text

The stitch::generate-design skill lets you create UI screens from plain English descriptions:

Prompt: "Make a browse tab for a mobile app for romance and date night ideas."

// The agent generates a complete Stitch design screen
// with proper layout, typography, and color choices

You can also edit existing designs and generate variants:

Prompt: "Edit the login screen to add a 'Remember Me' checkbox
and change the button color to blue."

Prompt: "Generate 3 design variants of the home screen
with dark mode and high-density layouts."

2. Convert Code to Stitch Designs

Already have frontend code? The stitch::code-to-design skill converts React, Vue, or any frontend code into Stitch Designs via HTML extraction and design system mapping:

Prompt: "Upload the frontend code at /path/to/dashboard
into a Stitch project named 'Dashboard-Migration-2026'."

3. Generate Production Code From Designs

This is where Stitch Skills really shines. The stitch::react-components skill converts Stitch screens into complete React component systems with automated validation and design token consistency:

Prompt: "Convert all screens in Stitch project projects/123
to React components."

Prompt: "Sync the app to the last updates of the
Stitch project 13039335308618232534."

For mobile developers, the stitch::react-native skill outputs production-ready React Native components with StyleSheet integration and platform-specific code:

Prompt: "Convert the Stitch design to React Native components
with proper theme and navigation."

4. Manage Design Systems

The stitch::manage-design-system skill lets you upload DESIGN.md files and apply themes across all screens in a project:

Prompt: "Upload our design system from .stitch/DESIGN.md
and apply it to all screens."

And the stitch::extract-design-md skill can reverse-engineer a comprehensive DESIGN.md directly from your frontend source code:

Prompt: "Scan /src and extract the design system
into .stitch/DESIGN.md."

Setup: Getting Started in Minutes

Setting up Stitch Skills depends on your AI coding agent, but the process is straightforward for all supported platforms.

For Codex (Recommended Quick Start)

# Add the Stitch Skills marketplace
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

The --sparse flags are optional but recommended — they limit the checkout to only the listed paths for a faster clone.

For Claude Code

# Installs into the current project
npx plugins add google-labs-code/stitch-skills   --scope project   --target claude-code

For Cursor

# Installs into the current workspace
npx plugins add google-labs-code/stitch-skills   --scope workspace   --target cursor

Important prerequisite: All Stitch Skills require the Stitch MCP server to be configured and running in your agent environment. Follow the Stitch MCP Setup Instructions first to register the server and set up credentials.

Real-World Example: Building a SaaS Dashboard From Scratch

Here is a practical workflow showing how a developer might use Stitch Skills to build a complete SaaS dashboard:

Step 1: Generate the initial design

Prompt: "Create a SaaS analytics dashboard with a sidebar navigation,
a header with user avatar and notifications, a KPI cards row showing
revenue/users/conversion, and a main area with a line chart and
a recent transactions table."

The agent generates a complete Stitch design with all screens.

Step 2: Apply your design system

Prompt: "Upload our design system from DESIGN.md and apply
the 'Enterprise Dark' theme to all dashboard screens."

Step 3: Generate React components

Prompt: "Convert all dashboard screens to React components
using Tailwind CSS and shadcn/ui for the chart components."

The output is production-ready React code with proper component hierarchy, design token mapping, and responsive breakpoints.

Step 4: Generate a walkthrough video

Prompt: "Generate a walkthrough video of the Stitch project
with smooth transitions between each dashboard screen."

The Remotion skill produces a polished video you can share with stakeholders — all without touching a video editor.

Key Benefits of Google Stitch Skills

• 🔗 Multi-Agent Compatibility — Works with Claude Code, Cursor, Gemini CLI, Codex, and Antigravity. Write skills once, use them across all your AI coding tools.
• 🎨 Design-to-Code Pipeline — Go from text description or existing design to production React/React Native code with automated validation and design token consistency.
• 📐 Agent Skills Standard — Every skill follows the open Agent Skills standard with consistent SKILL.md, scripts, resources, and examples structure.
• 🔄 Bidirectional Workflow — Convert code to designs AND designs to code. Migrate legacy codebases into Stitch or generate new code from Stitch designs.
• 🎯 Quality Enforcement — Built-in validation scripts, the taste-design skill for premium UI standards, and automated syntax checking for output code.
• 📦 Modular Plugin Architecture — Install only what you need: design skills, build skills, or utility skills independently.
• 🆓 Free and Open Source — Fully open source under Google Labs, with active community contributions.
• 🎬 Bonus: Video Generation — The Remotion skill generates walkthrough videos from your designs — perfect for demos and stakeholder presentations.

How Stitch Skills Compares to Alternatives

The design-to-code space has several players, but Stitch Skills stands out in key ways:

Frequently Asked Questions

Is Google Stitch Skills free to use?

Yes, Stitch Skills is completely free and open source. It is released by Google Labs under an open source license. The Stitch MCP server that powers it also has a free tier, making the entire design-to-code pipeline accessible at no cost.

Which AI coding agents are compatible with Stitch Skills?

Stitch Skills is compatible with Claude Code, Cursor, Gemini CLI, Codex (OpenAI), and Antigravity. Any agent that supports the Agent Skills open standard can use these skills. The setup process varies slightly by agent but takes just a few minutes.

Do I need the Stitch MCP server to use Stitch Skills?

Yes, all Stitch Skills require the Stitch MCP server to be configured and running. The MCP server handles the communication between your AI agent and the Stitch design platform. Follow the official Stitch MCP Setup Instructions to get started.

Can I use Stitch Skills to convert my existing React codebase into designs?

Absolutely. The stitch::code-to-design skill converts frontend code (React, Vue, etc.) into Stitch Designs via HTML extraction and design system mapping. The stitch::extract-design-md skill can also reverse-engineer a DESIGN.md from your source code. This makes it ideal for migrating legacy codebases into a design-first workflow.

What output formats does Stitch Skills support?

Stitch Skills can output React components, React Native components, static HTML, DESIGN.md files, and even walkthrough videos via the Remotion integration. The React output includes automated validation, design token consistency, and proper component hierarchy. The React Native output includes StyleSheet integration and platform-specific code.

How does the Agent Skills open standard work?

The Agent Skills standard (agentskills.io) defines a consistent file structure for AI agent skills: a SKILL.md mission control file, executable scripts for validation, a resources directory for knowledge bases, and an examples directory for reference implementations. This standard ensures skills are portable across different AI coding agents and maintain consistent quality.

Can I contribute my own skills to Stitch Skills?

Yes, Stitch Skills is open source and accepts community contributions. The repository includes guidelines for three types of contributions: Validation skills (that convert and validate syntax), Decoupling Data skills (that separate design content into mock data), and Generate Designs skills (that create new screens). All contributions must follow the Agent Skills file structure.