stitch::extract-design-md
An agent skill by google-labs-code, from google-labs-code/stitch-skills. Tags: analysis, code-quality, design, documentation, web.
What it does
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 files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever the user wants to reverse-engineer a design system from an existing codebase, audit the visual language of a project, extract design tokens from source files, or understand the styling patterns in a frontend repo — even if they just say "what does this app look like?" or "pull out the design from this code."
Install
With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:
npx skills add google-labs-code/stitch-skills --skill 'stitch::extract-design-md'Or copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):
git clone --depth 1 https://github.com/google-labs-code/stitch-skills
cp -r stitch-skills/plugins/stitch-design/skills/extract-design-md ~/.claude/skills/'stitch::extract-design-md'Safety box score
Grade B, low risk: 11 of 100 risk points, rated 2026-10-20. The grade rates what the skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. How the score works.
This skill analyzes a frontend repo’s source files to extract a design system and writes a local `.stitch/DESIGN.md` summary. It does not require building the app, but it does grant the agent `Bash`, `Write`, and `web_fetch`, so the main risks are broad file access plus optional command/network use while inspecting the repo.
| Category | Level | Why |
|---|---|---|
| Code & shell execution | 1 (low) | The skill explicitly allows `Bash` and `stitch*:*` tools, so an agent can run commands while scanning source, even though the documented workflow is read-only aside from output generation. |
| Network access | 1 (low) | `web_fetch` is listed in `allowed-tools`, so the agent can make outbound requests if it chooses, although the workflow itself focuses on local source files and bundled reference docs. |
| Filesystem reach | 1 (low) | The skill tells the agent to create and write `.stitch/DESIGN.md` in the project directory: `Place it at .stitch/DESIGN.md ... (create the .stitch/ directory if it doesn't exist)`. |
| Secrets & credentials | 0 (none) | The skill is about styling/source analysis and does not ask for tokens, key files, browser sessions, or other credentials. |
| Privilege & persistence | 0 (none) | There is no instruction to use sudo, install globally, register services, or modify shell/OS settings. |
| Instruction hijack surface | 0 (none) | The text contains normal workflow instructions only; it does not tell the agent to ignore higher-priority instructions, hide actions, or follow remote prompt text. |
| Irreversible actions | 0 (none) | It produces a local design document and, in the optional handoff, defers external Stitch updates to another skill; it does not itself post, deploy, or publish. |
| Transparency | 0 (none) | All shipped files are plain markdown; there are no binaries, embedded blobs, or decoded-at-runtime code to obscure behavior. |
Before installing
- Confirm you are okay with it writing `.stitch/DESIGN.md` in the project.
- Review the `allowed-tools` list and decide whether granting `Bash` and `web_fetch` is acceptable.
- If the repo may contain secrets, scan or redact them before letting the skill inspect the source tree.
Rated 2026-10-20 by an automated review of 7 files from the skill's repository.
Source
- Repository
- google-labs-code/stitch-skills (all skills from this repository)
- Path
- plugins/stitch-design/skills/extract-design-md/SKILL.md
- Branch
- main
- Collection
- stitch-design
- Updated
- 2026-09-19
Related skills
- stitch::code-to-design — Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction.
- design-md — Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files
- audit-prep-assistant — Prepares codebases for security review using Trail of Bits' checklist.
- principle-minimize-reader-load — Apply when reviewing or shaping code that's hard to trace.
- review-walkthrough — Generates an interactive HTML walkthrough for reviewing code changes. Use only when explicitly called.
- spec-to-code-compliance — Check code against the documentation that specifies it - which requirements hold, which the code contradicts, which are absent.