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
Grade C, moderate risk: 40 of 100 risk points, rated 2026-10-20. The grade rates what the skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. How the score works.
This skill turns a local frontend app into a Stitch design by extracting a standalone HTML file, generating `.stitch/DESIGN.md`, and uploading both to Stitch. The main risks are remote transfer of source-derived content, use of a Stitch API key, and automated remote changes with only optional human verification.
| Category | Level | Why |
|---|---|---|
| Code & shell execution | 2 (moderate) | It is designed to drive helper skills and scripts, and the allowed tools include `Bash`, so running commands as part of extraction/upload is inherent to the workflow. |
| Network access | 2 (moderate) | Steps 4 and 5 upload `DESIGN.md` and the extracted HTML to Stitch, sending source-derived content to a remote service with the user's API key. |
| Filesystem reach | 1 (low) | It writes `.stitch/DESIGN.md` in the project tree and produces a standalone HTML file, but the file-level writes appear scoped to the workspace. |
| Secrets & credentials | 2 (moderate) | The workflow requires "Your Stitch API Key" and passes it into upload/create operations, so it handles a sensitive credential. |
| Privilege & persistence | 0 (none) | There is no request for sudo, global installs, services, shell startup edits, or other system-wide privilege changes. |
| Instruction hijack surface | 1 (low) | It tells the agent, "Do not block on verification — proceed directly to Step 3," which pushes past a user-review pause even though the verification is described as optional. |
| Irreversible actions | 2 (moderate) | It automatically creates a design system in Stitch and uploads artifacts there, so the skill performs meaningful remote actions without an additional confirmation step. |
| Transparency | 0 (none) | The supplied file is plain markdown and contains no binaries, encoded blobs, or hidden runtime payloads. |
Before installing
- Read the nested `extract-static-html`, `extract-design-md`, and `upload-to-stitch` skill files before trusting the workflow.
- Use a non-production Stitch project and confirm the API key belongs to the account you intend to upload with.
- Try the workflow in a scratch clone first and verify it only writes `.stitch/DESIGN.md` plus the extracted HTML.
Rated 2026-10-20 by an automated review of 1 file from the skill's repository.
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 — Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS.
- 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.