data-ai MCP Server
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.
Discovered via github-topic:mcp and last synced 3mo ago.
1. Install the package
npx extract-design-system
2. Add to claude_desktop_config.json
{
"mcpServers": {
"extract-design-system": {
"command": "npx",
"args": [
"extract-design-system"
]
}
}
}Config file location: ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) / %APPDATA%\Claude\claude_desktop_config.json (Windows)
Description
Run a full extraction from a URL and write `design-system/tokens.json` + `tokens.css`
Re-emit token files from the cached `.extract-design-system/normalized.json` without re-fetching
Read and return the current `design-system/tokens.json` without re-extracting