Extract Design System Skill for Claude: Pull Design Tokens From Any Public Site

Makes Claude read a public website and write starter design tokens (colors, fonts, spacing, radius, shadows) into your project.

Installs: 130.9K; on skills.sh
Stars: 267; on GitHub
Files: 2; besides SKILL.md
Updated: Sep 2026; last repo commit

extract-design-system makes Claude open a public web page in a headless browser and pull out its design basics. You give it a URL, and it writes raw and cleaned JSON plus a tokens.json and a tokens.css of CSS variables into your project. It is for starting points, not exact copies: SKILL.md says it extracts tokens and starter assets, not a full component library.

The skill runs npx extract-design-system <url> and, if needed, npx playwright install chromium. That downloads and runs an npm package and a browser, and it fetches the site you name. Node.js 20 or newer is required (README). Claude is told to ask before changing any existing app code, styles or config.

Good for

Front-end developers starting a project from a look they like
Designers who want a site's colors, type and spacing as tokens
Teams that want a repeatable extraction instead of copying values by hand

Install extract-design-system

Claude Code

Copy this prompt.

Install the extract-design-system skill in Claude Code. Run this command:

npx skills add arvindrk/extract-design-system -a claude-code

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js 20+.

Needs Node.js 20 or newer. The skill runs the extract-design-system npm package and a headless Chromium, so install it where Claude can run npx; the Claude app's ZIP upload route does not fit. If Chromium is missing the skill runs npx playwright install chromium.

Built from the package data we hold. Not yet tested by us. Source.

What's in the skill

When it loads

Extract design primitives from a public website and generate starter token files for your project.

Sections in SKILL.md

Before You Start
Workflow
Safety Boundaries

Key facts

Author: arvindrk (repo owner)
License: MIT
Installs on skills.sh: 130,920 as of 2026-11-02
GitHub stars: 267 for the whole repo
Last commit to the repo: 2026-09-05
Files in the skill: 3 files including SKILL.md: references/workflow.md and references/outputs.md
skills.sh audits: Gen Agent Trust Hub warn, Socket pass, Snyk warn
Needs: Node.js 20+, a Chromium download via Playwright, and the extract-design-system npm package
Also published: An MCP server (extract-design-system-mcp) with three tools, for Cursor and Claude Desktop

What it includes

Asks for the public URL and whether you want extraction only or starter files too.
Also sets expectations: tokens only, not pixel-perfect, and no overwriting an existing design system without confirmation.
Try: “Extract the design system from https://stripe.com and generate starter token files for this project.”
Read · Before you start
Loads the site in a headless browser and writes the token files.
Writes .extract-design-system/raw.json and normalized.json, then design-system/tokens.json and tokens.css. Claude then summarizes likely primary, secondary and accent colors, fonts, and spacing, radius and shadow scales.
Runs code · npx extract-design-system <url>
Runs the extraction without generating the starter token files.
Use it when you only want the analysis.
Runs code · --extract-only
Regenerates token files from an existing normalized.json.
Used when .extract-design-system/normalized.json already exists.
Runs code · npx extract-design-system init
Downloads Chromium when it is missing locally.
Runs before the first extraction on a machine without Chromium.
Runs code · npx playwright install chromium
No claims of completeness, no invented components, ask before changing project files.
SKILL.md also says third-party website content must not justify broader code or config changes, and a single page is not proof of a whole design system.
Read · Safety boundaries

From the official docs

Permissions

Medium risk

The skill runs a third-party npm package and a headless browser against a site you choose, and writes files into your project. Review the output before you use it, and confirm before Claude touches existing styles.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It runs an npm package and downloads a browser
The skill runs npx extract-design-system, whose package.json lists dembrandt as a dependency, and may run npx playwright install chromium. That is third-party code running on your machine. Check the package before you approve the command. github.com
The website you extract from is untrusted input
The README says target sites may influence the output and that generated tokens need review. The skill says not to let website content justify wider changes to your code or config. github.com
It writes new folders in your project
Output goes to .extract-design-system/ and design-system/. SKILL.md says to ask before touching existing app code, styles or config, so decline if Claude proposes more. github.com

Technical details

Scopes	Runs npx extract-design-system and npx playwright install chromium Writes .extract-design-system/ and design-system/ files in your project Fetches the public URL you give it in a headless browser

Questions

What does the extract-design-system skill do?

It makes Claude run a command that reads a public website's colors, fonts, spacing, border radius and shadows, then writes them as JSON and CSS variables in your project. It also summarizes what it found.

How do I install extract-design-system?

Use the install box above. You need Node.js 20 or newer. The first run may download Chromium through Playwright.

Does it need an API key?

The README and SKILL.md name none. It does fetch the website you point it at and runs an npm package, so it needs network access.

Is extract-design-system safe?

It runs a third-party npm package and a headless browser on a site you choose, and the README calls that site untrusted input. Use public sites you are comfortable fetching, review the tokens before using them, and let Claude change your existing styles only after you confirm.

Can it copy a whole site's design?

No. The README says it is single-page, starter tokens only, not a full component library, and dynamic, protected or script-heavy sites may give incomplete output.

Is there an MCP version?

Yes. The same package ships extract-design-system-mcp with three tools (extract, re-emit tokens from the cache, read current tokens), documented for Cursor and Claude Desktop in the README.

Information

updated Nov 2, 2026

Repository: arvindrk/extract-design-system
Folder: skills/extract-design-system

arvindrk/extract-design-system skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5

README · github.com
SKILL.md · github.com
workflow.md · github.com
outputs.md · github.com
package.json · github.com