Extract Design System
Reverse-engineer design tokens (colors, type, spacing, radius, shadows) from any public website into W3C-ish JSON + CSS variables for your project.
Overview
arvindrk/extract-design-system is an agent skill + CLI that scrapes visual primitives from a public site and emits starter token files (`tokens.json`, `tokens.css`). Ideal when you need a fast token bootstrap from a competitor, reference brand, or legacy marketing site before building in code. Listed under Claude Marketplaces design/UI. Complements Theme Factory (generate tokens from brand inputs) and TypeUI (named aesthetics) when the source of truth is an existing live site.
Work with LimeDock
Using this skill? LimeDock can wire it into a durable automation you own.
Skills show what's possible. LimeDock builds and runs the owned marketing, sales, and ops automations around them.
We sell owned automations for SaaS teams — live workflows that plug into Slack, CRM, and your internal platform — not just a skill list.
Link
Installation guide
npx skills add arvindrk/extract-design-systemAlso available on npm as a standalone CLI (`extract-design-system`).
How to use it
Point the agent at a public URL: “Extract the design system from https://example.com and generate starter token files.” Review raw → normalized → project token outputs under `.extract-design-system/` and `design-system/` before applying broadly.
Example prompts
- “Extract the design system from https://stripe.com and generate tokens for this repo.”
- “Pull colors, type, spacing, and shadows from our marketing site into tokens.css.”
- “Compare tokens extracted from competitor A vs B and recommend a blended palette.”
- “Normalize the raw extraction and propose a 3-tier token architecture.”
Use cases and examples
- Bootstrap tokens from a reference brand site
- Competitive visual token capture
- Legacy site → CSS variable migration starter
- Agency kickoff from client’s existing marketing site
- Feed extracted tokens into Theme Factory / design-system setup
Prerequisites
- Public website URL (or accessible page)
- Agent Skills host that can run the bundled CLI workflow
- Network access for fetching the target site
- Human review before treating scraped tokens as brand-legal
Tips
- Scraped tokens are starters—rename and prune before production.
- Respect site ToS/robots; prefer sites you own for client work.
- Pair with brand-guidelines skill to document voice + usage rules.
- Don't auto-apply thousands of one-off hex values—cluster into a scale.