design-system

Name: design-system
Author: jezweb

854installs96forks

How to install design-system?

jezweb/claude-skills/design-system

$npx -y skills add jezweb/claude-skills --skill design-system

Installs into the current project.

Summary

Extract a complete design system from an existing website or screenshot into a DESIGN.md file. Analyses colours, typography, component styles, spacing, and atmosphere through browser automation and HTML inspection. Produces a semantic design system document optimised for consiste

Files · 1

View on GitHub

SKILL.md

1	# Design System Extractor
2
3	Analyse an existing website, HTML file, or screenshot and synthesise a semantic design system into a `DESIGN.md` file. The output is optimised for use with the `design-loop` skill and general page generation.
4
5	## When to Use
6
7	- Starting a new project based on an existing site's visual language
8	- Documenting a site's design system that was never formally written down
9	- Preparing `.design/DESIGN.md` before running the design loop
10	- Extracting brand guidelines from a client's existing website
11	- Creating consistency documentation for a multi-page project
12	- Extracting design tokens from a Google Stitch project
13
14	## Workflow
15
16	### Step 1: Identify the Source
17
18	Ask the user for one of:
19
20	\| Source \| Method \|
21	\|--------\|--------\|
22	\| Live URL \| Browse via Playwright CLI or scraper, screenshot + extract HTML \|
23	\| Local HTML file \| Read the file directly \|
24	\| Screenshot image \| Analyse visually (limited — no exact hex extraction) \|
25	\| Existing project \| Scan `site/public/` for HTML files to analyse \|
26	\| Stitch project \| Use `@google/stitch-sdk` to fetch screen HTML + design theme \|
27
28	### Step 2: Extract Raw Design Data
29
30	#### From a Live URL
31
32	1. Browse the site using Playwright CLI:
33	```
34	playwright-cli -s=design open {url}
35	playwright-cli -s=design screenshot --filename=.design/screenshots/source-desktop.png
36	```
37
38	2. Extract the full HTML — either via scraper MCP or by reading the page source
39
40	3. Resize and screenshot mobile (375px):
41	```
42	playwright-cli -s=design resize 375 812
43	playwright-cli -s=design screenshot --filename=.design/screenshots/source-mobile.png
44	```
45
46	4. Close the session: `playwright-cli -s=design close`
47
48	#### From a Local HTML File
49
50	Read the file directly and extract design tokens from the source.
51
52	#### From a Screenshot Only
53
54	Analyse the image visually. Note: colour extraction will be approximate without HTML source. Flag this limitation in the output.
55
56	#### From a Google Stitch Project
57
58	If `@google/stitch-sdk` is installed and `STITCH_API_KEY` is set:
59
60	```typescript
61	import { stitch } from "@google/stitch-sdk";
62
63	// List projects to find the target
64	const projects = await stitch.projects();
65
66	// Get project details (includes designTheme)
67	const project = stitch.project(projectId);
68	const screens = await project.screens();
69
70	// Get HTML from the main screen
71	const screen = screens[0]; // or find by title
72	const htmlUrl = await screen.getHtml();
73	const imageUrl = await screen.getImage();
74	```
75
76	The Stitch `designTheme` object provides structured tokens directly:
77
78	```json
79	{
80	"colorMode": "DARK",
81	"font": "INTER",
82	"roundness": "ROUND_EIGHT",
83	"customColor": "#40baf7",
84	"saturation": 3
85	}
86	```
87
88	Map these to DESIGN.md sections:
89	- `colorMode` → Theme (Light/Dark)
90	- `font` → Typography font family
91	- `roundness` → Component border-radius (`ROUND_EIGHT` = 8px, `ROUND_SIXTEEN` = 16px, etc.)
92	- `customColor` → Primary brand colour
93	- `saturation` → Colour vibrancy (1-5 scale)
94
95	Then also download and analyse the HTML for the full palette (Stitch's theme object only has the primary colour — the full palette is in the generated CSS).
96
97	### Step 3: Analyse Design Tokens
98
99	Extract these from the HTML/CSS source:
100
101	#### Colours
102
103	Look in these locations (priority order):
104
105	1. CSS custom properties — `:root { --primary: #hex; }` or `@theme` blocks
106	2. Tailwind config — `<script>` block with `tailwind.config` or `@theme` in `<style>`
107	3. Inline styles — `style="color: #hex"` or `style="background: #hex"`
108	4. Tailwind classes — `bg-blue-600`, `text-gray-900` (map to palette)
109	5. Computed from screenshot — last resort, approximate
110
111	For each colour found, determine its role:
112
113	\| Role \| How to identify \|
114	\|------\|-----------------\|
115	\| Primary \| Buttons, links, active states, brand elements \|
116	\| Background \| `<body>` or `<html>` background \|
117	\| Surface \| Cards, containers, elevated elements \|
118	\| Text Primary \| `<h1>`, `<h2>`, main body text \|
119	\| Text Secondary \| Captions, metadata, muted text \|
120	\| Border \| Dividers, input borders, card borders \|
121	\| Accent \| Badges, notifications, highlights \|
122
123	#### Typography
124
125	Extract:
126
127	\| Token \| Where to find \|
128	\|-------\|---------------\|
129	\| Font families \| Google Fonts `<link>`, `@import`, `font-family` in CSS \|
130	\| Heading weights \| `font-bold`, `font-semibold`, or explicit `font-weight` \|
131	\| Body size \| Base `font-s

People who liked this also viewed

6 picks

Type

design-system

854installs96forks

View on GitHub

How to install design-system?

jezweb/claude-skills/design-system

$npx -y skills add jezweb/claude-skills --skill design-system

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Design System Extractor
2
3	Analyse an existing website, HTML file, or screenshot and synthesise a semantic design system into a `DESIGN.md` file. The output is optimised for use with the `design-loop` skill and general page generation.
4
5	## When to Use
6
7	- Starting a new project based on an existing site's visual language
8	- Documenting a site's design system that was never formally written down
9	- Preparing `.design/DESIGN.md` before running the design loop
10	- Extracting brand guidelines from a client's existing website
11	- Creating consistency documentation for a multi-page project
12	- Extracting design tokens from a Google Stitch project
13
14	## Workflow
15
16	### Step 1: Identify the Source
17
18	Ask the user for one of:
19
20	\| Source \| Method \|
21	\|--------\|--------\|
22	\| Live URL \| Browse via Playwright CLI or scraper, screenshot + extract HTML \|
23	\| Local HTML file \| Read the file directly \|
24	\| Screenshot image \| Analyse visually (limited — no exact hex extraction) \|
25	\| Existing project \| Scan `site/public/` for HTML files to analyse \|
26	\| Stitch project \| Use `@google/stitch-sdk` to fetch screen HTML + design theme \|
27
28	### Step 2: Extract Raw Design Data
29
30	#### From a Live URL
31
32	1. Browse the site using Playwright CLI:
33	```
34	playwright-cli -s=design open {url}
35	playwright-cli -s=design screenshot --filename=.design/screenshots/source-desktop.png
36	```
37
38	2. Extract the full HTML — either via scraper MCP or by reading the page source
39
40	3. Resize and screenshot mobile (375px):
41	```
42	playwright-cli -s=design resize 375 812
43	playwright-cli -s=design screenshot --filename=.design/screenshots/source-mobile.png
44	```
45
46	4. Close the session: `playwright-cli -s=design close`
47
48	#### From a Local HTML File
49
50	Read the file directly and extract design tokens from the source.
51
52	#### From a Screenshot Only
53
54	Analyse the image visually. Note: colour extraction will be approximate without HTML source. Flag this limitation in the output.
55
56	#### From a Google Stitch Project
57
58	If `@google/stitch-sdk` is installed and `STITCH_API_KEY` is set:
59
60	```typescript
61	import { stitch } from "@google/stitch-sdk";
62
63	// List projects to find the target
64	const projects = await stitch.projects();
65
66	// Get project details (includes designTheme)
67	const project = stitch.project(projectId);
68	const screens = await project.screens();
69
70	// Get HTML from the main screen
71	const screen = screens[0]; // or find by title
72	const htmlUrl = await screen.getHtml();
73	const imageUrl = await screen.getImage();
74	```
75
76	The Stitch `designTheme` object provides structured tokens directly:
77
78	```json
79	{
80	"colorMode": "DARK",
81	"font": "INTER",
82	"roundness": "ROUND_EIGHT",
83	"customColor": "#40baf7",
84	"saturation": 3
85	}
86	```
87
88	Map these to DESIGN.md sections:
89	- `colorMode` → Theme (Light/Dark)
90	- `font` → Typography font family
91	- `roundness` → Component border-radius (`ROUND_EIGHT` = 8px, `ROUND_SIXTEEN` = 16px, etc.)
92	- `customColor` → Primary brand colour
93	- `saturation` → Colour vibrancy (1-5 scale)
94
95	Then also download and analyse the HTML for the full palette (Stitch's theme object only has the primary colour — the full palette is in the generated CSS).
96
97	### Step 3: Analyse Design Tokens
98
99	Extract these from the HTML/CSS source:
100
101	#### Colours
102
103	Look in these locations (priority order):
104
105	1. CSS custom properties — `:root { --primary: #hex; }` or `@theme` blocks
106	2. Tailwind config — `<script>` block with `tailwind.config` or `@theme` in `<style>`
107	3. Inline styles — `style="color: #hex"` or `style="background: #hex"`
108	4. Tailwind classes — `bg-blue-600`, `text-gray-900` (map to palette)
109	5. Computed from screenshot — last resort, approximate
110
111	For each colour found, determine its role:
112
113	\| Role \| How to identify \|
114	\|------\|-----------------\|
115	\| Primary \| Buttons, links, active states, brand elements \|
116	\| Background \| `<body>` or `<html>` background \|
117	\| Surface \| Cards, containers, elevated elements \|
118	\| Text Primary \| `<h1>`, `<h2>`, main body text \|
119	\| Text Secondary \| Captions, metadata, muted text \|
120	\| Border \| Dividers, input borders, card borders \|
121	\| Accent \| Badges, notifications, highlights \|
122
123	#### Typography
124
125	Extract:
126
127	\| Token \| Where to find \|
128	\|-------\|---------------\|
129	\| Font families \| Google Fonts `<link>`, `@import`, `font-family` in CSS \|
130	\| Heading weights \| `font-bold`, `font-semibold`, or explicit `font-weight` \|
131	\| Body size \| Base `font-s

People who liked this also viewed

6 picks

Type