What does this skill do, and when should you use it?
This skill reverse-engineers a design system from an existing frontend codebase by reading source files directly. It covers React, Vue, Svelte, Angular, plain HTML/CSS, and other web frameworks, including components, stylesheets, Tailwind configuration, themes, and design tokens. It produces a Stitch-compatible `.stitch/DESIGN.md` with structured color metadata and design guidance. It is most useful when a project cannot be built or rendered, or when a team needs to audit or migrate an existing visual language.
It reads a frontend source directory, beginning with package.json, framework signal files, style directories, theme files, and Tailwind configuration. It extracts visual atmosphere, functional color roles, typography, component styling, layout, spacing, responsive behavior, and Stitch generation notes, then writes the result to .stitch/DESIGN.md with YAML frontmatter and a required color mapping. The skill declares Bash, Read, Write, web_fetch, and Stitch MCP tools, and does not require the application to be built or run.
- A frontend engineer inherits a React project with missing dependencies or a broken build and needs a design-system audit first.
- A design team wants to migrate the visual identity of an existing Vue or Tailwind project into Stitch.
- A product team needs to check whether colors, typography, spacing, and component styles are consistent across a repository.
- A developer wants to generate `.stitch/DESIGN.md` from an existing codebase for later Stitch workflows.
How do you install this skill?
- The skill permits Bash, web_fetch, Write, and wildcard stitch tools; confirm access scope, external data flows, and write targets before use.
- Source analysis may miss runtime-generated styles, theme switching, dependency defaults, and dynamic class names; manually review and validate the resulting DESIGN.md.
- Core Stitch integration depends on an external MCP service; confirm network access, credentials, and service availability, particularly on mainland-China networks.
- Repository CI does not cover this skill's key paths, so repository-level validation should not be treated as skill-specific testing.
- Shell / CLI
- Network access
- Local filesystem
- MCP Server
Stitch MCP server
The skill is distributed in the google-labs-code/stitch-skills collection. The README documents npx skills add google-labs-code/stitch-skills for installing skills selectively, as well as plugin installation through Codex, Claude Code, and Cursor commands shown in the repository README. The Stitch MCP server must be configured and running. The source does not document a standalone copy-only installation procedure for this individual skill.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/google-labs-code/stitch-skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/plugins/stitch-design/skills/extract-design-md" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Give the agent access to the frontend project source directory and configure the Stitch MCP server. Example prompt: Scan /src and extract the design system into .stitch/DESIGN.md. The skill reads the source files and creates the design document in the project. If installing selectively, check required dependencies because the README warns that Stitch Design Skills can depend on one another.
What are this skill's strengths and limitations?
- Works from source code without requiring a build or rendered application.
- Supports multiple frontend frameworks, plain CSS approaches, Tailwind, theme files, and design tokens.
- Produces structured color frontmatter intended for parsing by other Stitch skills.
- Translates raw styling information into reusable, design-oriented language about mood, components, and layout.
- Requires access to the frontend source directory and cannot operate from a rendered page alone.
- The README requires a configured and running Stitch MCP server, while the supplied skill text does not show the exact MCP call sequence.
- The source provides no test-suite evidence, platform validation results, or failure-recovery procedure.
- Output quality depends on the styling and design information present in the codebase; the source does not define detailed handling for dynamic or missing styles.
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| Stitch Frontend Design Extractor this page | 42 · Not recommended | ★ 8.5k | 2mo ago | Apache-2.0 |
| Stitch React Component Builder | 45 · Not recommended | ★ 8.5k | 2mo ago | Apache-2.0 |
| Stitch Code-to-Design | 38 · Not recommended | ★ 8.5k | 2mo ago | Apache-2.0 |
| Figma Design System Rules Builder ✓ OpenAI · Official | 50 · Use with care | ★ 28k | 4mo ago | — |
| Stitch Design System Manager | 45 · Not recommended | ★ 8.5k | 2mo ago | Apache-2.0 |
How did FollowSkills review this skill?
The skill can read frontend source and write .stitch/DESIGN.md, while also allowing Bash, web_fetch, and all stitch tools. It does not define least-privilege boundaries, user confirmation, sensitive-data handling, external data flows, rollback, or write-conflict protection, so points are deducted. No red-line risk is visible.
The workflow, framework branches, and quality checklist are broadly self-consistent, with several reference files provided. However, there are no tests for key paths, abnormal-input handling, diagnostic failure messages, or output validation; the static-review ceiling requires a conservative deduction.
The audience, scenarios, source-directory input, and DESIGN.md output are reasonably clear, and multiple frontend frameworks are covered. Non-fit boundaries, exclusion triggers, Chinese-language behavior, and environment reachability are not specified; optional core integration depends on Stitch MCP without reachability evidence.
The documentation has clear structure, prerequisites, progressive phases, a template example, a quality checklist, an Apache-2.0 license, and a basic security policy. It lacks skill-specific versioning, changelog, named maintenance responsibility, update path, FAQ, and systematic troubleshooting guidance.
The skill clearly targets a structured, Stitch-compatible DESIGN.md covering colors, typography, components, and layout, so the intended output could be directly useful as a documentation baseline. No actual output or key-path verification is provided, and static source inference may miss runtime styling, requiring manual review.
The repository includes a detailed workflow, framework references, a DESIGN.md example, and repository-level CI. The CI validates another skill rather than this one, and there is no independent reproduction record or third-party execution evidence, so verifiability remains limited.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →