Coding agents can handle Google Stitch designs directly with this skill collection
A single prompt creates a screen and converts it into React code, a process the coding agent handles on its own. This repository collects agent skills that integrate with Google Stitch, reducing repetitive tasks between design and development. It works directly in tools like Codex, Claude Code, and Cursor.
From design to code, a flow connected by agents
This repository provides agent skills that work with the Google Stitch MCP server. You can generate new screens from text or images, modify existing screens, and apply design systems. The generated designs are converted into various frontend code, including React, React Native, and Vite-based dashboards. Each skill follows the agent skill open standard, ensuring compatibility across multiple coding agents.
Features divided into three plugins
The features are divided into three plugins: design, build, and utility.
- Design plugin Converts frontend code into Stitch designs or generates new screens from text. It also includes functionality to upload and apply design systems to screens.
- Build plugin Converts Stitch screens into React components or React Native code. It also provides guides for creating walkthrough videos with Remotion or integrating shadcn/ui.
- Utility plugin Refines vague UI ideas into specific prompts or generates a DESIGN.md file to enforce design standards. It also features the ability to generate multi-page websites with a single prompt.
Installation methods by agent
The installation command varies depending on the coding agent you use. For Codex, you add the marketplace and then selectively install the required plugins. Claude Code and Cursor install to the project or workspace using the npx plugins add command. OpenCode requires manually copying the skill folder and adding the MCP server configuration. Before any installation, you must ensure the Stitch MCP server is registered in your environment.
Pre-use checks
This repository is not an officially supported Google product. It is also excluded from the Google Open Source Software Vulnerability Reward Program. Since dependencies may exist between skills, you must include all necessary dependencies when installing selectively. When using OpenCode, skill names must be in lowercase kebab-case, and tool names may differ from OpenCode built-in tools, requiring adjustment. You should first verify that the Stitch MCP server configuration is complete and that environment variables and credentials are set correctly.
