extract-design-system: Extract design tokens (colors, typography, spacing, border radius, shadows) from any public website

by arvindrk · MCP Server · ★ 253

Last updated: · Indexed by AgentSkillsHub · Auto-synced every 8h

Featured in: AI Design Tools

How to install extract-design-system

npx skills add arvindrk/extract-design-system

Taken from the project's README on GitHub.

Security audit verdict: SAFE · quality 76/100

None of the 42 rules matched — no credential harvesting, no data exfiltration, no curl-pipe-shell installer. Scanned against 42 published rules built on the SlowMist agent-security taxonomy, refreshed every 8 hours.

The quality score combines nine heuristic checks of the repo and its README: completeness, clarity, specificity, examples, structure, agent readiness, step-by-step content, instruction quality and security notes. It rates how well the project explains itself to an agent, not the code.

agent-skillsautomationbrand-auditclaude-code-skillsclaude-skillsclicsscursor-skillsdesign-mddesign-ops

Quick Facts

Stars253
Forks31
LanguageTypeScript
CategoryMCP Server
LicenseMIT
Quality Score76/100
Open Issues4
Last Updated2026-09-05
Created2026-03-22
Platformsbrowser, claude-code, cli, codex, mcp, node
Est. Tokens~16k

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.

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%)

extract-design-system alternative? Top 6 similar tools

Looking for a extract-design-system alternative? If you're comparing extract-design-system with other mcp server tools, these 6 projects are the closest alternatives on Agent Skills Hub — ranked by topic overlap, star count, and community traction.

  • awesome-ai-agent-skills by seb1n · ⭐ 218

    103 ready-to-use AI agent skills for Claude Code, OpenAI Codex, Gemini CLI, Cursor, GitHub Copilot, Windsurf,

  • brandmd by yuvrajangadsingh · ⭐ 71

    Stop Claude Code/Cursor from guessing UI. Extract any website's design system into a spec-valid DESIGN.md that

  • styleseed by bitjaru · ⭐ 1.0k

    Open-source design-method engine for Claude Code, Codex & Cursor. One agent skill with 22 internal workflows f

  • awesome-claude-skills by karanb192 · ⭐ 571

    🎯 The definitive collection of 50+ verified Awesome Claude Skills for Claude Code, Claude.ai, and API. Boost

  • oh-my-design by kwakseongjae · ⭐ 570

    Give your AI coding agent a design system. One command installs 500+ quality-graded company DESIGN.md referenc

  • copilot-mcp by VikashLoomba · ⭐ 506

    A VSCode extension that lets you find and install Agent Skills and MCP Apps to use with GitHub Copilot, Claude

More MCP Server Tools

Explore other popular mcp server tools:

View all MCP Server tools →

Popular TypeScript Agent Tools

How this security grade is produced

Grades come from a rule-based scan built on the SlowMist agent-security taxonomy: 42 published rules, covering credential harvesting, data exfiltration, curl | sh installers and more. It is a first-layer scan, not a manual audit — we say so rather than overstate it.

The scale of the problem is documented independently: Liu et al. (2026), in a study of 31,132 agent skills, report that 26.1% contain security vulnerabilities. Our own full-catalog census is published as a citable open dataset.

Sources & who's responsible:

View on GitHub → Browse MCP Server tools