SkillFoxx

Type a name, a task or a service

Stitch Design Skills

Three skill plugins for Google Stitch: screen generation, code to design and React builds from mockups

PluginEditors’ pickMedium risk

google-labs-code/stitch-skillsAuthor: Google Labs

Install

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

This is third-party code. Review the repository files before installing.

What it does

The Google Labs set runs on top of the Stitch MCP server. The stitch-design plugin generates and edits screens from text or images, moves existing frontend code into a Stitch project, extracts DESIGN.md from code and manages design systems. stitch-build turns Stitch screens into React, React Native or a Vite dashboard, helps with shadcn/ui and renders a project walkthrough video with Remotion. stitch-utilities sharpens prompts, writes DESIGN.md for a project and builds a multi-page site from one request.

Who it is for. For designers and frontend developers who design screens in Google Stitch and turn them into code.

Good fit when

  • You want to generate Stitch screens or variants from the agent
  • You need to turn Stitch mockups into React or React Native components
  • You need to extract a design system from existing code into DESIGN.md

Not a fit when

  • You do not use Google Stitch, since most skills need its MCP server
  • Your design lives in Figma and you are not moving it

Example request

Generate three variants of the home screen in Stitch with dark mode and a dense layout

Limitations

Requires a configured Stitch MCP server and a Google account. Skills depend on each other, so selective installs must include dependencies. OpenCode needs stitch::... skill names renamed. Not an officially supported Google product.

How to disable. Remove the stitch-design, stitch-build and stitch-utilities plugins through the agent's plugin manager or delete the skill folders from the project.

Security check

  • Skills run download scripts and write files into the project
  • Code and assets are uploaded to the Stitch cloud service

README in short

The README covers adding the marketplace in Codex, npx plugins commands for Claude Code and Cursor, and manual OpenCode setup with a remote MCP config snippet. Each of the three plugins has a table of skills with sample prompts. It describes the skill layout: SKILL.md, scripts, resources and examples. Apache-2.0 licensed.

FAQ

Can I install only some skills?

Yes, with npx skills add google-labs-code/stitch-skills, but keep track of dependencies between skills.

Which agents are supported?

Codex, Antigravity, Gemini CLI, Claude Code and Cursor; OpenCode needs a manual install.

Editors’ pick

Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server

PluginMedium risk142.3K
Editors’ pick

Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules

SkillMedium risk123.8K
Editors’ pick

A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells

SkillHigh risk68.1K
Editors’ pick

Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys

SkillMedium risk31.2K