An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
Extract Design System
Extract design tokens (colors, typography, spacing, border radius, shadows) from any public website. Generates JSON and CSS custom properties for local projects. Available as…
Install
$
npx skills add arvindrk/extract-design-systemClaude Code
claude mcp add extract-design-system -- npx skills add arvindrk/extract-design-systemCursor / Claude Desktop (mcp.json)
{
"mcpServers": {
"extract-design-system": {
"command": "npx",
"args": [
"skills",
"add",
"arvindrk/extract-design-system"
]
}
}
}Install command taken from the project's README or registry entry. Always review code before running it.
README excerpt
Read full README on GitHub →extract-design-system — Extract Design Tokens from Any Website
Reverse-engineer design tokens (colors, typography, spacing, border radius, shadows) from any public website and generate starter JSON and CSS custom properties for your local project. Available as an AI agent skill (Claude, Cursor, Codex) and standalone CLI.
Skills follow Anthropic's Agent Skills overview and are installable through the skills.sh ecosystem.
This repository is skills-first. It publishes an installable extract-design-system skill, and the bundled CLI is the executable workflow the agent runs under the hood.
What It Extracts
| Token category | Examples |
|---|---|
| Colors | brand palette, backgrounds, text, borders |
| Typography | font families, sizes, weights, line heights |
| Spacing | padding and margin scale |
| Border radius | button, card, and pill radii |
| Shadows | box-shadow values across elevation levels |
Outputs a W3C-compatible tokens.json and a tokens.css file of CSS custom properties, ready to drop into any project.
Quick Start
Install the skill:
npx skills add arvindrk/extract-design-system
Run it from a supported coding agent with a public website:
Extract the design system from https://stripe.com and generate starter token files for this project.
Expected starter outputs:
.extract-design-system/raw.json.extract-design-system/normalized.jsondesign-system/tokens.jsondesign-system/tokens.css
About This Repository
This repository contains a focused agent skill for reverse-engineering a starter design system from a public website.
The skill is designed to give coding agents a repeatable workflow for:
- analyzing a public website's colors, typography, spacing, radius, and shadows
- normalizing the extracted output into a stable structure
- generating project-local starter token files
- summarizing findings before broader styling or app changes
Available Skill
extract-design-system
Extract a starter design system from a public website and turn it into local token files.
Use when:
- You want an agent to analyze a public website's visual primitives
- You want starter design tokens for an existing project
- You want a repeatable workflow instead of ad hoc prompting
- You want the agent to summarize findings before applying broader changes
What it produces:
.extract-design-system/raw.json.extract-design-system/normalized.jsondesign-system/tokens.jsondesign-system/tokens.css
Installation
Install the skill from GitHub with the skills CLI:
npx skills add arvindrk/extract-design-system
You can also browse the skill on skills.sh.
Usage
Once installed, the skill is available to supported coding agents. The agent should use it when a request matches the extraction workflow.
Example prompts:
Extract the design system from https://stripe.com and generate starter token files for this project.
Analyze https://linear.app and summarize the design primitives before generating local tokens.
Extract colors, typography, spacing, and radius tokens from https://vercel.com and save them for this codebase.
Similar plugs
The 1st Collaborative AI Design Agent Workspace. Local-first and open source. Create prototypes, websites, apps, dashboards, presentations, images, and videos with your team…
Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages
Turn any idea, plan, or codebase into a beautiful interactive diagram. An agent skill for Claude Code, Codex, and more.
Editorial diagram design for Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, and Pi. 44 diagram types. Self-contained HTML + SVG. No shadows. No Mermaid slop.
Clone any website with one command using AI coding agents