google-labs-code/stitch-skills — explained in plain English
Analysis updated 2026-05-18
Convert an existing web app's frontend code into a Stitch design automatically.
Generate new UI screens or variants from a text description inside your coding agent.
Turn a finished Stitch design into working React or React Native components.
Create a walkthrough video of a Stitch project using the built-in Remotion skill.
| google-labs-code/stitch-skills | electron/fiddle | twbs/icons | |
|---|---|---|---|
| Stars | 7,764 | 7,731 | 8,009 |
| Language | TypeScript | TypeScript | TypeScript |
| Setup difficulty | moderate | easy | easy |
| Complexity | 3/5 | 2/5 | 1/5 |
| Audience | developer | developer | designer |
Figures from each repo's GitHub metadata at analysis time.
Requires the separate Stitch MCP server to be set up first before any skill works.
stitch-skills is a collection of ready made skills and plugins that connect AI coding agents to Google Stitch, a design tool. It follows an open standard called Agent Skills, which means the same skill files work across several different coding agents, including Codex, Antigravity, Gemini CLI, Claude Code, Cursor, and OpenCode. The skills are organized into three groups. The design group covers converting existing frontend code into a Stitch design, generating new screens from text or images, managing a shared design system, extracting a design system document from source code, pulling a static HTML snapshot of a running web app, and uploading local assets into a Stitch project. The build group covers turning Stitch screens into working code, including React components, React Native components with proper styling and navigation, walkthrough videos made with a tool called Remotion, and starter setups using shadcn or a React plus Vite dashboard template. A third group holds smaller utility skills. Before any of this works, your coding agent needs the separate Stitch MCP server configured and running, since these skills depend on it to actually talk to Stitch. Installing depends on which agent you use. Codex users add a plugin marketplace pointing at this repository, then install the specific plugin groups they want. Claude Code and Cursor users can install the whole thing with a single command through a tool called npx plugins. OpenCode does not support that installer, so its users copy the skill folders they need directly into a local skills folder and manually register the Stitch MCP server in their configuration file. Each skill entry in the README includes example prompts, such as asking the agent to upload a folder of frontend code into a named Stitch project, or asking it to generate several design variants of a screen in dark mode. The project is written mainly in TypeScript and, with over 7,700 stars, is by far the most popular repository in this batch.
A large library of Agent Skills that connect coding agents like Claude Code, Cursor, and Gemini CLI to Google Stitch, covering design creation, code generation, and asset uploads.
Mainly TypeScript. The stack also includes TypeScript, MCP, React.
Setup difficulty is rated moderate, with roughly 30min to a first successful run.
Mainly developer.
This repo across BitVibe Labs
double-check against the repo, no cap.