Skill reference

The Stitch Design Skills are organized into three plugins. Each skill follows the Agent Skills open standard and works with any compatible coding agent.

stitch-design

Core design workflows for creating, capturing, and managing designs.

code-to-design

Orchestrates the full import pipeline: detect framework → extract static HTML → extract design tokens → upload to Stitch.

Dependencies: extract-static-html, extract-design-md, upload-to-stitch

generate-design

Generates new screens from text or images, edits existing screens, and creates design variants.

MCP tools: generate_screen_from_text, edit_screens, generate_variants, list_projects, create_project, list_design_systems

manage-design-system

Uploads DESIGN.md specifications, creates project-level design systems, and applies them to screens.

MCP tools: create_design_system_from_design_md, apply_design_system, list_design_systems, upload_design_md

extract-design-md

Reverse-engineers a DESIGN.md from frontend source code — React, Vue, Svelte, Angular, plain CSS, or Tailwind. No build step required.

Pipeline: Scan source tree → Detect framework → Extract tokens → Normalize → Deduplicate → Generate DESIGN.md

extract-static-html

Captures self-contained HTML snapshots from running web applications, inlining CSS and converting images to base64.

upload-to-stitch

Uploads local assets (images, HTML) to the Stitch REST API via a standalone script that bypasses LLM output token limits.

stitch-build

Code generation and media compilation from Stitch designs.

react-components

Converts Stitch screens to modular React component hierarchies with Tailwind theme extraction and AST-based validation.

remotion

Generates walkthrough videos from Stitch projects using Remotion with spring-animated zoom effects and configurable transitions. See Generate walkthrough videos.

shadcn-ui

Expert guidance for integrating shadcn/ui components — discovery, installation, and customization with Radix UI and Tailwind CSS.

stitch-utilities

Quality enhancement at both ends of the pipeline.

design-md

Analyzes existing Stitch project screens and synthesizes a DESIGN.md from the rendered output. This is the design → tokens direction (as opposed to extract-design-md which is code → tokens).

MCP tools: list_screens, get_screen, upload_design_md, list_projects, get_project

enhance-prompt

Transforms vague ideas into structured, generation-ready prompts with UI/UX keywords, design system context, and page structure.

stitch-loop

Orchestrates autonomous multi-page site generation using a relay baton pattern. See Build a multi-page site.

taste-design

Generates premium DESIGN.md files with anti-generic standards — calibrated color science, musical-interval type scales, spring physics motion, and an explicit anti-pattern catalog. See Create a premium design system.

Installing individual skills

The full plugin suite is the recommended install. If you need specific skills only:

# Design only (generate and edit screens)
npx skills add google-labs-code/stitch-skills \
  --skills stitch::generate-design,stitch::manage-design-system,enhance-prompt

# Import existing code (full migration pipeline)
npx skills add google-labs-code/stitch-skills \
  --skills stitch::code-to-design,stitch::extract-design-md,stitch::extract-static-html,stitch::upload-to-stitch

# Code generation (Stitch to React)
npx skills add google-labs-code/stitch-skills \
  --skills react:components,shadcn-ui

Many skills have inter-dependencies. Check the dependency listings above before installing selectively.