--- title: "Google Stitch Design-System Extraction: review, setup & limitations · Undominated.ai" canonical: https://undominated.ai/skills/google-labs-code-extract-design-md/ description: "Reads frontend source and theme files to draft a structured DESIGN.md for design-system documentation or later Stitch use." --- # Google Stitch Design-System Extraction: review, setup & limitations · Undominated.ai > Reads frontend source and theme files to draft a structured DESIGN.md for design-system documentation or later Stitch use. [← Explore all skills](/skills/) DESIGN AND INTERFACES / Google Labs / Stitch # Google Stitch Design-System Extraction Reads frontend source and theme files to draft a structured DESIGN.md for design-system documentation or later Stitch use. See setup guidance ↓Original source ↗ SOURCE REVIEW Reviewed 2026-09-21 Evidence 9 linked sources Publisher Google Labs / Stitch Licence Apache-2.0 ↗ Revision 0337446dadde Read what was—and wasn’t—checked ↓ “Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component” Google Labs / Stitch · upstream description ↗ Our analysis follows below. 01 / THE REASONING ## Why this made the selection. - Starts with tokens and theme definitions, then inspects representative components to separate intended conventions from scattered overrides. - Provides framework-specific discovery paths and a structured output covering color roles, typography, components, layout and interaction states. ### A good fit for - Documenting a codebase’s visual conventions before it can be built - Preparing a design-system brief for a separate Stitch workflow ### Weigh up before choosing - Source extraction does not verify rendered appearance, accessibility or the effects of runtime themes. Descriptions of intent remain interpretation. - The instructions consolidate similar colors; preserve distinct semantic tokens and provenance before accepting that editorial simplification. - The stitch:: skill name needs adaptation in clients that require kebab-case names. Optional Stitch synchronization uses a separate skill and service. - The sample DESIGN.md has palette prose that disagrees with its token values. Treat it as a structural example: extract the project’s real values and check prose against them rather than copying its palette. 02 / THE REVIEW RECORD ## What we actually inspected. Source review has boundaries. A clear record is more useful than a “safe” badge. ### Material inspected - plugins/stitch-design/skills/extract-design-md/SKILL.md - plugins/stitch-design/skills/extract-design-md/examples/DESIGN.md - plugins/stitch-design/skills/extract-design-md/references/angular.md - plugins/stitch-design/skills/extract-design-md/references/plain-css.md - plugins/stitch-design/skills/extract-design-md/references/react-tailwind.md - plugins/stitch-design/skills/extract-design-md/references/svelte.md - plugins/stitch-design/skills/extract-design-md/references/vue.md - README.md (installation, compatibility and licence sections) - LICENSE ### Our findings - The definition, sample DESIGN.md and all framework references were read. The standalone extraction ends with a local document; remote integration is explicitly optional. - The references vary by framework and generation. For example, the Angular reference covers CSS-first Tailwind tokens while other references emphasize config files. ### Not established by this review - No design system was extracted, rendered or synchronized to Stitch. - The output template was not checked against a live Stitch API. The review applies to the material and revision named here. A newer upstream release can change its behavior. 03 / PUT IT TO WORK ## Add a skill to your workflow. Upstream setup instructions ↗ - Follow the publisher’s plugin or selective-skill installation guidance and choose extract-design-md from the stitch-design package. - Keep the framework references and sample template. Check the skill-name requirements of the target client before a manual install. ### Before you start - Read access to frontend source and permission to create .stitch/DESIGN.md - A compatible skill/plugin host; Stitch account and MCP setup only for the separate optional upload workflow ### Compatibility Codex · Claude Code · Cursor · Gemini CLI ### Frontend source; optional Stitch handoff - Read style, component, theme and configuration files - Create a local design-system document - A separately selected integration can send that document to Stitch ### Cost model Apache-licensed skill instructions; the consuming agent and any optional Stitch service access have their own terms. 04 / FOLLOW THE EVIDENCE ## The source trail. Our notes are separate from the original resource. Check upstream before adopting a new version. - Skill definition at reviewed revision ↗ Checked 2026-09-21 https://github.com/google-labs-code/stitch-skills/blob/0337446dadde6f8c94210444e2aa9d546126480f/plugins/stitch-design/skills/extract-design-md/SKILL.md Supports: summary, upstreamDescription, whySelected, bestFor, limitations, review, access - Reviewed reference or helper: examples/DESIGN.md ↗ Checked 2026-09-21 https://github.com/google-labs-code/stitch-skills/blob/0337446dadde6f8c94210444e2aa9d546126480f/plugins/stitch-design/skills/extract-design-md/examples/DESIGN.md Supports: review, limitations, install, access - Reviewed reference or helper: references/angular.md ↗ Checked 2026-09-21 https://github.com/google-labs-code/stitch-skills/blob/0337446dadde6f8c94210444e2aa9d546126480f/plugins/stitch-design/skills/extract-design-md/references/angular.md Supports: review, limitations, install, access - Reviewed reference or helper: references/plain-css.md ↗ Checked 2026-09-21 https://github.com/google-labs-code/stitch-skills/blob/0337446dadde6f8c94210444e2aa9d546126480f/plugins/stitch-design/skills/extract-design-md/references/plain-css.md Supports: review, limitations, install, access - Reviewed reference or helper: references/react-tailwind.md ↗ Checked 2026-09-21 https://github.com/google-labs-code/stitch-skills/blob/0337446dadde6f8c94210444e2aa9d546126480f/plugins/stitch-design/skills/extract-design-md/references/react-tailwind.md Supports: review, limitations, install, access - Reviewed reference or helper: references/svelte.md ↗ Checked 2026-09-21 https://github.com/google-labs-code/stitch-skills/blob/0337446dadde6f8c94210444e2aa9d546126480f/plugins/stitch-design/skills/extract-design-md/references/svelte.md Supports: review, limitations, install, access - Reviewed reference or helper: references/vue.md ↗ Checked 2026-09-21 https://github.com/google-labs-code/stitch-skills/blob/0337446dadde6f8c94210444e2aa9d546126480f/plugins/stitch-design/skills/extract-design-md/references/vue.md Supports: review, limitations, install, access - Publisher installation, compatibility and licensing guidance ↗ Checked 2026-09-21 https://github.com/google-labs-code/stitch-skills/blob/0337446dadde6f8c94210444e2aa9d546126480f/README.md Supports: install, compatibility, access, license - Upstream licence at reviewed revision ↗ Checked 2026-09-21 https://github.com/google-labs-code/stitch-skills/blob/0337446dadde6f8c94210444e2aa9d546126480f/LICENSE Supports: license, access.cost KEEP COMPARING ## Other approaches to consider. Related by category or shared topics. These are alternatives to inspect, not a measured quality order. [### Anthropic Frontend Design ↗ Builds a visual direction from the product’s audience and subject, then reviews typography, layout and interface copy against that brief.](/skills/anthropics-frontend-design/)[### Vercel Web Interface Guidelines ↗ Reviews interface code against a freshly fetched guideline set and returns file-specific findings.](/skills/vercel-labs-web-design-guidelines/)[### Anthropic Documentation Coauthoring ↗ Guides a human and agent through audience discovery, section-by-section drafting and a separate-reader review of a substantial document.](/skills/anthropics-doc-coauthoring/) [AI Tools ↗](/tools/)[Skills ↗](/skills/)[Agents ↗](/agents/)[MCP Servers ↗](/mcp-servers/)