Repolode
Submit
google-labs-code

google-labs-code/stitch-skills

A collection of Agent Skills and plugins that let coding agents work with Google Stitch design projects through the Stitch MCP server.

Open-source alternative to:Figma

View on GitHubWebsite
Stars
8,546
Forks
1,115
Open issues
17
Last commit
2 months ago

What is it?

Stitch Skills is a set of agent skills for Google Stitch, a design tool. Each skill is a folder of instructions that a coding agent such as Claude Code, Cursor, Codex, or Gemini CLI can load to carry out a specific Stitch workflow. The skills require the Stitch MCP server to be configured in the agent's environment.

The skills are grouped into three plugins: stitch-design covers generating and editing screens, managing design systems, extracting DESIGN.md files from source code, and uploading assets; stitch-build covers converting Stitch screens into React, React Native, or React + Vite dashboard code, plus shadcn/ui guidance and Remotion walkthrough videos; stitch-utilities covers prompt enhancement, DESIGN.md generation, and multi-page website generation.

Skills can be installed through the Codex marketplace, the npx plugins or skills commands, or copied manually for OpenCode. Some skills depend on one another, so selective installs need their dependencies included.

Key features

  • 01Generates new Stitch screens from text or images and edits existing ones.
  • 02Extracts DESIGN.md design-system files from frontend source code.
  • 03Converts Stitch screens into React, React Native, or React + Vite dashboard code.
  • 04Uploads local HTML, images, and mockups to Stitch projects.
  • 05Installs into Claude Code, Cursor, Codex, Gemini CLI, and other Agent Skills-compatible agents.

Use cases

  • Turning an existing frontend codebase into a Stitch design for review and iteration.
  • Generating React components from Stitch screens while keeping design tokens consistent.
  • Producing a DESIGN.md that captures a project's visual system for other agents to follow.
  • Creating a walkthrough video of a Stitch project.

Quick start

  1. 1

    Add the Stitch Skills marketplace in Codex via CLI

    codex plugin marketplace add google-labs-code/stitch-skills --ref main --sparse .agents/plugins --sparse plugins/stitch-design --sparse plugins/stitch-build --sparse plugins/stitch-utilities
  2. 2

    Or install skills selectively with npx

    npx skills add google-labs-code/stitch-skills

Things to know

  • Requires a configured Stitch MCP server and credentials before the skills work.
  • This is not an officially supported Google product.

Topics

#ai-agents#design-to-code#mcp#react#design-system#coding-agents#ui-generation

FAQ

What is stitch-skills?
A collection of Agent Skills and plugins that let coding agents work with Google Stitch design projects through the Stitch MCP server. Stitch Skills is a set of agent skills for Google Stitch, a design tool. Each skill is a folder of instructions that a coding agent such as Claude Code, Cursor, Codex, or Gemini CLI can load to carry out a specific Stitch workflow. The skills require the Stitch MCP server to be configured in the agent's environment.
Is stitch-skills free to use? What license does it have?
stitch-skills is open source under the Apache-2.0 license. Check the license terms before using it in commercial products.
Is stitch-skills still maintained?
Updated within 6 months. The last commit to stitch-skills was on Aug 17, 2026.
What can I use stitch-skills for?
Turning an existing frontend codebase into a Stitch design for review and iteration. Generating React components from Stitch screens while keeping design tokens consistent. Producing a DESIGN.md that captures a project's visual system for other agents to follow. Creating a walkthrough video of a Stitch project.
How do I install stitch-skills?
Add the Stitch Skills marketplace in Codex via CLI: codex plugin marketplace add google-labs-code/stitch-skills --ref main --sparse .agents/plugins --sparse plugins/stitch-design --sparse plugins/stitch-build --sparse plugins/stitch-utilities Or install skills selectively with npx: npx skills add google-labs-code/stitch-skills
Where can I get stitch-skills?
The source code and installation instructions are on GitHub: https://github.com/google-labs-code/stitch-skills

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects