extract-design-md

Name: extract-design-md
Author: google-labs-code

7.8kstars916forks

How to install extract-design-md?

google-labs-code/stitch-skills/extract-design-md

$npx -y skills add google-labs-code/stitch-skills --skill extract-design-md

Installs into the current project.

Summary

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-compat

Files · 1

View on GitHub

SKILL.md

1	# Extract Design System from Frontend Code
2
3	Analyze frontend source code to extract a comprehensive design system document
4	(DESIGN.md) that captures the project's visual language — colors, typography,
5	spacing, component patterns, and layout principles — directly from the source
6	files, without needing to build or render the application.
7
8	## Why This Exists
9
10	The `design-md` skill works from rendered HTML. But often you have a codebase
11	and want to understand its design system before you can even run the app —
12	maybe dependencies are missing, the build is broken, or you just want a quick
13	audit. This skill reads the source files themselves: stylesheets, component
14	files, theme configs, and Tailwind setups. It's faster and works anywhere.
15
16	## When to Use
17
18	- User has a frontend codebase and wants to extract or document its design system
19	- User wants to migrate a project's visual identity into Stitch
20	- User asks to "audit the styling" or "understand the design language" of a repo
21	- User wants to create a DESIGN.md from existing source code
22	- The app can't be built/rendered but the source is available
23	- User wants to unify or reconcile inconsistent styles across a codebase
24
25	## Prerequisites
26
27	- Access to the frontend project's source directory
28	- No build or runtime dependencies needed — this skill reads source files only
29
30	---
31
32	## Workflow
33
34	### Phase 1: Project Discovery
35
36	Start by understanding what you're working with. This determines which
37	extraction patterns to use.
38
39	#### 1. Detect the Framework and Stack
40
41	Scan the project root for telltale files:
42
43	\| Signal File \| Framework / Tool \|
44	\|:---\|:---\|
45	\| `package.json` with `react` \| React / Next.js \|
46	\| `package.json` with `vue` \| Vue / Nuxt \|
47	\| `package.json` with `svelte` \| Svelte / SvelteKit \|
48	\| `package.json` with `@angular/core` \| Angular \|
49	\| `tailwind.config.js/ts` \| Tailwind CSS \|
50	\| `postcss.config.js` \| PostCSS pipeline \|
51	\| `styled-components` or `@emotion` in deps \| CSS-in-JS \|
52	\| `.css` / `.scss` / `.less` files only \| Plain CSS / SASS \|
53	\| `theme.js` / `theme.ts` / `tokens.js` \| Design token files \|
54
55	Read `package.json` first — it reveals the framework, CSS tooling, and any
56	design-token libraries (e.g., `style-dictionary`, `@chakra-ui/react`,
57	`@mui/material`, `ant-design`). This context tells you where to look for
58	styling information.
59
60	#### 2. Map the Source Tree
61
62	Identify the key directories and files you'll analyze:
63
64	```
65	src/
66	├── components/ ← Component-level styles
67	├── styles/ ← Global stylesheets
68	├── theme/ ← Theme definitions, tokens
69	├── assets/ ← Fonts, images
70	├── app.css ← Root styles
71	└── index.css ← Entry CSS
72	```
73
74	Also check for:
75	- `tailwind.config.js` / `tailwind.config.ts` — Custom colors, fonts, spacing
76	- `globals.css` / `global.css` — CSS custom properties (variables)
77	- Any `theme.` or `tokens.` files
78	- Component library config (e.g., `chakra-theme.ts`, `vuetify.config.ts`)
79
80	#### 3. Read Framework-Specific Guidance
81
82	Consult the appropriate reference for extraction patterns:
83
84	- React / Next.js / Tailwind → [references/react-tailwind.md](references/react-tailwind.md)
85	- Vue / Nuxt → [references/vue.md](references/vue.md)
86	- Svelte / SvelteKit → [references/svelte.md](references/svelte.md)
87	- Angular → [references/angular.md](references/angular.md)
88	- Plain CSS / SASS / Less → [references/plain-css.md](references/plain-css.md)
89
90	These references contain framework-specific patterns for locating colors,
91	typography, spacing, and component styles. Read the one that matches before
92	proceeding.
93
94	---
95
96	### Phase 2: Deep Extraction
97
98	Work through each design dimension systematically. For each one, gather raw
99	data from the source files, then synthesize it into descriptive language.
100
101	The goal isn't to dump every CSS property — it's to understand the intent
102	behind the styling choices and describe them in human, editorial language that
103	another designer (or Stitch) can use to recreate the same visual feel.
104
105	#### 1. Visual Theme & Atmosphere
106
107	Read the broadest styling first to understand the overall mood:
108
109	- Root background: What's the `body` or root element background? Light
110	cream (#f-range) signals airy/clean; dark (#0-#2

People who liked this also viewed

6 picks

Type

extract-design-md

7.8kstars916forks

View on GitHub

How to install extract-design-md?

google-labs-code/stitch-skills/extract-design-md

$npx -y skills add google-labs-code/stitch-skills --skill extract-design-md

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Extract Design System from Frontend Code
2
3	Analyze frontend source code to extract a comprehensive design system document
4	(DESIGN.md) that captures the project's visual language — colors, typography,
5	spacing, component patterns, and layout principles — directly from the source
6	files, without needing to build or render the application.
7
8	## Why This Exists
9
10	The `design-md` skill works from rendered HTML. But often you have a codebase
11	and want to understand its design system before you can even run the app —
12	maybe dependencies are missing, the build is broken, or you just want a quick
13	audit. This skill reads the source files themselves: stylesheets, component
14	files, theme configs, and Tailwind setups. It's faster and works anywhere.
15
16	## When to Use
17
18	- User has a frontend codebase and wants to extract or document its design system
19	- User wants to migrate a project's visual identity into Stitch
20	- User asks to "audit the styling" or "understand the design language" of a repo
21	- User wants to create a DESIGN.md from existing source code
22	- The app can't be built/rendered but the source is available
23	- User wants to unify or reconcile inconsistent styles across a codebase
24
25	## Prerequisites
26
27	- Access to the frontend project's source directory
28	- No build or runtime dependencies needed — this skill reads source files only
29
30	---
31
32	## Workflow
33
34	### Phase 1: Project Discovery
35
36	Start by understanding what you're working with. This determines which
37	extraction patterns to use.
38
39	#### 1. Detect the Framework and Stack
40
41	Scan the project root for telltale files:
42
43	\| Signal File \| Framework / Tool \|
44	\|:---\|:---\|
45	\| `package.json` with `react` \| React / Next.js \|
46	\| `package.json` with `vue` \| Vue / Nuxt \|
47	\| `package.json` with `svelte` \| Svelte / SvelteKit \|
48	\| `package.json` with `@angular/core` \| Angular \|
49	\| `tailwind.config.js/ts` \| Tailwind CSS \|
50	\| `postcss.config.js` \| PostCSS pipeline \|
51	\| `styled-components` or `@emotion` in deps \| CSS-in-JS \|
52	\| `.css` / `.scss` / `.less` files only \| Plain CSS / SASS \|
53	\| `theme.js` / `theme.ts` / `tokens.js` \| Design token files \|
54
55	Read `package.json` first — it reveals the framework, CSS tooling, and any
56	design-token libraries (e.g., `style-dictionary`, `@chakra-ui/react`,
57	`@mui/material`, `ant-design`). This context tells you where to look for
58	styling information.
59
60	#### 2. Map the Source Tree
61
62	Identify the key directories and files you'll analyze:
63
64	```
65	src/
66	├── components/ ← Component-level styles
67	├── styles/ ← Global stylesheets
68	├── theme/ ← Theme definitions, tokens
69	├── assets/ ← Fonts, images
70	├── app.css ← Root styles
71	└── index.css ← Entry CSS
72	```
73
74	Also check for:
75	- `tailwind.config.js` / `tailwind.config.ts` — Custom colors, fonts, spacing
76	- `globals.css` / `global.css` — CSS custom properties (variables)
77	- Any `theme.` or `tokens.` files
78	- Component library config (e.g., `chakra-theme.ts`, `vuetify.config.ts`)
79
80	#### 3. Read Framework-Specific Guidance
81
82	Consult the appropriate reference for extraction patterns:
83
84	- React / Next.js / Tailwind → [references/react-tailwind.md](references/react-tailwind.md)
85	- Vue / Nuxt → [references/vue.md](references/vue.md)
86	- Svelte / SvelteKit → [references/svelte.md](references/svelte.md)
87	- Angular → [references/angular.md](references/angular.md)
88	- Plain CSS / SASS / Less → [references/plain-css.md](references/plain-css.md)
89
90	These references contain framework-specific patterns for locating colors,
91	typography, spacing, and component styles. Read the one that matches before
92	proceeding.
93
94	---
95
96	### Phase 2: Deep Extraction
97
98	Work through each design dimension systematically. For each one, gather raw
99	data from the source files, then synthesize it into descriptive language.
100
101	The goal isn't to dump every CSS property — it's to understand the intent
102	behind the styling choices and describe them in human, editorial language that
103	another designer (or Stitch) can use to recreate the same visual feel.
104
105	#### 1. Visual Theme & Atmosphere
106
107	Read the broadest styling first to understand the overall mood:
108
109	- Root background: What's the `body` or root element background? Light
110	cream (#f-range) signals airy/clean; dark (#0-#2

People who liked this also viewed

6 picks

Type