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, Cursor, and OpenCode (manual install).

Prerequisites

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.

Docs navigation: If a link on stitch.withgoogle.com/docs redirects incorrectly, open the target path under the same host (e.g. https://stitch.withgoogle.com/docs/learn/device-types/).

Available Plugins

Design (stitch-design)

Core design workflows for creating, managing, and optimizing designs within Stitch.

• stitch::code-to-design
  Convert frontend code (React, Vue, etc.) to a Stitch Design via HTML extraction + design system + upload.
  Example:

  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.
  Examples:

  • Make a browse tab for a mobile app for romance and date night ideas.  
    

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

  • 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.
  Example:

  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.
  Example:

  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.
  Example:

  Extract a static HTML snapshot of http://localhost:3000/profile.  
  

• stitch::upload-to-stitch
  Upload local assets (images, mockups, HTML) to a Stitch project.
  Example:

  Upload .stitch/landing_page.html to Stitch project projects/987654321.  
  

Build (stitch-build)

Code generation, framework integration, and asset compilation from Stitch designs.

• stitch::react-components
  Convert Stitch screens to React component systems with automated validation and design token consistency.
  Examples:

  • Convert all screens in Stitch project projects/123 to React components.  
    

  • 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.
  Examples:

  • Convert the Stitch design to React Native components with proper theme and navigation.  
    

  • 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.
  Example:

  Generate a walkthrough video of the Stitch project projects/456.  
  

• shadcn-ui
  Expert guidance for integrating and building applications with shadcn/ui components.
  Example:

  Set up shadcn/ui and build a data table with sorting and filtering.  
  

• react-vite-dashboard
  Convert Stitch screens to React + Vite dashboards with TanStack Query, DESIGN.md tokens, and Web3 read patterns.
  Example:

  Build a DeFi portfolio dashboard from this Stitch screen using our DESIGN.md.  
  

Utilities (stitch-utilities)

Supporting tools for enhancing prompts, generating design specs, and enforcing design standards.

• design-md
  Analyze Stitch projects and generate comprehensive DESIGN.md files in semantic language.
  Example:

  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.
  Example:

  Enhance this prompt: 'make a settings page'.  
  

• stitch-loop
  Generate complete multi-page websites from a single prompt with automated validation.
  Example:

  Build a 5-page portfolio website with Stitch.  
  

• taste-design
  Generate DESIGN.md files enforcing premium, anti-generic UI standards.
  Example:

  Generate a premium DESIGN.md with strict typography and calibrated colors.  
  

Important Notes

• These skills are not officially supported by Google. This project is not eligible for the Google Open Source Software Vulnerability Rewards Program.
• Skills may have inter-dependencies. If you choose to install selectively, ensure all required dependencies are included.
• OpenCode compatibility: OpenCode requires skill name frontmatter to be lowercase kebab-case and match the directory name. Skills that use stitch::… names (or other non-kebab forms) need the name field and folder renamed before OpenCode will load them. Extra frontmatter such as allowed-tools is ignored. Tool names inside skill instructions may differ from OpenCode builtins (webfetch / bash instead of web_fetch / run_command). Prefer the OpenCode tool names when adapting a skill for OpenCode.