Skill Detail

Use Stitch Skills to generate, convert, and sync UI designs through agent workflows

Install Google's Stitch skill suite so Codex, Claude Code, Cursor, Gemini CLI, or OpenCode can create screens, upload design assets, extract design systems, and convert Stitch designs into app code.

Image & Creative AutomationMCP
Image & Creative Automation MCP Security Reviewed
โญ 7.8k GitHub stars
COPY SKILL INSTRUCTIONS (OPTIONAL)
npx skills add agentskillexchange/skills --skill use-stitch-skills-to-generate-convert-and-sync-ui-designs-through-agent-workflows Copy
Uses the third-party skills CLI, not an ASE-owned installer. Check your agent’s compatibility. This copies instructions; complete the upstream tool setup below separately.
At a glance
Tools required
An agent runtime that can load Agent Skills or plugins, plus the Stitch MCP server configured from Google's Stitch documentation
Install & setup
Add the Stitch Skills marketplace or install selected skills from google-labs-code/stitch-skills, then configure the Stitch MCP server for the target agent runtime. For Codex, register the marketplace with 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, install the needed Stitch plugins, and follow the Stitch MCP setup guide before invoking the design or build skills.
Author
Google Labs Code
Publisher
Organization
Last updated
Jul 22, 2026
Quick brief

Use Stitch Skills when an agent needs to operate Google Stitch as part of a repeatable design-to-build workflow: generate or edit screens, upload frontend snapshots, extract DESIGN.md guidance, sync Stitch projects, or convert designs into React, React Native, Remotion, or related implementation artifacts. Invoke it instead of using the Stitch product manually when the useful work is handing a design task to a coding agent with the Stitch MCP server and repo-installed skills in place. The scope boundary is the Stitch skill/plugin workflow for design generation, asset upload, design-system extraction, and code conversion; it is not a generic MCP listing, broad design product card, or replacement coding agent.

How it works

What this skill actually does

Inputs and prerequisites: An agent runtime that can load Agent Skills or plugins, plus the Stitch MCP server configured from Google’s Stitch documentation.

Setup notes: Add the Stitch Skills marketplace or install selected skills from google-labs-code/stitch-skills , then configure the Stitch MCP server for the target agent runtime. For Codex, register the marketplace with 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 , install the needed Stitch plugins, and follow the Stitch MCP setup guide before invoking the design or build skills.

Source and verification boundary: use https://stitch.withgoogle.com/docs/mcp/setup as the canonical reference before running the workflow; keep commands, API calls, CLI usage, and generated outputs reviewable against that upstream source.

Framework fit: publish this as a MCP workflow only when the operator can invoke the documented toolchain directly, rather than treating the upstream project as a generic product listing.