Google Labs Releases Stitch Skills Agent Library for Design-to-Code Workflows
Google Labs has open-sourced Stitch Skills, a collection of Model Context Protocol compatible agent skills for Google Stitch. It enables AI coding assistants like Claude Code and Cursor to seamlessly convert frontend code to designs and generate React components.
Impact: High
Why it matters
You can now integrate Google Stitch directly with Claude Code or Cursor to automate design-to-code and layout generation tasks.
TL;DR
- 01Automates frontend-to-Stitch asset extraction and inverse component generation.
- 02Integrates natively with major agent frameworks using the Model Context Protocol.
- 03Provides strict templates (SKILL.md, checklists) to guarantee syntactically valid code outputs.
Key facts
- Supported Agents
- Claude Code, Cursor, Codex, Gemini CLI
- Key Output Frameworks
- React, React Native, Vite + TanStack Query
Direct Integration with Coding Agents
Stitch Skills is fully compatible with popular coding agents including Claude Code, Cursor, Codex, and Gemini. You can install the full plugin suite globally or target specific projects. For example, to integrate with Claude Code inside your current project directory, run:
npx plugins add google-labs-code/stitch-skills --scope project --target claude-codeFor Cursor users, the suite can be installed at the workspace level:
npx plugins add google-labs-code/stitch-skills --scope workspace --target cursorCore Skills and Capabilities
The library is organized into three main plugins:
stitch-design: Core workflows like converting frontend code to Stitch designs, extracting aDESIGN.mdfrom a/srcdirectory, and generating UI variants.stitch-build: Code generation that translates designs into React components or production-ready React Native code.stitch-utilities: Supporting tools for prompt enhancement and design validation.
Standard Directory Structure
Each skill follows a strict file layout that ensures predictability for LLMs:
SKILL.md: Acts as the \"Mission Control\" configuration guiding the agent's behavior.scripts/: Executable scripts responsible for validation and networking.resources/: Knowledge bases including checklists and style guides.examples/: Syntactically valid reference code.
Try it in 2 minutes
npx plugins add google-labs-code/stitch-skills --scope project --target claude-codebash
✓ When to use
- When building design-to-code pipelines with Claude Code or Cursor
- When migrating existing frontend React/Vue assets into Google Stitch
- When enforcing strict design tokens via DESIGN.md files
✕ When NOT to use
- If you do not have the Stitch MCP server set up and configured
- For non-web/non-mobile UI frameworks (e.g., desktop Qt or backend-only architectures)
What to do today
- Install the Stitch Skills package globally or within your project directory.
- Set up the Stitch MCP server with your environment variables and credentials.
- Run 'npx skills add google-labs-code/stitch-skills' to select specific skills.
Sources