Extract design tokens (colors, typography, spacing, border radius, shadows) from any public website. Generates JSON and CSS custom properties for local projects. Available as an AI agent skill (Claude, Cursor, Codex) and standalone CLI.
SaferSkills independently audited extract-design-system (Agent Skill) 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.
Use this skill when the user wants to reverse-engineer a public website's design primitives into project-local starter token files.
Ask for:
Set expectations:
npx playwright install chromium
npx extract-design-system <url>.extract-design-system/normalized.json and summarize:npx extract-design-system <url> --extract-only.extract-design-system/normalized.json and only wants to regenerate starter token files, run:npx extract-design-system init.extract-design-system/raw.json.extract-design-system/normalized.jsondesign-system/tokens.jsondesign-system/tokens.css~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.