extract-design-system skill
A skill and CLI that pull colors, type, spacing, radius and shadows from a public site and save them as JSON and CSS tokens
- 261 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Launches a browser and loads third-party sites
- Writes files into the project
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/extract-design-systemDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Launches a browser and loads third-party sites
- Writes files into the project
This is third-party code. Review the repository files before installing.
What it does
The skill gives the agent a repeatable flow: confirm the site is public and reachable, run the bundled CLI through Playwright, normalize the output and generate starter tokens. It writes raw and normalized data to .extract-design-system/, plus design-system/tokens.json in W3C format and tokens.css with CSS custom properties. The agent must ask before touching existing app styles or code.
Who it is for. For frontend developers and designers who need a starter design system modeled on an existing site.
Good fit when
- You need starter tokens from a reference site
- You want to analyze a site's visual primitives before a redesign
- You want a repeatable flow instead of manual DevTools inspection
Not a fit when
- You need a full component library or a pixel-perfect copy
- The site is behind login or heavily script-driven
Example request
Extract the design system from https://linear.app and generate starter tokens for this projectLimitations
Public sites only, one page per run. The output is starter tokens, with no components and no framework config changes. Dynamic sites may give incomplete data. Requires Chromium for Playwright.
How to disable. Delete the extract-design-system folder from the agent's skills directory and the generated files in .extract-design-system/ and design-system/.
FAQ
Can I use it without an agent?
Yes, the CLI is included: npx extract-design-system <url>. The skill wraps it in a workflow.
Will the agent change my styles?
The skill requires confirmation before modifying existing code, styles or config.
Discussion
No questions or reviews yet.
Related
SkillsA skill that turns reference UIs into a structured design profile in JSON and generates matching UI from your content
designlang
designlang (design-extract)
A CLI and MCP server that reads a live website and pulls out its design system: DTCG tokens, a Tailwind config, Figma variables and a brand book
A CLI that extracts any website's design system into tokens: colors, typography, spacing, shadows, in one run
Meta-skill that reads a brand from a URL, name or screenshot and turns it into a full design system as a new skill
A UI, presentation and graphics design skill for coding agents: canvas drafts driven through the superdesign CLI
A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
README in short
The README lists what is extracted and which files appear in the project, and gives the skills.sh install command. It includes example prompts and the steps the skill follows. Separate sections cover limits and security: target sites are untrusted input and tokens need review. MIT licensed.
README badge
Original SKILL.md
--- name: extract-design-system description: Extract design primitives from a public website and generate starter token files for your project. --- # Extract Design System Use this skill when the user wants to reverse-engineer a public website's design primitives into project-local starter token files. ## Before You Start Ask for: - the target public website URL - whether the user wants extraction only or starter files too Set expectations: - this v1 extracts tokens and starter assets, not a full component library - results are useful for initialization, not pixel-perfect reproduction - do not overwrite an existing design system or app styling without confirmation ## Workflow 1. Confirm the target URL is public and reachable. 2. Run: ```bash npx playwright install chromium npx extract-design-system <url> ```