Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Extract Design System

Reverse-engineers a public website's colors, fonts and spacing into starter design token files for your project.

Design & UIIntermediate★ 178⑂ 20AI score 9/10Last updated: Aug 1, 2026

What it does

  • Launches the target public site with Playwright (Chromium) and collects rendered style primitives.
  • Summarizes likely primary/secondary/accent colors, detected fonts, and spacing/radius/shadow scales.
  • Generates starter files: design-system/tokens.json and design-system/tokens.css, plus raw/normalized JSON artifacts.
  • Supports --extract-only (analysis without file generation) and init (regenerate tokens from existing normalized.json).
  • Includes explicit safety boundaries: no overwriting existing design systems or config without confirmation.

Who it's for

  • Frontend developers bootstrapping design tokens for a new project.
  • Designers who want numeric values behind a reference site's look and feel.
  • Teams doing early discovery work for a design system migration.

Example uses

  1. "Extract the design tokens from https://example.com and generate tokens.css" → full run with starter files.
  2. "Just show me the color palette, don't write files" → runs with --extract-only and summarizes normalized.json.
  3. "Reuse yesterday's normalized.json and rebuild the token files" → runs extract-design-system init.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/arvindrk/extract-design-system/HEAD/skills/extract-design-system/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/extract-design-system folder from the GitHub repo arvindrk/extract-design-system into my ~/.claude/skills/extract-design-system/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/arvindrk/extract-design-system.git && mkdir -p ~/.claude/skills && cp -r extract-design-system/skills/extract-design-system ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Clone the repo: git clone https://github.com/arvindrk/extract-design-system.git
  3. Create the skills folder: mkdir -p ~/.claude/skills
  4. Copy the skill: cp -r extract-design-system/skills/extract-design-system ~/.claude/skills/
  5. Verify Node.js is installed (node -v); install it if missing.
  6. Prepare the browser engine: npx playwright install chromium
  7. Restart Claude Code and ask something like "extract the design tokens from this website".
View source on GitHub ↗License: MIT