Stitch Extract DESIGN.md From Source

This skill is a catalog-normalized import from https://github.com/google-labs-code/stitch-skills at commit 7b53207b94e62911777d53d4238b5f8c88c2b519, 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