extract-design-system: pull design tokens from a public website

Who it's for

Install this Skill when you need to reverse-engineer design tokens from a public website and generate starter JSON plus CSS custom properties for a local project. Official coverage: colors, typography, spacing, border radius, shadows. It can be used as an AI agent skill (Claude, Cursor, Codex) or as a standalone CLI.

It fits people who want starter tokens quickly, not a full component library. The body names those three agents and also a standalone CLI; do not read that as support for only one of them. If the target site is not publicly reachable, or you expect it to patch framework config or rewrite the app automatically, this skill is a mismatch.

Page: https://github.com/arvindrk/extract-design-system

First try in 3 minutes

Use only this install command:

npx skills add arvindrk/extract-design-system

Preconditions: you have a local project and plan to pull tokens from “one publicly reachable page”; you accept that it will write the files the docs name. Do not specify a directory that does not appear.

On the first try, check scope first; do not write files at once. Ask the agent to confirm: which tokens it can pull, which files it will generate, and what it will not do. The success signal is that the agent names colors / typography / spacing / border radius / shadows, and lists .extract-design-system/raw.json, .extract-design-system/normalized.json, design-system/tokens.json, design-system/tokens.css; and restates Public websites only, Single-page extraction workflow, Starter tokens, not a full component library, No framework config patching or automatic app rewrites.

After that confirmation, ask it to extract using the official example: https://stripe.com and generate starter token files for this project. The success signal is that those four files appear and framework config was not changed. The page mentions a standalone CLI but gives no start command; do not invent one.

Use cases

Case 1: Pull Stripe with the official example. The original wording is Extract the design system from https://stripe.com and generate starter token files for this project. This writes files and reaches the public web; confirm the project directory before running. What you can check is starter token files, not a component set.

Case 2: Swap in another public single page and still produce only starter tokens. Give the agent any page that opens publicly, and ask it to pull tokens only, without changing the app. The success signal is still those four official files, and the agent refuses to add framework patches. Do not assume a multi-page site will be crawled in full; the body says single-page.

Usage limits

Public websites only. Pages that are private or need sign-in are out of scope.

One page at a time. The output is starter tokens, not a full component library.

It will not do framework config patching, and it will not do automatic app rewrites.

Output paths follow the body; do not rename them or save them to an unwritten location.

Claude, Cursor, Codex, and standalone CLI are all in the original wording; do not write exclusive support. The CLI start method is not given; do not invent it. Do not invent unwritten selectors, signed-in sessions, or bulk domains.