What is the extract-design-system skill?
The extract-design-system skill is a SKILL.md in arvindrk/extract-design-system. It makes an AI coding agent run a CLI against a public URL, then write raw and normalized JSON, a W3C-compatible tokens.json and a tokens.css. It extracts colors, typography, spacing, radius and shadows, and needs Node 20 or newer.
The extract-design-system skill reads the visual language of a public website and turns it into starter design tokens. The skill folder holds SKILL.md plus two reference files, outputs.md and workflow.md, and it drives a command-line tool of the same name.
It is deliberately modest about what it produces. The result is a token starting point, not a component library and not a pixel-perfect copy. The skill also treats third-party site content as untrusted.
What changes in your agent's output
- The agent confirms the URL is public, installs a Chromium build with Playwright, then runs the extractor on the page.
- It writes
.extract-design-system/raw.jsonand.extract-design-system/normalized.json, thendesign-system/tokens.jsonanddesign-system/tokens.css. - The tokens cover colors, typography, spacing, border radius and shadows.
- It reviews the normalized file before it generates tokens and asks before modifying your code.
Who the extract-design-system skill is for
Best for
- Starting a project from the look of a public site you are allowed to reference.
- Producing a first token file for a redesign or migration.
- Comparing the tokens of several sites quickly.
Not for
- Private or logged-in sites. The skill is for public pages only.
- Whole-site extraction. It reads a single page at a time.
- Component libraries or pixel-perfect clones, which the skill says it does not produce.
Use it with UiChemy
Tokens are the first step. UiChemy turns designs into WordPress: Figma to WordPress converts a design file, and AI to WordPress imports an existing AI build or clones a site. Click Get Started on uichemy.com.
How to install Extract Design System Skill: Design Tokens From a URL
git clone https://github.com/arvindrk/extract-design-system.gitClone the repository
Run
git clone https://github.com/arvindrk/extract-design-system.git. The skill is the skills/extract-design-system folder.Copy the skill folder
Copy skills/extract-design-system into your agent's skills folder, keeping SKILL.md and the references folder together.
Prepare the tool
You need Node 20 or newer. The skill's workflow runs
npx playwright install chromiumand then the project's CLI,npx extract-design-systemfollowed by a public URL.Invoke it
Ask your agent to extract the design system from a public URL, then review the normalized file it writes.
Check that it loaded
Run it on a simple public page. You should see .extract-design-system/normalized.json and a design-system folder with tokens.json and tokens.css. Open tokens.css and check the colors against the page.
Key features
- Public URL inputYou give it a public page and it extracts from the rendered result.
- Five token groupsColors, typography, spacing, border radius and shadows are captured.
- Raw and normalized dataBoth a raw file and a normalized file are saved, so you can inspect what was read.
- W3C-compatible tokensThe tokens.json output follows the W3C design token format.
- CSS custom propertiesA tokens.css file makes the values usable in a stylesheet straight away.
- Extract-only modeAn
--extract-onlyflag stops after extraction, and an init command regenerates the token files. - Honest limitsThe skill states it is single-page and that dynamic or protected sites can come back incomplete.
- Safety boundariesIt does not infer components or semantic tokens and treats site content as untrusted.
- Confirmation before editsThe agent asks before it modifies any code in your project.
Frequently asked questions
What is the extract-design-system skill?
It is the skills/extract-design-system folder in arvindrk/extract-design-system. It makes an AI coding agent extract colors, type, spacing, radius and shadows from a public URL and write them as tokens.json and tokens.css.
How do I install extract-design-system?
Clone the repository, copy skills/extract-design-system into your agent's skills folder, and make sure Node 20 or newer is installed. The workflow installs a Chromium build with Playwright and then runs npx extract-design-system with your URL.
What files does it create?
A .extract-design-system folder with raw.json and normalized.json, plus a design-system folder with tokens.json and tokens.css. The tokens.json file is W3C-compatible, and tokens.css exposes the same values as CSS custom properties for direct use.
Does it work on private or dynamic sites?
It is for public sites. The skill says dynamic or protected sites may produce incomplete results, and extraction reads a single page, so run it on each page whose style you need.
Is the output a full design system?
No. The skill says the result is a starting set of tokens, not a component library and not pixel-perfect. It does not infer components or semantic tokens, so you still decide how the values map to your system.
Which AI agents can use it?
The README describes it as an agent skill for Claude, Cursor and Codex, and as a standalone CLI. Other agents that load SKILL.md folders should also work, but only those three are named by the project.
What are the alternatives?
The designlang MCP and the Dembrandt MCP expose similar extraction as MCP tools. Brandkit builds a brand foundation from a brief instead of reading an existing site, so pick by your starting point.