stitch::code-to-design
Agent skill from google-labs-code/stitch-skills.
What it does
- A built web application directory containing index.html and assets.
- Target Stitch projectId (use listprojects if unknown).
- The path to the standalone HTML file generated in Step 1.
- Your Stitch API Key (same key used in Step 4).
- The target projectId.
- The --generated-by argument set to 'stitch::extract-static-html'.
Requirements & configuration
- Your Stitch API Key (same key used in Step 4).
Configuration: DESIGN
Derived from the skill's own SKILL.md documentation · extracted 2026-07-23
Source
Repository: https://github.com/google-labs-code/stitch-skills
stitch::code-to-design FAQ
What does the stitch::code-to-design skill do?
>- Convert frontend code (Vite, React, 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 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. A built web application directory containing index.html and assets. Target Stitch projectId (use listprojects if unknown).
What does stitch::code-to-design require?
Your Stitch API Key (same key used in Step 4). Configuration keys: DESIGN.
How do I install stitch::code-to-design?
Run: npx -y skills add https://github.com/google-labs-code/stitch-skills --skill stitch::code-to-design --agent claude-code — the source lives at github.com/google-labs-code/stitch-skills.
Maintain stitch::code-to-design?
Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.
[stitch::code-to-design on getagentictools](https://getagentictools.com/skills/google-labs-code-stitch-skills-stitch-code-to-design?ref=badge) npx agentictools info skills/google-labs-code-stitch-skills-stitch-code-to-design The second line is the CLI lookup for this page — handy in READMEs and docs.
