extract-design-system

About extract-design-system

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 skill, and the bundled CLI is the executable workflow the agent runs under the hood. What It Extracts font fami

agent-skills automation brand-audit claude-code-skills claude-skills cli css cursor-skills design-md design-ops

Quick Facts

Stars	72
Forks	11
Language	TypeScript
Category	MCP Server
License	MIT
Quality Score	74.6160759568613/100
Open Issues	3
Last Updated	2026-06-20
Created	2026-03-22
Platforms	browser, claude-code, cli, codex, mcp, node
Est. Tokens	~16k

Compatible Skills

These tools work well together with extract-design-system for enhanced workflows:

design-system-ops — semantic(0.55)+complementary+rare_topics+similar_pop+shared_platform (68%)
typeui.sh — semantic(0.50)+complementary+rare_topics+same_lang+similar_pop+shared_platform (67%)
claude-design-auditor-skill — semantic(0.52)+complementary+rare_topics+similar_pop+shared_platform (67%)
design-dna — semantic(0.61)+complementary+rare_topics+shared_platform (65%)

More MCP Server Tools

Explore other popular mcp server tools:

ECC ⭐ 226.5k
n8n ⭐ 195.7k
everything-claude-code ⭐ 186.6k
dify ⭐ 148.2k
open-webui ⭐ 143.9k
cc-switch ⭐ 114.8k
gemini-cli ⭐ 105.8k
awesome-mcp-servers ⭐ 90.3k
servers ⭐ 88.1k
lobehub ⭐ 79.6k

View all MCP Server tools →

Popular TypeScript Agent Tools

openclaw ⭐ 382.2k · Codex Skill
n8n ⭐ 195.7k · MCP Server
dify ⭐ 148.2k · MCP Server
gstack ⭐ 120.5k · Agent Tool
gemini-cli ⭐ 105.8k · MCP Server

Frequently Asked Questions

What is extract-design-system?

extract-design-system is 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. It is categorized as a MCP Server with 72 GitHub stars.

What programming language is extract-design-system written in?

extract-design-system is primarily written in TypeScript. It covers topics such as agent-skills, automation, brand-audit.

How do I install or use extract-design-system?

You can find installation instructions and usage details in the extract-design-system GitHub repository at github.com/arvindrk/extract-design-system. The project has 72 stars and 11 forks, indicating an active community.

What license does extract-design-system use?

extract-design-system is released under the MIT license, making it free to use and modify according to the license terms.

View on GitHub → Browse MCP Server tools