Stitch Extract DESIGN.md From Source

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/extract-design-md. 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 source code should reveal the visual system before a Stitch upload or generation workflow.
• 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. Detect the framework and read the closest file under references/: React/Tailwind, Vue, Svelte, Angular, or plain CSS.
2. Read theme config, global CSS, font imports, layout roots, representative components, and state styles.
3. Extract actual colors, fonts, spacing, radii, shadows, variants, and responsive rules.
4. Name tokens semantically and keep exact values next to descriptive labels.
5. Write .stitch/DESIGN.md using atmosphere, palette, typography, components, layout, and generation notes.
6. Hand off to stitch-manage-design-system when the user wants upload.

Local Assets