Stitch Code To Design

This skill is a catalog-normalized import from https://github.com/google-labs-code/stitch-skills at commit 3f64079d75d025bc5890c73669f27c26a2d80b31, source path plugins/stitch-design/skills/code-to-design. The upstream control file was corrected for this workspace: the verified Stitch MCP surface here is design-system oriented, so screen lookup, screen generation, and screen editing tools must be used only when the current host explicitly exposes them.

When to Use This Skill

• Use when an existing web app, React view, or static page must be moved into Stitch.
• The task involves Google Stitch project IDs, .stitch/ artifacts, DESIGN.md files, Stitch exports, or Stitch-specific validation.
• The broader stitch-design router points here as the narrowest workflow.

Workflow

1. Resolve the target app root, route, and intended Stitch project. If the project ID is unknown, require a user-provided Stitch URL/project ID, the Stitch web UI, or a host-listed lookup tool.
2. Run stitch-extract-static-html for the relevant route or UI state and keep the output under .stitch/.
3. Run stitch-extract-design-md against the source tree and save .stitch/DESIGN.md.
4. Run stitch-manage-design-system to create or update the Stitch design system, using --generated-by 'stitch::code-to-design' when the bundled upload helper is needed.
5. Run stitch-upload-to-stitch for the static HTML only after the user approves the exact file, size, and destination; identify the producer with --generated-by 'stitch::extract-static-html'.
6. Update .stitch/metadata.json with project, screen, and design-system identifiers.

Local Assets