Google Stitch Skills in Practice: From React Dashboard to Design and Components

If you have searched for Google Stitch Skills, Stitch MCP, or Stitch Code-to-Design, you may have noticed that many resources mix the Stitch web product, MCP, and Agent Skills together. Based on the latest Google Labs stitch-skills GitHub repository, this guide explains what the project does, how its plugins are organized, what you need before using it, and how it fits into a frontend workflow.

What Are Google Stitch Skills?

google-labs-code/stitch-skills is a collection of plugins and skills that follows the Agent Skills open standard and lets coding agents use Google Stitch design capabilities.

It is not a standalone UI editor or the Stitch web product itself. It is better understood as a workflow layer connecting a coding agent, Stitch MCP, and Google Stitch:

Coding Agent
    ↓
Stitch MCP
    ↓
Google Stitch
    ↓
Design, prototype, and code workflows

The current GitHub README states that these skills require Stitch MCP to be configured and running first. Copying the skill files alone does not provide design generation or bypass Stitch authentication and environment setup.

Note: The repository describes itself as a Google Labs-related open-source project, not an officially supported Google product. Use the current repository README and Stitch MCP documentation as the source of truth.

What Can Stitch Skills Do?

The repository is currently organized around three main plugins:

Plugin	Main purpose	Representative skills
`stitch-design`	Generate, import, and manage Stitch designs	`generate-design`, `code-to-design`, `manage-design-system`
`stitch-build`	Turn designs into frontend implementations	`react-components`, `react-native`, `shadcn-ui`, `remotion`
`stitch-utilities`	Prompt, design-spec, and workflow utilities	`enhance-prompt`, `design-md`, `stitch-loop`, `taste-design`

The repository has also recently added site-md-related functionality for generating project-level website constitutions. Check the GitHub README and the latest contents of the plugins/ directory before installing because the skill set continues to evolve.

`stitch-design`: From Requirements to Designs

`generate-design`

generate-design lets an agent generate new screens, edit existing screens, or create design variants. For example:

Make a responsive analytics dashboard for a small SaaS team.
Include KPI cards, a weekly revenue chart, recent activity,
and a clear action for inviting a teammate.
Use a compact desktop layout and bottom navigation on mobile.

It is useful for exploring product directions quickly, but it does not replace reviewing page states, business rules, or interactions.

`code-to-design`

code-to-design brings existing frontend code such as React or Vue back into Stitch:

Upload the frontend code at /src/pages/dashboard
into a Stitch project named "Analytics Dashboard Redesign".
Identify the navigation hierarchy, typography scale,
spacing system, color roles, and reusable card patterns.

It is useful when:

An old project has no complete design file.
Multiple screens do not share a consistent visual language.
You want to explore a new visual direction before changing code.
You want to extract a design system from an existing implementation.

It primarily extracts interface structure and visual signals. It does not automatically understand the full business logic, so permissions, data fetching, validation, and complex interactions still need developer review.

`manage-design-system`

This skill uploads and applies design systems so multiple screens can share colors, typography, spacing, and component rules. It is commonly used together with DESIGN.md.

`stitch-build`: From Designs to React Components

`react-components`

react-components converts Stitch screens into React component systems. A safer prompt should explicitly preserve the existing business code:

Convert the selected Stitch screens into React components.
Use the existing routing and data-fetching patterns.
Reuse the project's UI primitives and keep design tokens centralized.
Do not add mock business logic or replace existing API calls.

After generation, integrate the result in this order:

Stitch components
    ↓
Review structure and styling
    ↓
Connect real data
    ↓
Add loading / empty / error states
    ↓
Check responsive behavior and accessibility
    ↓
Run lint, tests, and the production build

`react-native`, `shadcn-ui`, and other skills

react-native: Convert Stitch HTML designs into React Native components.
shadcn-ui: Implement shadcn/ui components and data interfaces in a project.
react-vite-dashboard: A workflow for React + Vite dashboards.
remotion: Generate product walkthrough videos from Stitch projects.

These skills assist the workflow; they do not mean generated code can be shipped without review.

`stitch-utilities`: Design Context and Prompt Utilities

`enhance-prompt`

This skill expands a vague UI request into a prompt that is more useful for Stitch. For example, it can turn:

Make a settings page.

into a complete request that includes the user goal, information hierarchy, device targets, states, and visual constraints.

`design-md`

design-md analyzes a Stitch project and generates a DESIGN.md. This file can document:

Color roles and usage contexts
Type hierarchy and information density
Spacing, radius, and elevation
Button, card, input, and navigation rules
Responsive behavior and accessibility requirements

For example:

# Design System

## Colors

Primary: #2563EB — used for primary actions and key links
Background: #F8FAFC
Foreground: #0F172A

## Components

Button: 8px radius, solid primary color for the main action
Card: 12px radius, subtle border, no heavy shadow

The value of DESIGN.md is not only storing color values. It tells an agent when to apply each rule. It is best understood as a design-context file, not a formal industry standard uniformly supported by every design tool.

`stitch-loop` and `taste-design`

stitch-loop: Organizes multi-page design, build, validation, and the next iteration into a loop.
taste-design: Generates more opinionated design rules to reduce visual drift between screens.

If you only need to generate one screen, you do not need to install every plugin. Selecting skills based on the task usually makes dependencies and outputs easier to control.

How to Install Google Stitch Skills

Claude Code

The current GitHub README shows this project-level installation command:

npx plugins add google-labs-code/stitch-skills \
  --scope project \
  --target claude-code

Cursor

npx plugins add google-labs-code/stitch-skills \
  --scope workspace \
  --target cursor

Codex

Codex can add the Stitch Skills marketplace and then install the plugins you need:

codex plugin marketplace add google-labs-code/stitch-skills --ref main

OpenCode

OpenCode does not use the Claude Code or Codex marketplace format. Skills must be copied manually:

mkdir -p .opencode/skills
cp -R plugins/stitch-design/skills/generate-design \
  .opencode/skills/generate-design

The README also notes that OpenCode requires a lowercase kebab-case Skill name matching the directory name. You must also configure Stitch MCP in opencode.json.

A Complete Code-to-Design Workflow

The following example uses an existing SaaS dashboard. According to the current code-to-design documentation, you need either a running local development server or a build directory containing index.html and its assets.

Start the project and confirm that the target screen is accessible:

npm install
npm run dev

Assume the page is available at:

http://localhost:5173/dashboard

If the page requires authentication, APIs, or runtime data, prepare a stable demo account or mock data first. Otherwise the imported result may contain only a loading state.

Step 1: Configure MCP and Install Skills

Complete authentication and environment setup using the Stitch MCP setup documentation, then install the Skill you need. For Claude Code:

npx plugins add google-labs-code/stitch-skills \
  --scope project \
  --target claude-code

Installing the Skills and connecting to Stitch are separate steps. The Skill files do not replace MCP or bypass Stitch account and authentication requirements.

Step 2: Define Project Constraints

Before invoking the agent, document what must not change:

Keep existing routes and API contracts.
Keep data shapes and business logic.
Redesign only Dashboard, Analytics, and Settings.
Let the developer reconnect real data after components are generated.

This prevents “redesign” from being interpreted as “rewrite the application.”

Step 3: Import Existing Code

Use the stitch::code-to-design skill.

Convert the running frontend at http://localhost:5173/dashboard
into a Stitch design in the project named "Analytics Dashboard Redesign".

Keep the existing routes, API contracts, and business behavior unchanged.
Extract the navigation hierarchy, typography scale, spacing system,
color roles, card patterns, table patterns, and responsive behavior.

The Skill chains three workflows:

Use extract-static-html to extract self-contained HTML.
Use extract-design-md to extract a design system from source and theme configuration.
Use upload-to-stitch to upload the HTML and design system to the target Stitch project.

Step 4: Review `DESIGN.md`

Review .stitch/DESIGN.md and make sure it describes cross-screen rules rather than accidental details from one page. Check color roles, typography, spacing, radius, component rules, responsive behavior, and accessibility requirements.

If the project does not have a Design System, use manage-design-system before generate-design. For new screens, prompts should focus on structure, content, and interaction instead of repeating every color, font, and theme token, which can conflict with the project-level system.

Step 5: Generate and Compare Directions

Generate three redesign directions:
1. Dense enterprise dashboard
2. Calm modern SaaS dashboard
3. Mobile-first analytics dashboard

Keep the existing information hierarchy and primary user tasks.
Focus the comparison on layout and navigation.

Start with three variants. The current Skill supports controlling variants with variantCount, creativeRange, and aspects. After choosing a direction, prefer focused edits over repeatedly generating from scratch.

Step 6: Download and Review HTML and Screenshots

After generation or editing, keep the design outputs in the project:

.stitch/
├── designs/
│   ├── dashboard.html
│   ├── dashboard.png
│   └── analytics.png
├── DESIGN.md
└── metadata.json

Open every screenshot and review desktop and mobile layouts, text overflow, navigation, primary actions, charts, tables, and empty states. Do not rely only on the agent's text description.

Step 7: Generate React Components

Convert all approved screens in the Stitch project
"Analytics Dashboard Redesign" into modular React components.

Requirements:
- preserve the existing routes and data-fetching logic
- reuse existing UI primitives where possible
- use the current DESIGN.md as the visual source of truth
- replace href="#" placeholders with real application routes
- create separate components for cards, tables, navigation, and filters
- do not add mock business logic

The current react-components documentation also requires:

Retrieve every Screen through MCP.
Use the repository's fetch-stitch.sh to download current HTML and screenshots.
View every screenshot for a visual audit.
Update .stitch/metadata.json with the project, Screens, dimensions, and last sync time.
Extract colors, fonts, spacing, radius, and typography tokens from each HTML tailwind.config.
Break cards, tables, navigation, and filters into independent components.

Do not read stale .stitch/designs/*.html instead of fetching current Screens through MCP, and do not reuse a style-guide.json left over from another project.

Step 8: Reconnect and Validate in the Real Project

Do not overwrite production code directly. Merge the generated result in a branch or temporary directory:

Generated components
  ↓
Review component boundaries and design tokens
  ↓
Reconnect real routes and data
  ↓
Add loading / empty / error states
  ↓
Check hrefs, permissions, forms, and keyboard behavior
  ↓
Run lint, tests, and the build

At minimum, verify that every href="#" is replaced with a real route, the logo/sidebar/bottom navigation work, components have clear Props types, and no hardcoded colors bypass the design tokens.

The workflow can be summarized as:

Existing React / Vue project
    ↓
code-to-design
    ↓
Import into Stitch
    ↓
Generate multiple design directions
    ↓
Extract DESIGN.md
    ↓
react-components
    ↓
Merge back into the existing project

You can break it into five steps:

Step 1: Prepare Existing Screens

Select one screen or a group of screens such as Dashboard, Analytics, and Settings. First document the routes, APIs, and business logic that must remain unchanged.

Step 2: Import into Stitch

Ask the agent to extract the navigation hierarchy, color roles, type hierarchy, spacing, and repeated components from the existing screens.

Step 3: Explore New Directions

Generate three redesign directions:
1. Dense enterprise dashboard
2. Calm modern SaaS dashboard
3. Mobile-first analytics dashboard

Keep the existing information hierarchy and primary user tasks.

Step 4: Freeze the Design Rules

Create a DESIGN.md for the selected direction.
Document color roles, typography, spacing, card treatment,
button hierarchy, responsive behavior, and accessibility rules.

Step 5: Generate and Review Components

Convert the selected screens into React components.
Preserve existing routes and data-fetching logic.
Use the generated DESIGN.md as the visual source of truth.

Stitch Skills and Stitch MCP

Name	Role	Works alone?
Stitch	Google's AI interface design product	No; the product provides the design capability
Stitch MCP	Connection layer for external agents	Requires setup and authentication
Stitch Skills	Design, build, and utility workflows	Depends on Stitch MCP
Coding Agent	Understands tasks and invokes skills	Requires a compatible Agent Skills tool

Do not treat stitch-skills as a React component library or as a local generator that needs no account or configuration.

Frequently Asked Questions

Is Stitch Skills an official Google product?

No. The GitHub README explicitly says that the repository is not an officially supported Google product. It is a Google Labs-related open-source Agent Skills project, so use the current repository documentation as the source of truth.

Do I need to configure Stitch MCP first?

Yes. The README lists Stitch MCP as a prerequisite. Without MCP, authentication, and the required environment setup, the skills cannot call Stitch.

Can generated React code go directly to production?

No. Review APIs, permissions, state handling, accessibility, responsive behavior, performance, and security first.

Do I have to use Claude Code?

No. The current README lists Codex, Antigravity, Gemini CLI, Claude Code, Cursor, and OpenCode. Installation differs by tool, and OpenCode requires manual installation.

Do I need every Skill?

No. Start with skills relevant to the task, such as generate-design, code-to-design, or react-components. Some skills have dependencies, so read the repository guidance before installing selectively.

Summary

The main purpose of Google Stitch Skills is not to generate one attractive screen. It connects Stitch to an AI coding workflow:

Requirements
  ↓
Explore designs in Stitch
  ↓
Code-to-Design / DESIGN.md
  ↓
React or React Native components
  ↓
Implement and validate with a coding agent
  ↓
Iterate

If you only want to explore UI designs, use Stitch directly. If you already use Claude Code, Cursor, Codex, or OpenCode and want an agent to participate in design, design systems, and implementation, stitch-skills becomes useful.