Point it at a URL, get a DESIGN.md — automatic design-token extraction (colors, type, spacing, radius) from any live site, ready for your coding agent.
Setup
Choose your client, copy the config, then fill in any required environment variables.
claude mcp add designscan -- npx -y @designscan/extractor~/.codex/config.toml
[mcp_servers.designscan]
command = "npx"
args = ["-y", "@designscan/extractor"]
# codex mcp add designscan -- npx -y @designscan/extractor~/.cursor/mcp.json
{
"mcpServers": {
"designscan": {
"command": "npx",
"args": [
"-y",
"@designscan/extractor"
]
}
}
}.vscode/mcp.json
{
"servers": {
"designscan": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@designscan/extractor"
]
}
}
}~/.gemini/settings.json
{
"mcpServers": {
"designscan": {
"command": "npx",
"args": [
"-y",
"@designscan/extractor"
]
}
}
}claude_desktop_config.json
{
"mcpServers": {
"designscan": {
"command": "npx",
"args": [
"-y",
"@designscan/extractor"
]
}
}
}.trae/mcp.json
{
"mcpServers": {
"designscan": {
"command": "npx",
"args": [
"-y",
"@designscan/extractor"
]
}
}
}