Stitch Design Skills
A library of Agent Skills and plugins for Google Stitch, following the Agent Skills open standard, compatible with coding agents like Codex, Claude Code, and Cursor.
- Source repo
- google-labs-code/stitch-skills
- Stars
- ★ 8.5k
- Last updated
- 2mo ago
- License
- Apache-2.0
- Primary language
- TypeScript
- FA score
- 0/100 · Major gaps
At a glance
- How it runs
- Works with
- Platform-specificChatGPT · Codex · Claude Code
- Cost
- Free software; you pay for model usage
- Setup effort
- Medium · a few setup steps
- You'll need
- Typical use
- A frontend developer wants to migrate existing React or Vue code to a Stitch design project, using code-to-design skill to automate the conversion.
- Not a fit if
- Developers not using the Stitch MCP server or unwilling to accept platform lock-in
- Users wanting one skill alone without managing inter-skill dependencies
- Source review
- 0/100 · Major gaps 8 safety controls not found
What does this agent do, and when should you use it?
Stitch Design Skills is a collection of agent skills and plugins for Google Stitch, built on the Agent Skills open standard. It includes three plugins: stitch-design (design workflows), stitch-build (code generation), and stitch-utilities (design utilities). Each skill follows a consistent structure with SKILL.md, scripts, resources, and examples, and depends on the Stitch MCP server. Installation is supported via Codex plugin marketplace, npx commands for Claude Code and Cursor, and manual setup for OpenCode. The library covers the full design-to-code pipeline, from generating designs from text or code to converting designs into React components and generating design systems.
The library provides skills that interact with the Stitch MCP server to perform design tasks. Specifically, stitch::code-to-design extracts HTML from frontend code and uploads it as a Stitch design; stitch::generate-design generates new screens from text or images, edits existing screens, and creates design variants; stitch::manage-design-system uploads a design system (DESIGN.md) and applies it to screens; stitch::extract-design-md extracts design specs from source code; stitch::upload-to-stitch uploads local assets to a Stitch project. For build, stitch::react-components converts Stitch screens to React components, stitch::react-native generates React Native components, remotion creates walkthrough videos, shadcn-ui provides guidance for shadcn/ui integration, and react-vite-dashboard builds React+Vite dashboards. Utility skills include design-md for generating DESIGN.md, enhance-prompt for optimizing prompts, stitch-loop for generating multi-page websites, and taste-design for enforcing premium design standards.
- A frontend developer wants to migrate existing React or Vue code to a Stitch design project, using code-to-design skill to automate the conversion.
- A designer uses generate-design to quickly create multiple design variants from text descriptions for exploring different options.
- A development team wants to convert Stitch designs into production-ready React components, using react-components skill with design token validation.
- A product manager uses stitch-loop to generate a complete multi-page marketing website from a single prompt.
- A developer wants to integrate Stitch design workflows into their coding agent and installs the skill suite via plugin marketplace.
How do you install or deploy this agent?
For Codex, install the plugin marketplace 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. For Claude Code and Cursor, use npx plugins add google-labs-code/stitch-skills --scope project --target claude-code or --target cursor. For OpenCode, manually copy skill folders and configure MCP. Prerequisites include completing Stitch MCP setup.
How do you use this agent?
After installing plugins, select the desired skills (e.g., stitch-design or stitch-build). Each skill supports specific prompts, for example, with stitch::generate-design you can input 'Make a browse tab for a mobile app for romance and date night ideas.' Ensure the Stitch MCP server is configured and running. Skills are executed through the agent (e.g., Codex, Claude Code) using the provided prompts.
What are this agent's strengths and limitations?
- Deep integration with Google Stitch, offering official design workflows.
- Adheres to the Agent Skills standard, compatible with multiple coding agents (Codex, Claude Code, Cursor).
- Plugin-based installation allows selective installation of skills.
- Comprehensive design-to-code pipeline covering design, build, and utility tools.
- Dependency on Google Stitch's proprietary MCP server creates platform lock-in.
- Skills have inter-dependencies; selective installation may require careful handling to avoid missing dependencies.
- OpenCode installation requires manual adaptation of skill names and tool mappings, and may not run as-is.
- Some skills (e.g., react-vite-dashboard) are specific to certain frameworks (React+Vite), limiting applicability.
How does this agent compare with similar options?
Key facts side by side with the most closely related agents.
| Agent | Source review | Form / cost | Stars | Updated | Language | Full support on |
|---|---|---|---|---|---|---|
| Stitch Design Skills This agent | 0 · Major gaps | Agent plugin / skillFree + model costs | ★ 8.5k | 2mo ago | TypeScript | ChatGPT · Codex · Claude Code |
| Appllama Mobile Design Skills | 50 · Major gaps | Agent plugin / skillFreemium | ★ 2.9k | 1mo ago | — | Codex · Claude Code |
| XIAS — UX/UI Agent Skills | 70 · Some gaps | Agent plugin / skillFree + model costs | ★ 2.3k | 8d ago | JavaScript | Claude Code |
| UIZZE · Better UI for Coding Agents | 47 · Major gaps | Agent plugin / skillFreemium | ★ 63 | 6d ago | JavaScript | Codex · Claude Code |
How does FollowAgents rate this agent?
Why each dimension lost points
Evidence only includes README, LICENSE, SECURITY.md, and CI workflow; no skill instructions or scripts provided, so cannot assess least privilege, user confirmation, data flow transparency, sensitive data handling, dependency security, external effects, rollback, or source attribution. All criteria scored 0 due to insufficient evidence.
No skill instructions or scripts provided, so cannot assess self-consistency, dependency availability, or failure messages. All criteria scored 0 due to insufficient evidence.
README describes target audience and scenarios, but no skill instructions provided, so cannot assess capability boundaries, trigger precision, or environment fit. All criteria scored 0 due to insufficient evidence.
README provides information architecture and install notes, but no skill files provided, so cannot assess naming stability, examples, known limitations, versioning/changelog, or maintenance responsibility. License present but not assessed. All criteria scored 0 due to insufficient evidence.
No skill instructions or scripts provided, so cannot assess output usability, marginal value, or cost-benefit. All criteria scored 0 due to insufficient evidence.
No skill instructions or scripts provided, so cannot assess claim traceability, cross-source corroboration, or fact-inference separation. All criteria scored 0 due to insufficient evidence.
- Not found in source: least-privilege scopingGrant only what the task needs: a dedicated account or read-only token, scoped to specific directories and repos.
- Not found in source: confirmation before actingTurn on (or add) a confirmation step before it acts, and try it in a sandbox or test environment before real data.
- Not found in source: data-flow disclosureWatch which external services it contacts (proxy or firewall logs) and keep sensitive data out until you know where it goes.
- Not found in source: sensitive-data handlingUse dedicated, low-privilege, revocable API keys — never production credentials — and keep secrets out of logs.
- Not found in source: dependency securityPin versions and run a dependency audit (npm audit, pip-audit) before installing; prefer running it in a container.
- Not found in source: disclosed external effectsEstablish which external systems it writes to, sends to or changes, and verify with test accounts or repos before production.
- Not found in source: rollback or recovery pathBack up first, or work on a git branch or snapshot, so its changes can be undone.
- Not found in source: verifiable attributionInstall from the official repo or registry and check the publisher and URL to avoid look-alike packages.
- Static review based only on repository root files; skill instructions and scripts not included, so actual safety and reliability cannot be assessed.
- Publisher identity unverified, but no malicious indicators found.
- Recommend reviewing skill instructions and scripts before installation, and verifying dependency security.
Recent releases
Latest entries from the project's GitHub Releases. Notes are quoted from upstream as written, not rewritten or tested by FollowAgents.
-
v1.0 Stitch Skills Plugins Release
Release notes excerpt
Major Launch for Stitch Skills plugins 1. Features: new Skills added, including code-to-design, manage-design-system, extract-static-html, extract-design-md, upload-to-stitch 2. Refactor: merge several design related skills to generate-design 3. Reorg: structure all skills into three plugins: stitch-design, stitch-build, stitch-utilitiesView on GitHub ↗ -
v0.1 v0.1 release