extract-design-system MCP Server
arvindrk/extract-design-system
[](https://agentrank-ai.com/tool/arvindrk--extract-design-system/?utm_source=badge&utm_medium=readme&utm_campaign=agentrank_badge) 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.
claude mcp add agentrank -- npx -y agentrank-mcp-server Overview
arvindrk/extract-design-system is a TypeScript tool licensed under MIT. 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. Topics: agent-skills, automation, cli, cursor-skills, design-system, skills-sh, token-extractor, claude-code-skills, claude-skills, design-ops, design-tokens, developer-experience, frontend, mcp, playwright, ui-audit, brand-audit, css, design-md, nodejs.
Ranked #22648 out of 24846 indexed tools.
Ecosystem
Score Breakdown
242 stars → growing community
Last commit 2mo ago → moderate activity
0/4 issues closed → many open issues
3 contributors → small team
No dependents → no downstream usage
Weights: Freshness 20% · Issue Health 20% · Dependents 22% · Stars 10% · Contributors 8% · How we score →
How to Improve
Matched Queries
From the README
<p align="center">
<a href="https://www.npmjs.com/package/extract-design-system">
</a>
<a href="https://skills.sh/arvindrk/extract-design-system/extract-design-system">
</a>
<a href="https://github.com/arvindrk/extract-design-system/actions/workflows/ci.yml">
</a>
</p>
# 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](https://platform.claude.com/docs/en/agents-and-tools/agent-skills/overview) and are installable through the [skills.sh](https://skills.sh/arvindrk/extract-design-system/extract-design-system) ecosystem.
This repository is skills-first. It publishes an installable `extract-design-system` skill, and the bundled CLI is the ex Read full README on GitHub → Get the weekly AgentRank digest
Top movers, new tools, ecosystem insights — straight to your inbox.