.cursor — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited .cursor (MCP Server) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
<p align="center"> <a href="https://www.npmjs.com/package/extract-design-system"> <img src="https://img.shields.io/npm/dw/extract-design-system?logo=npm&logoColor=white" alt="npm downloads" /> </a> <a href="https://skills.sh/arvindrk/extract-design-system/extract-design-system"> <img src="https://img.shields.io/badge/skills.sh-discovery-111111" alt="skills.sh" /> </a> <a href="https://github.com/arvindrk/extract-design-system/actions/workflows/ci.yml"> <img src="https://github.com/arvindrk/extract-design-system/actions/workflows/ci.yml/badge.svg" alt="ci" /> </a> </p>
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.
| 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.
Install the skill:
npx skills add arvindrk/extract-design-systemRun 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.cssThis 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:
Extract a starter design system from a public website and turn it into local token files.
Use when:
What it produces:
.extract-design-system/raw.json.extract-design-system/normalized.jsondesign-system/tokens.jsondesign-system/tokens.cssInstall the skill from GitHub with the skills CLI:
npx skills add arvindrk/extract-design-systemYou can also browse the skill on skills.sh.
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.Review https://tailwindcss.com, extract the most likely design primitives, and generate starter token files only if the results look usable.The skill is designed to:
This repository currently exposes:
skills/extract-design-system/SKILL.md - Main skill instructionsskills/extract-design-system/references/ - Supporting workflow and output referencessrc/ - Bundled CLI implementation used by the skilltests/ - CLI and normalization test coverageThe package also ships an MCP server (extract-design-system-mcp) that exposes the same workflow as structured tool calls for Cursor, Claude Desktop, and any MCP-compatible agent.
| Tool | Description |
|---|---|
extract_design_system | Run a full extraction from a URL and write design-system/tokens.json + tokens.css |
init_design_system | Re-emit token files from the cached .extract-design-system/normalized.json without re-fetching |
get_tokens | Read and return the current design-system/tokens.json without re-extracting |
Create .cursor/mcp.json in your project root:
{
"mcpServers": {
"extract-design-system": {
"command": "npx",
"args": ["-y", "extract-design-system-mcp"]
}
}
}Restart Cursor. The server appears under Settings → Features → MCP with all 3 tools listed.
Add to ~/Library/Application Support/Claude/claude_desktop_config.json:
{
"mcpServers": {
"extract-design-system": {
"command": "npx",
"args": ["-y", "extract-design-system-mcp"],
"cwd": "/path/to/your/project"
}
}
}Claude Desktop does not infer a working directory from context, so cwd is required. It controls where design-system/tokens.json and .extract-design-system/ are written.
The skill's executable workflow is backed by the published npm CLI in this repository.
npm install
npx playwright install chromium
npm run typecheck
npm test
npm run build
npm run dev -- --help
npm run cli -- --helpUseful local commands:
npm run dev -- https://example.com
npm run dev -- https://example.com --extract-only
npm run cli -- https://example.com
npm run cli -- initCONTRIBUTING.mdCODE_OF_CONDUCT.mdSECURITY.mdnpx playwright install chromiumMIT
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.