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.
“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”
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.
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.
- 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
04 / FOLLOW THE EVIDENCE
The source trail.
Our notes are separate from the original resource.
Check upstream before adopting a new version.
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
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
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
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
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
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
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
https://github.com/google-labs-code/stitch-skills/blob/0337446dadde6f8c94210444e2aa9d546126480f/README.md
Supports: install, compatibility, access, license
https://github.com/google-labs-code/stitch-skills/blob/0337446dadde6f8c94210444e2aa9d546126480f/LICENSE
Supports: license, access.cost