Skip to content
csl
All skills

Stitch Skills

Design

Google Stitch agent skills for AI UI design: generate screens, convert designs to React, manage design systems.

by google-labs-codegoogle-labs-code/stitch-skills
Stars8.5k
Forks1k
Watchers85
Open issues17
LicenseApache-2.0
Last push2 months ago

Install

install

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

Update

update

$ /plugin marketplace update stitch-skills

Then run /reload-plugins. Official marketplaces auto-update at startup.

When to use it

  • You use Google Stitch to design UIs and want your coding agent to drive it (generate screens from text/images, manage themes)
  • You want to convert existing frontend code or static HTML into Stitch designs, or turn Stitch designs into React / React Native components
  • You want to extract a DESIGN.md design system from a Stitch project or enhance vague UI prompts into detailed briefs
  • You already have the Stitch MCP server configured and want a ready-made skill suite around it

Commands & flags

stitch-design
Code-to-design, generate-design, manage-design-system, extract-design-md, upload-to-stitch.
stitch-build
Emit React, React Native, Remotion walkthrough videos, and shadcn/ui code.
stitch-utilities
design-md, enhance-prompt, stitch-loop, and taste-design helpers.
Stitch MCP server
Prerequisite: must be configured and running for the skills to do the actual work.

How to use it

Install the plugin suite into Claude Code (project-scoped):

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

Prerequisite: the Stitch MCP server must be configured and running — the skills call it to do the actual design/generation work. The collection follows the Agent Skills open standard (Claude Code, Codex, Gemini CLI, Cursor) and ships three packages:

  • stitch-design — code-to-design, generate-design, manage-design-system, extract-design-md, upload-to-stitch
  • stitch-build — react-components, react-native, remotion (walkthrough videos), shadcn-ui
  • stitch-utilities — design-md, enhance-prompt, stitch-loop, taste-design

Once installed, invoke the relevant skill in conversation. For selective install, use npx skills add google-labs-code/stitch-skills.

Why it earns its place

A first-party Google Labs suite that turns Google Stitch's AI UI-design engine into agent-callable skills, covering the full loop: generate or import designs, manage a design system, and emit production React / React Native / shadcn/ui code plus Remotion walkthrough videos. Because it follows the Agent Skills open standard, the same skills work across Claude Code, Codex, Gemini CLI, and Cursor.

Try it

claude

> Generate a Stitch design for a pricing page, then convert the selected screen into React with shadcn/ui.