google-labs-code/stitch-skills

Developer Tools

Agent skills that let coding assistants drive Google Stitch to turn frontend code into designs, and designs back into React.

8,589
1,052
TypeScript
Apache-2.0
9 months old

Worth a look if you already use Google Stitch and a coding agent that supports Agent Skills; otherwise the MCP prerequisite is the real barrier.

The problem

Turning an existing frontend into a Stitch design, or pushing Stitch screens back into a React codebase, usually means manually exporting HTML, re-describing the design system in the Stitch UI, uploading files and then hand-writing components that match the tokens. Each hand-off is a place where the design drifts from the code. This project packages those steps as agent skills: you ask the agent in natural language, and the skill orchestrates the Stitch calls and validation for you.

What's different

The library follows the Agent Skills open standard, which is why the same skill folders can be dropped into Codex, Antigravity, Gemini CLI, Claude Code, Cursor or OpenCode rather than being tied to one vendor's plugin format. The skills are grouped by stage: design-side workflows such as converting frontend code into a Stitch design, build-side skills such as converting screens into React component systems with design-token validation, and utilities like generating a DESIGN.md description of a project. The practical benefit is that the agent handles the mechanical translation, including checking token consistency, while the prompts stay short.

The trade-off is coupling. The skills are not a standalone CLI or library; they are orchestration around the Stitch MCP server, so the useful behaviour depends on that server being registered and authenticated in the agent's environment. The README also warns that skills often depend on each other, so cherry-picking a single skill without its dependencies may leave the workflow broken. Install paths differ meaningfully: plugin installs are suggested for Codex, Claude Code, Cursor and others, while OpenCode needs manual copying into a discoverable skills directory.

Who should try it

A good fit is a team already using Stitch for UI exploration and a supported coding agent, who wants to move an existing dashboard into Stitch or generate React components from approved screens without redoing the token mapping by hand. A poor fit is someone who only wants component generation from screenshots or a design file and does not use Stitch at all, since the MCP setup is mandatory and the skills revolve around Stitch project operations. Someone on OpenCode can still use the library via the manual skill-copy path, but should expect more setup than the one-line plugin commands.

Requirements and limitations

The first requirement is a configured Stitch MCP server with credentials in the agent environment, per the Stitch MCP setup instructions; without it the skills have nothing to call. Second, the agent must support the Agent Skills layout, and the README lists the compatible agents rather than claiming universal support. Third, selective installs need their dependencies included, so a minimal install can fail in ways a full plugin suite would not. Ongoing upkeep means keeping the skill folders and the MCP setup in step, especially when Stitch's API or the agent's plugin layout changes.

HotRepo's take

HotRepo recorded 8,584 stars on 2026-10-25, up 21 that day, one of a single daily-board snapshot; with no comparable history, persistence cannot be judged from these signals. The repository itself dates to 2026-01-16. Since the value hinges on the MCP connection, check the Stitch MCP setup docs for the supported agents and credential requirements before installing, and review the project README for skill dependencies if you plan a selective install.

Written by AI from the project's README, updated October 25, 2026. The project's own docs are the source of truth.