stitch::code-to-design
An agent skill by google-labs-code, from google-labs-code/stitch-skills. Tags: automation, code-quality, design, migration, web.
What it does
Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the user's intent is to move existing web apps or React/Angular/Vue components into Stitch (e.g., requests to "save", "migrate", or "upload"). You must use this skill even for simple "save" operations, as it is the only way to ensure the design system is extracted and assets are properly linked.
Install
With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:
npx skills add google-labs-code/stitch-skills --skill 'stitch::code-to-design'Or copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):
git clone --depth 1 https://github.com/google-labs-code/stitch-skills
cp -r stitch-skills/plugins/stitch-design/skills/code-to-design ~/.claude/skills/'stitch::code-to-design'Safety box score
Not rated yet. A safety box score grades what a skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. Anyone can request one from this page; it is saved for everyone. How the score works.
Source
- Repository
- google-labs-code/stitch-skills (all skills from this repository)
- Path
- plugins/stitch-design/skills/code-to-design/SKILL.md
- Branch
- main
- Collection
- stitch-design
- Updated
- 2026-09-19
Related skills
- stitch::extract-design-md — md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework.
- stitch::extract-static-html — Extract self-contained static HTML from a built web application or React components by inlining CSS and images.
- cli-developer — Use when building CLI tools, implementing argument parsing, or adding interactive prompts.
- oversized-cursor — House-style oversized macOS cursor technique for HyperFrames launch videos.
- product-launch-video — Turn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos.
- step-parts — Find, evaluate, and download common purchasable CAD parts from step.parts, including named off-the-shelf actuators, servos, motors, electronics boards.