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: [安装/使用命令见下方] Run it from a supported coding agent with a public website: [安装/使用命令见下方] Expected starter outputs: .extract design system/raw.json .extract design system/normalized.json design system/tokens.json design 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 h