Extract Design Tokens — Design skill for Claude Code
Extract design tokens - colors, type, spacing, shadows - from a URL, screenshot, or CSS into CSS variables and JSON.
How to install Extract Design Tokens
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open humbleteam/extract-design-tokens and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
What Extract Design Tokens does
Extract design tokens - colors, type, spacing, shadows - from a URL, screenshot, or CSS into CSS variables and JSON.
Alternatives in Design
- Brand Guidelines — Apply Anthropic's official brand colors and typography to artifacts 94.1k ★
- Theme Swap — Recolour an extracted site's design around a new brand primary 3.6k ★
- Extract — Design System & Product Reverse-Engineering - Extract tokens, components, architecture, and PRDs from codebase 2.8k ★
README
Extract design tokens
**Pull a named design-token set - palette, type, spacing, radii, shadows, and motion - from a live URL, a screenshot, or a CSS file, and get back CSS custom properties plus W3C-shaped JSON, built for design teams and the engineers who work with them.**
[](https://github.com/humbleteam/extract-design-tokens/actions/workflows/validate.yml) [](https://github.com/humbleteam/extract-design-tokens/stargazers) [](https://github.com/humbleteam/extract-design-tokens/commits/main) [](LICENSE) [](https://github.com/humbleteam/extract-design-tokens/blob/main/SKILL.md)
`extract-design-tokens` turns a production URL, screenshots, or a raw CSS file into a design-token set: role-named CSS custom properties plus JSON in the W3C Design Tokens Community Group format. The rule that keeps it honest: any value not visible in the source is marked not extracted, never guessed.
Table of contents
- What it does
- Quick start
- Usage
- Example output
- How it works
- How is this different from just asking the model?
- FAQ
- Related skills
- Who maintains this
What it does
- Reads a live URL, screenshots, or a CSS/SCSS file and pulls out color,
Related Skills
Site Design
Extract a website's design system into DESIGN.md using Firecrawl (colors, fonts, spacing, components)
Tokenize
Stand up design system foundations — tokens, type scale, color, and spacing with adaptive-interface checks.
Style Guide
Generate comprehensive design system documentation including colors, typography, spacing, components, and usag
Sync Figma Tokens
Re-run the Figma-to-code token sync — extract current Figma variables, rebuild code outputs via Style Dictiona
Token
Design token creation and updates. Use when adding, modifying, or checking Dialtone design tokens (--dt- CSS v
God Export Tokens
Export the current design system as DTCG tokens, CSS variables, Tailwind v4 theme and DESIGN.md
Related Agents
Ds Tokens
Use ONLY to extract design tokens (colors, spacing, radius, typography) from the Figma file's LOCAL variable c
Design Scanner
Extract the design system a codebase already ships — tokens, type scale, spacing, motion, and a reverse-engine
Design Analyst
Design Analyst. Measures work against the token system — colors, type, spacing, radii, alignment grids, elemen
