Design System Analyzer
NakanoSanku/OhMySkills
Inspects a live website through Chrome DevTools and turns its CSS tokens, animations and hover states into a design system prompt.
Extracts evidence-backed style guides and motion appendices from websites, keeping reusable visual language and stripping product-specific content.
Install Web Style Extractor
$ npx skills add Lucent-Snow/style-extractor --skill style-extractor -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Lucent-Snow/style-extractor style-extractor --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
Claude Code skills documentation · loads skills from .claude/skills/
Install the "style-extractor" agent skill from https://github.com/Lucent-Snow/style-extractor/tree/main into .claude/skills/style-extractor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "style-extractor", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Lucent-Snow/style-extractor --skill style-extractor -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Lucent-Snow/style-extractor style-extractor --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "style-extractor" agent skill from https://github.com/Lucent-Snow/style-extractor/tree/main into .agents/skills/style-extractor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "style-extractor", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Lucent-Snow/style-extractor --skill style-extractor -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Lucent-Snow/style-extractor style-extractor --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "style-extractor" agent skill from https://github.com/Lucent-Snow/style-extractor/tree/main into .cursor/skills/style-extractor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "style-extractor", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Lucent-Snow/style-extractor --skill style-extractor -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Lucent-Snow/style-extractor style-extractor --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "style-extractor" agent skill from https://github.com/Lucent-Snow/style-extractor/tree/main into .gemini/skills/style-extractor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "style-extractor", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Lucent-Snow/style-extractor style-extractorInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Lucent-Snow/style-extractor --skill style-extractor -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "style-extractor" agent skill from https://github.com/Lucent-Snow/style-extractor/tree/main into .github/skills/style-extractor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "style-extractor", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Lucent-Snow/style-extractor --skill style-extractor -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Lucent-Snow/style-extractor style-extractor --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "style-extractor" agent skill from https://github.com/Lucent-Snow/style-extractor/tree/main into .opencode/skills/style-extractor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "style-extractor", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
style-extractor- GitHub stars
- 453
- Token cost
- ~3.8k tokens
- SKILL.md length
- 1,586 words
- Files
- 47 (incl. scripts, references)
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- None found
At a glance
Extracts evidence-backed style guides and motion appendices from websites, keeping reusable visual language and stripping product-specific content.
- Works in 5 steps: Inputs → 5 — Read the reference package (REQUIRED) → Abstraction and de-productization… → …
- Capturing a website's colors, typography and spacing as semantic tokens
- SKILL.md covers Output location (REQUIRED), References (quality bar), Required reference… and Workflow, plus 2 more sections
- Documenting component states and hover behavior from a live site
What it does
The agent pulls a reusable design system out of web UIs: colors, typography, spacing, components, states and, when relevant, motion such as timings, keyframes and delay chains. The core principle is to keep visual language and interaction rules and drop the source product's information architecture, copy, app logic and marketing claims.
Each extraction creates its own project folder under a style-extractor directory in the user's profile, never inside the skill folder. It holds a style guide, an evidence manifest and, if motion matters, a motion guide, plus evidence subfolders for screenshots, downloaded assets and raw notes. Templates define the required sections, and two included reference packages, a visual novel site and a design system, set the quality bar.
When your agent uses it
- Capturing a website's colors, typography and spacing as semantic tokens
- Documenting component states and hover behavior from a live site
- Recording runtime animation timings and keyframes in a motion appendix
- Building a style reference without copying a product's content
Example prompts
- “Extract a style guide from https://example.com with screenshots as evidence.”
- “Document the motion on the hero section of this landing page.”
- “Write semantic tokens for the buttons and navigation of this web app.”
Requirements
- A browser able to open the target site
Workflow steps
5 steps, taken from the step headings in SKILL.md.
- Inputs
- 5 — Read the reference package (REQUIRED)
- Abstraction and de-productization (REQUIRED)
- Semantic tokenization (REQUIRED)
- Write the deliverables
What it can do on your machine
Read from SKILL.md and the folder at commit 10bd355. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/, which the agent can run.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Web Style Extractor loads about 3.8k tokens when it runs, and up to ~2.9M if it reads all its reference files. Until then it costs about 80 tokens; SKILL.md has 1,586 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
Without a licence we can't republish the file, so here is its outline and opening line. It has 1,586 words (~3,791 tokens).
“Extract a reusable design system from web UIs: colors, typography, spacing, components, states, and, when relevant, motion (timings, keyframes, delay chains, JS-driven behavior).”
- name
- style-extractor
Files
SKILL.md and 46 other files (scripts, references) in the repository root of Lucent-Snow/style-extractor.
- SKILL.md
- .gitignore
- README.md
- media/duck.gif
- media/nine.gif
- references/9nine-visual-novel/evidence/assets/google-fonts.css
- references/9nine-visual-novel/evidence/assets/style.css
- references/9nine-visual-novel/evidence/assets/yakuhanjp.min.css
- references/9nine-visual-novel/evidence/screenshots/01-homepage-viewport.png
- references/9nine-visual-novel/evidence/screenshots/02-homepage-fullpage.png
- references/9nine-visual-novel/evidence/screenshots/03-nav-hover.png
- references/9nine-visual-novel/evidence/screenshots/04-button-hover.png
- references/9nine-visual-novel/evidence/screenshots/05-footer.png
- references/9nine-visual-novel/evidence/screenshots/06-character-section.png
- references/9nine-visual-novel/evidence/screenshots/07-news-section.png
- … and 32 more
Open the folder on GitHubat commit 10bd355
Compare with similar skills
Web Style Extractor next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Web Style Extractor this skillLucent-Snow/style-extractor | 453 | — | ~3.8k | Automated safety check: Pass | None | |
| Design System AnalyzerNakanoSanku/OhMySkills | 163 | — | ~1.2k | Automated safety check: Pass | None | |
| Transitions PolishJakubantalik/transitions.dev | 4.6k | 2 repos | ~3.2k | Automated safety check: Pass | Custom licence | |
| Tailwind Design SystemSuFxGIT/scoutarr | 114 | 5 repos | ~5.6k | Automated safety check: Pass | None | |
| Extract DesignManavarya09/design-extract | 4.2k | — | ~786 | Automated safety check: Notes | MIT | |
| Tailwind Design Systemjh941213/my-cc-harness | 126 | 9 repos | ~4.7k | Automated safety check: Pass | None |
Similar skills
Transitions Polish
Jakubantalik/transitions.dev
Audits existing UI animations against the transitions.dev motion-token scale and suggests tokens for duration, distance, scale, blur and easing.
Tailwind Design System
SuFxGIT/scoutarr
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns.
Extract Design
Manavarya09/design-extract
Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract.
Tailwind Design System
jh941213/my-cc-harness
Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns.
Tailwind V4 Shadcn
ever-works/ever-works
Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.
Related
Categories
Questions about Web Style Extractor
What does Web Style Extractor do?
Extracts evidence-backed style guides and motion appendices from websites, keeping reusable visual language and stripping product-specific content. The agent pulls a reusable design system out of web UIs: colors, typography, spacing, components, states and, when relevant, motion such as timings, keyframes and delay chains. The core principle is to keep visual language and interaction rules and drop the source product's information architecture, copy, app logic and marketing claims.
When should I use Web Style Extractor?
Web Style Extractor fits situations like: capturing a website's colors, typography and spacing as semantic tokens; documenting component states and hover behavior from a live site; recording runtime animation timings and keyframes in a motion appendix; building a style reference without copying a product's content.
How do I install Web Style Extractor in Claude Code?
Run `npx skills add Lucent-Snow/style-extractor --skill style-extractor -a claude-code`. Or copy the skill folder (the Lucent-Snow/style-extractor repository) into .claude/skills/style-extractor in your project. Claude Code loads it when a task matches its description.
How do I install Web Style Extractor in Codex?
Run `npx skills add Lucent-Snow/style-extractor --skill style-extractor -a codex`. Or copy the skill folder (the Lucent-Snow/style-extractor repository) into .agents/skills/style-extractor in your project. Codex loads it when a task matches its description.
Can I use Web Style Extractor in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Lucent-Snow/style-extractor --skill style-extractor -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/style-extractor, .gemini/skills/style-extractor, .github/skills/style-extractor and .opencode/skills/style-extractor in your project.
What does Web Style Extractor need to run?
SKILL.md names no scripts, command-line tools or credentials: Web Style Extractor is instructions for the agent only. Our summary lists: A browser able to open the target site.
Does Web Style Extractor access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Web Style Extractor safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Web Style Extractor use?
No licence was found for Web Style Extractor or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does Web Style Extractor use?
About 3.8k tokens (SKILL.md is roughly 15k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.9M tokens, read only when the agent opens those files.
What are the alternatives to Web Style Extractor?
Skills that share tags, products or a category with Web Style Extractor: Design System Analyzer (NakanoSanku/OhMySkills, 163 stars), Transitions Polish (Jakubantalik/transitions.dev, 4.6k stars), Tailwind Design System (SuFxGIT/scoutarr, 114 stars) and Extract Design (Manavarya09/design-extract, 4.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Web Style Extractor?
Lucent-Snow (a GitHub user) maintains it in Lucent-Snow/style-extractor, which has 453 GitHub stars. The repository was last updated on March 13, 2026.
Source: Lucent-Snow/style-extractor on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.