google-labs-codeOfficial·21 Agent Skills Included

stitch-skills

Turn text prompts and code into Stitch designs and production UI

Generates app screens in Google Stitch from text or images, edits designs, and manages shared design systems. Converts existing React, Vue, or Angular code into Stitch projects and back into production React, React Native, and dashboard components. Eliminates manual design handoff, inconsistent styling, and repetitive prompt writing with automated extraction and validation scripts.

8,235|1,114

↗

npx skills add google-labs-code/stitch-skills --all -g -y

All Skills in This Repository (21)

Pure Emerald Level Indicators

📦 In Repo

google-labs-code

shadcn-ui

Streamline shadcn/ui component discovery, installation, and customization in React projects.

design-md

Analyze Stitch project assets to generate a DESIGN.md design system document.

react:components

Convert Stitch designs into modular React components with AST-based validation.

enhance-prompt

...

stitch-loop

Generate and integrate Stitch pages through a baton-passing loop.

remotion

Automate walkthrough video creation from Stitch designs using Remotion.

stitch::generate-design

Generate and edit UI screens from text prompts or images using Stitch MCP.

stitch::code-to-design

Convert frontend code from React, Angular, or Vue apps into Stitch Designs.

stitch::extract-design-md

Extract a design system document from frontend source code without building the app.

stitch::manage-design-system

Create, update, and apply design systems in Stitch projects via MCP tools.

stitch::upload-to-stitch

Upload images, HTML, and markdown files to Stitch projects via the BatchCreateScreens API.

site-md

Generates a structured SITE.md project constitution from requirement briefs for the Stitch Build Loop.

Official

Intermediate

Frequently Asked Questions

FAQPage Schema

How to install stitch-skills?▼

Run `npx skills add google-labs-code/stitch-skills --all -g -y` in your terminal to install the full suite globally.

What does stitch-skills do?▼

It lets your AI agent generate and edit UI screens in Google Stitch, extract design systems from code, and convert designs into React, React Native, and dashboard components.

Can I convert my existing frontend code into a Stitch design?▼

Yes. The code-to-design skill extracts static HTML and a design system from your React, Vue, or Angular app and uploads it to a Stitch project automatically.

Does stitch-skills work with Claude Code and Cursor?▼

Yes. All skills follow the open Agent Skills standard and work with Claude Code, Cursor, Codex, Gemini CLI, and other compatible agents.

Do I need anything else to run these skills?▼

Yes. You must configure the Stitch MCP server with your API key first, following the setup guide at stitch.withgoogle.com/docs/mcp/setup.