DesignScan runs on your own machine — the client starts it, so there is no endpoint to ping. 42 installs a week from npm. Last commit 14 Jun 2026.
Extract a website’s design tokens (colors, type, spacing, shadows) as DESIGN.md, W3C, or CSS.
Today is the operative word: we check DesignScan every 15 minutes and re-read its code on every release. Watch it and you find out the day that stops being true.
This server runs on your own machine — install it with the package manager and the client starts it for you. Package name taken from the official registry entry.
claude mcp add designscan -- npx -y @designscan/extractor
{
"mcpServers": {
"designscan": {
"args": [
"-y",
"@designscan/extractor"
],
"command": "npx"
}
}
}
[mcp_servers.designscan]
command = "npx"
args = ["-y", "@designscan/extractor"]
{
"mcpServers": {
"designscan": {
"args": [
"-y",
"@designscan/extractor"
],
"command": "npx"
}
}
}
{
"mcpServers": {
"designscan": {
"args": [
"-y",
"@designscan/extractor"
],
"command": "npx"
}
}
}
Generate design systems: OKLCH color palettes, fluid type scales, spacing, shape and icon tokens.
Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code.
Two-way Figma MCP: extract + verify design-to-code, or generate on-brand Figma pages from a prompt.
Extract reusable component libraries and design tokens from Vue applications
Translate design tokens between Tailwind, Figma, CSS, Material 3, and SwiftUI
Generate design token systems from a hex color — OKLCH-derived, WCAG-validated, multi-format
Automated design token builder producing clean CSS and Sass assets.
Translate HTML prototypes into Figma using your design system's real components and tokens.
Answers built from our own checks of this server.