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.
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.
- 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.
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.
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 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.