Skip to main content
hc
Submit
skillsSource-backedReview first Safety ✓ Privacy ✓

Google Stitch Design Skills

Agent Skills and plugin packs for Google Stitch design workflows, including code-to-design, design generation, design-system extraction, React and React Native conversion, shadcn/ui guidance, Remotion walkthroughs, and prompt enhancement.

by Google Labs Code·added 2026-06-18·
Claude CodeCodexWindsurfGeminiCursorCLI
HarnessClaude CodeCodexWindsurfGeminiCursorCLI
Level:advancedType:generalVerified:validated
Review first — review before installing

Open the source and read safety notes before installing.

Safety notes

  • Several skills can scan local frontend source, extract static HTML, upload assets, create Stitch designs, edit screens, generate variants, or produce code from Stitch projects.
  • Review generated React, React Native, Remotion, and shadcn/ui output before merging it into production.
  • The upstream README says the project is not an officially supported Google product.
  • Selective installs may require dependent Stitch skills; follow the upstream dependency notes when installing individual skills.
  • Prefer reviewed commits or pinned refs for production plugin installs instead of blindly tracking a mutable default branch.

Privacy notes

  • Frontend source code, static HTML, screenshots, images, design-system files, project IDs, prompt text, and generated UI assets may be sent to Stitch through the configured MCP server.
  • Do not upload proprietary product designs, customer data, unreleased brand assets, or credentials unless your organization approves that Stitch workflow.
  • Keep Stitch credentials, MCP environment variables, and project identifiers out of prompts, public issues, screenshots, and committed configuration.

Prerequisites

  • Stitch MCP server configured and running in the target agent environment.
  • Node.js and npx for the `skills` or `plugins` installer commands.
  • A compatible coding agent such as Claude Code, Codex, Cursor, Gemini CLI, or Antigravity.
  • Access to the Stitch project, credentials, and environment variables required by the Stitch MCP setup.
  • Permission to upload local design assets, frontend code snapshots, HTML exports, or design-system files into Stitch.

Schema details

Install type
package
Reading time
5 min
Difficulty score
62
Troubleshooting
Yes
Breaking changes
No
Source repository stats
Scope
Source repo
Package metadata
Skill and platform metadata
Skill type
general
Skill level
advanced
Verification
validated
Verified at
2026-06-18
Retrieval sources
https://github.com/google-labs-code/stitch-skillshttps://raw.githubusercontent.com/google-labs-code/stitch-skills/main/README.mdhttps://stitch.withgoogle.com/docs/mcp/setup
Tested platforms
ClaudeCodexCursorGeminiAntigravity
PlatformSupportInstall path
claude-codeNative.claude/skills/<skill-name>/SKILL.md
codexNative.agents/skills/<skill-name>/SKILL.md
windsurfNative.windsurf/skills/<skill-name>/SKILL.md
geminiNative.gemini/skills/<skill-name>/SKILL.md or .agents/skills/<skill-name>/SKILL.md
cursorAdapter.cursor/rules/<skill-name>.mdc
cliManualAGENTS.md or tool-specific context file
Tool listing metadata
Full copyable content
# Select skills interactively
npx skills add google-labs-code/stitch-skills

# Claude Code plugin install
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

# Codex marketplace setup
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

About this resource

Google Stitch Design Skills

Google Labs Code maintains stitch-skills, a library of Agent Skills and plugin packs for working with Stitch. The repository follows the Agent Skills open standard and is positioned for coding agents such as Codex, Antigravity, Gemini CLI, Claude Code, and Cursor.

The skills require the Stitch MCP server to be configured in the agent environment. Treat the skills as a design workflow layer over Stitch MCP, not as a standalone MCP server.

Plugin Packs

The repository groups skills into three plugin packs:

Pack Scope
stitch-design Code-to-design import, design generation, design-system management, static HTML extraction, and Stitch uploads
stitch-build React components, React Native conversion, Remotion walkthrough videos, and shadcn/ui guidance
stitch-utilities DESIGN.md generation, prompt enhancement, multi-page Stitch loops, and premium design standards

Included Skills

Design

  • stitch::code-to-design converts frontend code into a Stitch design through HTML extraction, design-system handling, and upload.
  • stitch::generate-design creates new screens, edits existing screens, and generates variants from text or images.
  • stitch::manage-design-system uploads a DESIGN.md file and applies themes to screens.
  • stitch::extract-design-md extracts a design system from frontend source.
  • stitch::extract-static-html produces self-contained static HTML snapshots from running web apps.
  • stitch::upload-to-stitch uploads local assets, mockups, or HTML to a Stitch project.

Build

  • react-components converts Stitch screens into React component systems with validation and design-token consistency.
  • react-native converts Stitch HTML into React Native components.
  • remotion generates walkthrough videos from Stitch projects.
  • shadcn-ui provides guidance for shadcn/ui integration and component builds.

Utilities

  • design-md analyzes Stitch projects and generates semantic DESIGN.md files.
  • enhance-prompt turns rough UI ideas into Stitch-optimized prompts.
  • stitch-loop generates multi-page websites from a single prompt with validation.
  • taste-design generates premium DESIGN.md standards for typography, color, and UI quality.

Installation

Install selectively with the skills CLI:

npx skills add google-labs-code/stitch-skills

Install plugin packs for Claude Code:

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

Install plugin packs for Cursor:

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

Add the Stitch marketplace for Codex:

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

After adding the marketplace, install any combination of stitch-design, stitch-build, and stitch-utilities.

Requirements

The upstream README says these skills require the Stitch MCP server to be configured and running in the agent environment. Follow the Stitch MCP setup docs for server registration, credentials, environment variables, and client configuration before invoking the skills.

Selective installs can have dependencies between Stitch skills. If installing only one skill, review its adjacent resources and the upstream dependency notes instead of assuming it runs independently.

Use Cases

  • Convert an existing frontend route into a Stitch design for redesign work.
  • Generate design variants for a mobile or web screen.
  • Extract a DESIGN.md system from a frontend codebase.
  • Upload static HTML, mockups, or local assets into a Stitch project.
  • Convert Stitch screens into React or React Native component systems.
  • Generate a Remotion walkthrough video for a Stitch project.
  • Turn vague UI requests into more precise Stitch prompts.

Safety and Privacy

These skills can read local frontend files, export static HTML, inspect design systems, upload assets, and ask Stitch MCP to create or update design projects. Review what files and project IDs the agent can access before running them in a private product repository.

Generated code and design assets should be reviewed before they are merged or published. The repository is hosted under google-labs-code, but the README states that it is not an officially supported Google product.

Source Review

Verified on 2026-06-18:

  • The upstream README describes stitch-skills as Agent Skills and plugins for Google Stitch that follow the Agent Skills open standard.
  • The README lists compatibility with Codex, Antigravity, Gemini CLI, Claude Code, and Cursor.
  • The README documents plugin packs named stitch-design, stitch-build, and stitch-utilities.
  • The README says the skills require Stitch MCP setup before use and warns that selective installs may need dependencies.
  • The repository is Apache-2.0 licensed and maintained under google-labs-code/stitch-skills.

Duplicate Check

No existing google-labs-code/stitch-skills, Google Stitch Skills, or Stitch Design Skills entry was found in content/skills.

#google-stitch#agent-skills#design#react#mcp

Source citations

Add this badge to your README

Show that Google Stitch Design Skills is listed on HeyClaude. Paste this Markdown into your README — it renders the badge and links back to this page.

Listed on HeyClaude
[![Listed on HeyClaude](https://heyclau.de/badge/skills/google-stitch-design-skills.svg)](https://heyclau.de/entry/skills/google-stitch-design-skills)

How it compares

Google Stitch Design Skills side by side with 3 alternatives on trust, install, platform support, and disclosed safety notes — all from reviewed registry metadata.

FieldGoogle Stitch Design Skills

Agent Skills and plugin packs for Google Stitch design workflows, including code-to-design, design generation, design-system extraction, React and React Native conversion, shadcn/ui guidance, Remotion walkthroughs, and prompt enhancement.

Open dossier 		Expo Skills

Official Expo AI agent skills for building, deploying, upgrading, observing, and debugging Expo and React Native apps with Expo Router, EAS, native modules, App Clips, Tailwind, native UI, and EAS Update insights.

Open dossier 		.NET Agent Skills

Microsoft .NET team skill marketplace for AI coding agents working on .NET, C#, ASP.NET Core, Blazor, MAUI, diagnostics, MSBuild, NuGet, upgrades, tests, AI workflows, RAG pipelines, and C# MCP servers.

Open dossier 		Google Agents CLI Skills

Google Agents CLI skill suite for coding agents that build, scaffold, evaluate, deploy, publish, and observe ADK agents on Gemini Enterprise Agent Platform, Agent Runtime, Cloud Run, GKE, and Google Cloud.

Open dossier
Trust
Install riskReview firstReview firstReview firstReview first
Notes Safety ✓ Privacy ✓ Safety ✓ Privacy ✓ Safety ✓ Privacy ✓ Safety ✓ Privacy ✓
Categoryskillsskillsskillsskills
Sourcesource-backedsource-backedsource-backedsource-backed
AuthorGoogle Labs CodeExpo.NET Team at MicrosoftGoogle
Added2026-06-182026-06-182026-06-182026-06-18
Platforms
Claude CodeCodexWindsurfGeminiCursorCLI
Claude CodeCodexWindsurfGeminiCursorCLI
Claude CodeCodexWindsurfGeminiCursorCLIVS Code
Claude CodeCodexWindsurfGeminiCursorCLI
Source repo————
Safety notes✓Several skills can scan local frontend source, extract static HTML, upload assets, create Stitch designs, edit screens, generate variants, or produce code from Stitch projects. Review generated React, React Native, Remotion, and shadcn/ui output before merging it into production. The upstream README says the project is not an officially supported Google product. Selective installs may require dependent Stitch skills; follow the upstream dependency notes when installing individual skills. Prefer reviewed commits or pinned refs for production plugin installs instead of blindly tracking a mutable default branch.✓Expo Skills can guide agents through native project changes, EAS builds, store submissions, EAS Update rollouts, and EAS Observe queries; those actions can affect real apps and users. Do not let an agent trigger EAS builds, submissions, rollouts, or production updates without reviewing project, profile, branch, runtime version, and account context. Native modules, config plugins, App Clips, brownfield integration, and prebuild steps can modify iOS and Android project files; inspect diffs before committing. Follow the skill's Expo Go-first guidance before creating custom native builds unless custom native code or platform targets require them.✓.NET build, test, upgrade, package, template, publish, and migration tasks can modify project files, lock files, generated code, packages, app settings, and deployment artifacts. Diagnostics skills may suggest collecting traces, dumps, counters, crash data, MSBuild binlogs, or performance profiles; collect those artifacts only with explicit approval and storage controls. MCP server skills can expose local code, files, APIs, credentials, or production services as callable tools; review tool descriptions, parameter validation, authorization, and transport choice before connecting clients. NuGet and publish workflows can push packages or artifacts to public or private feeds; verify package IDs, versions, API keys, feed targets, and release policy before publishing. Upgrade and modernization guidance should be verified against each application's framework support window, deployment target, package compatibility, and rollback plan.✓The skills intentionally guide agents through scaffold, eval, deploy, publish, CI/CD, infrastructure, datastore, and observability workflows that can create or modify cloud resources. Deployment and infrastructure commands may provision service accounts, IAM bindings, Terraform resources, Cloud Run services, Agent Runtime deployments, GKE resources, Artifact Registry images, Secret Manager entries, and CI/CD runners. The workflow skill explicitly requires clarifying goals and writing a spec before scaffolding a new project; skipping that step can create wrong infrastructure or unsafe agent behavior. Evaluation guidance may invoke LLM-as-judge, synthetic datasets, and prompt optimization; treat cost, data exposure, and nondeterminism as production concerns. Do not run deploy, publish, infrastructure, datastore, or CI/CD commands without explicit human approval and a known Google Cloud target.
Privacy notes✓Frontend source code, static HTML, screenshots, images, design-system files, project IDs, prompt text, and generated UI assets may be sent to Stitch through the configured MCP server. Do not upload proprietary product designs, customer data, unreleased brand assets, or credentials unless your organization approves that Stitch workflow. Keep Stitch credentials, MCP environment variables, and project identifiers out of prompts, public issues, screenshots, and committed configuration.✓Expo and EAS work can involve bundle identifiers, project IDs, app metadata, Apple and Google credentials, service account files, release channels, crash metrics, user counts, update payload sizes, screenshots, and build logs. Keep Expo tokens, Apple credentials, Google service account JSON, signing keys, keystore files, secrets, private crash data, and unpublished app metadata out of prompts, public PRs, screenshots, and logs. The Expo plugin can bundle MCP configuration; connected agents may access docs, EAS services, simulator screenshots, build status, workflow state, or update health depending on granted permissions.✓.NET repositories may contain connection strings, appsettings secrets, user secrets, certificates, environment variables, telemetry keys, logs, traces, dumps, package credentials, and production data. MSBuild binlogs, crash dumps, profiler output, and test artifacts can contain source paths, dependency graphs, request data, exception payloads, configuration values, and environment details. MCP servers created with these skills may forward prompts and tool inputs to local processes, HTTP services, databases, cloud APIs, or third-party model providers depending on the implementation. Keep private NuGet credentials, signing keys, deployment secrets, customer data, dumps, and proprietary source out of public prompts, issues, pull requests, and shared artifacts.✓Agents CLI projects can contain Google Cloud credentials, AI Studio keys, Secret Manager names, service account emails, project IDs, regions, Terraform state, eval traces, prompts, tool outputs, logs, traces, user data, embeddings, and datastore contents. Eval artifacts and observability exports can include full prompts, tool calls, responses, failure rationales, trace IDs, and private application data. Publishing to Gemini Enterprise, deploying to Agent Runtime, Cloud Run, or GKE, and enabling analytics can move agent traffic into Google Cloud services subject to separate terms and access controls. Keep project IDs, credentials, Terraform state, traces, eval datasets, user data, private prompts, and secret names out of public issues, PRs, examples, and screenshots.
Prerequisites
  • Stitch MCP server configured and running in the target agent environment.
  • Node.js and npx for the `skills` or `plugins` installer commands.
  • A compatible coding agent such as Claude Code, Codex, Cursor, Gemini CLI, or Antigravity.
  • Access to the Stitch project, credentials, and environment variables required by the Stitch MCP setup.
  • Claude Code, Codex, Cursor, or another Agent Skills-compatible AI coding agent.
  • Expo or React Native project when applying project-specific skills.
  • Expo CLI, EAS CLI, simulator/device, or Expo account access when building, deploying, observing, or querying EAS state.
  • Current Expo docs, Expo CLI help, EAS CLI help, or Expo MCP access for exact commands and service behavior.
  • An AI coding assistant or skill host that supports Agent Skills, plugin marketplaces, or direct skill installation.
  • .NET SDK and project-local build/test tooling appropriate for the repository being edited.
  • For MCP server work, the official C# MCP SDK, MCP project templates, and a target transport choice such as stdio or HTTP.
  • For diagnostics, permission to collect traces, dumps, logs, counters, binlogs, or test output from the target environment.
  • Coding assistant or skill host that can consume Agent Skills, or a local terminal where `uvx google-agents-cli setup` can install the CLI plus skills.
  • Python 3.11+, uv, and Node.js for the documented setup flow.
  • Google Cloud project, billing, credentials, APIs, IAM, region, and deployment target decisions when moving beyond local development.
  • Clear agent requirements before scaffolding: purpose, external APIs, tools, safety constraints, data sources, and deployment preference.
Install
npx skills add google-labs-code/stitch-skills
npx skills add expo/skills
codex plugin marketplace add dotnet/skills
npx skills add google/agents-cli
Config————
Citations
ClaimUnclaimedUnclaimedUnclaimedUnclaimed

Signals

Loading live community signals…

More like this, weekly

A short, calm digest of reviewed Claude resources. Unsubscribe any time.