# Stitch::extract Design Md

Extract a comprehensive design system (DESIGN.md) directly from frontend source code, ...

- Repository: https://github.com/google-labs-code/stitch-skills (8654 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-08-17
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add google-labs-code/stitch-skills --skill stitch::extract-design-md -g -a claude-code -y`
Codex: `npx skills add google-labs-code/stitch-skills --skill stitch::extract-design-md -g -a codex -y`
Cursor: `npx skills add google-labs-code/stitch-skills --skill stitch::extract-design-md -g -a cursor -y`
Gemini CLI: `npx skills add google-labs-code/stitch-skills --skill stitch::extract-design-md -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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. Detect the Framework and Stack

Scan the project root for telltale files:

The rest: https://github.com/google-labs-code/stitch-skills/blob/HEAD/plugins/stitch-design/skills/extract-design-md/SKILL.md