Agent skill · design visual · google-labs-code
stitch::extract-design-md
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.
Why this skill is useful
Adds a comprehensive extraction script for design systems from various frontend frameworks that isn't available in public documentation.
What it needs
Requires bash, stitch installed locally. About 8k tokens when loaded. Last updated 2026-07-30. 7,933 stars on the source repository.
What this skill does
Extract Design System from Frontend Code Analyze frontend source code to extract a comprehensive design system document (DESIGN.md) that captures the project's visual language — colors, typography, spacing, component patterns, and layout principles — directly from the source files, without needing to build or render the application. Why This Exists The design-md skill works from rendered HTML. But often you have a codebase and want to understand its design system before you can even run the app — maybe dependencies are missing, the build is broken, or you just want a quick audit. This skill reads the source files themselves: stylesheets, component files, theme configs, and Tailwind setups. It's faster and works anywhere. When to Use User has a frontend codebase and wants to extract or document its design system User wants to migrate a project's visual identity into Stitch User asks to "audit the styling" or "understand the design language" of a repo User wants to create a DESIGN.md from existing source code The app can't be built/rendered but the source is available User wants to unify or reconcile inconsistent styles across a codebase Prerequisites Access to the frontend project's source directory No build or runtime dependencies needed — this skill reads source files only --- Workflow Phase 1: Project Discovery Start by understanding what you're working with. This determines which extraction patterns to use. 1. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills google-labs-code/extract-design-md