Stitch Skills
From source design rules to Stitch screens and React
Three plugins connect local design documents, Stitch generation and imports, and frontend conversion. Choose by your input, then prepare the services and tools that path needs.
Hosts listed by the author
- Claude Code
- Codex
- Cursor
- Gemini CLI
- OpenCode
- Antigravity
- GitHub stars
- 8,638
- Version
- 1.0
- Checked
- Categories
- Design & VideoEngineering
Start with a design document you can verify
If you have frontend source, extract a local DESIGN.md and trace its rules back to the code before deciding whether to upload. If you already have Stitch screens, use the React path and check downloads, routing, and types separately.
Pick a task and get started
For an existing React/Tailwind project, install in its root and start with the local extraction task. Before a cloud task, follow the author's MCP setup link and confirm the connection by listing your projects.
Start here when you have a React/Tailwind project and need its colors, typography, and component rules. The app does not need to run, and no Stitch connection is required.
Install the project plugins
Run the author's Claude Code plugin installer in the target project's terminal. Use stitch-design, stitch-build, and stitch-utilities as needed: task one needs design, theme preparation also uses utilities, and React conversion uses build. Retain each selected skill's scripts, references, and examples.
Read the author’s setup guidenpx plugins add google-labs-code/stitch-skills --scope project --target claude-codeFirst run: create DESIGN.md in an existing repository
Open the target React/Tailwind repository and confirm that the assistant can read package.json, global CSS, configuration, and component files. Run the installer above, ensure stitch-design is available, then paste task one into Claude Code. Its scope is source reading and a local document, with no upload or app startup. Open .stitch/DESIGN.md afterwards, check its name/colors YAML, and trace a primary color, font, and breakpoint back to source. Prepare brief.md, copy.md, and a Stitch project when you move to cloud design.
Read the installation and prerequisitesGive your AI this first task
These prompts are editorial operating examples. Replace paths and project details with your own. Outputs are expected deliverables; we did not connect an account or run these workflows.
Use stitch::extract-design-md to analyze the current React/Tailwind project and write .stitch/DESIGN.md. Read package.json first. Find the actual Tailwind configuration, global CSS, theme/tokens, and root layout, then inspect 5–8 representative layout, button, card, navigation, and form components. If a configuration file is absent, follow the real styling sources instead of inventing one. Start the document with YAML containing name and colors. Describe the visual character, color roles, type hierarchy, component states, spacing, breakpoints, and layout. Preserve actual values. Separate theme definitions from component overrides, and list near-duplicate colors with consolidation suggestions rather than presenting inferred intent as fact. Append a mapping from key rules to source files and list what the code cannot establish. Read any existing DESIGN.md first and preserve valid human-written notes. This task is local documentation only: do not start the app or upload to Stitch. Deliver .stitch/DESIGN.md and spot-check the primary color, fonts, button states, and one responsive breakpoint against the source.
Check what you receive
- .stitch/DESIGN.md with name/colors frontmatter and descriptive design rules.
- A source-file mapping, component overrides, and explicit uncertainties.
- Source checks for the main colors, fonts, states, and a breakpoint.
More about this skill
Stitch Skills is maintained in the google-labs-code repository and organized into design, build, and utilities plugins. The reviewed source contains 16 SKILL.md files. This page develops four practical paths and maps the remaining capabilities below.
The collection connects material across stages: design rules extracted from code, a static state captured from a running page, project themes and screens in Stitch, and components ready for further development. DESIGN.md, HTML, screenshots, and metadata.json provide a record for the next stage.
Connection requirements depend on the task. Source analysis, SITE.md preparation, and prompt editing can start locally. Retrieving Stitch designs or generating, editing, and uploading in the cloud needs service access. Installing the plugins is followed by checking available tools; the scripts perform specific extraction, transfer, or validation jobs.
Sources and verification
Sources checked
Documentation and implementation were reviewed at commit 0337446. The version label shows the latest release, v1.0, which points to a different snapshot. We did not install plugins, connect Stitch, run a snapshot, or generate an app.