What is Website Design Systems MCP?
website-design-systems-mcp is an MIT licensed MCP server that extracts a design system from a website URL. It fetches the page over HTTP with no browser, parses the CSS with Cheerio, and generates a skill.md covering colors, typography, spacing, radius, shadows and layout. Four tools are exposed.
It is an MCP server built around one job: take a website URL and describe the design system behind it. The result is a structured skill.md file that an AI assistant can read when it recreates the same look.
No browser is involved. The README says extraction is pure HTTP with browser-like headers and rotating user agents, which keeps it light but also sets the limits listed further down.
How the extraction works
- It fetches the page with browser-like headers to avoid simple blocking.
- Cheerio parses the HTML and finds the style sources.
- Inline styles, style tags and external stylesheets are collected.
- The CSS is analyzed for colors, typography and spacing patterns.
- Everything is compiled into one structured skill.md.
What the generated file contains
- YAML frontmatter, brand identity with logo, favicon and tagline, and a color palette organized by usage with hex, RGB and CSS variables.
- Font families, type scale and line heights, plus a spacing scale from xs to 4xl.
- Border radius tokens, box shadows, container width, breakpoints and grid, and all CSS custom properties.
Who it is for
Best for
- Developers who want a quick token sheet from a reference site before building. Extract Design System MCP is a page to compare.
- Teams comparing options. Related: Design Extract MCP and Dembrandt.
- Agents that need a written style guide. Related: DESIGN.md.
Not for
- Sites that render their styles only with JavaScript. The README warns these may not be captured.
- Pages behind aggressive bot protection such as Cloudflare, which may block the request.
- Login-gated pages, since it cannot reach authenticated content.
Use it with UiChemy
This server gives an agent the tokens of a reference site. To carry the result into WordPress, UiChemy's Composer writes the layout as real code inside Elementor or Gutenberg, and Figma to WordPress converts finished designs. Click Get Started on uichemy.com.
Connect Website Design Systems MCP: Extract a Site’s Design System to skill.md to your AI client
npx website-design-systems-mcpPick an install route
Run it directly with
npx website-design-systems-mcp, or install it into a project withnpm install website-design-systems-mcp.Edit the client config
For Claude Desktop on macOS, open
~/Library/Application Support/Claude/claude_desktop_config.jsonand add the entry shown above.Use a local build if you prefer
Clone the repository, run
npm installandnpm run build, then point the config atdist/index.jswith the node command.Ask for a site
Give the agent a URL and call
extract_design_system. Usevalidate_urlfirst if you want to check the page is reachable.
Client configuration
{
"mcpServers": {
"website-design-systems": {
"command": "npx",
"args": ["-y", "website-design-systems-mcp"]
}
}
}Endpoints and ports
dist/index.jsUsed by the local node configWhat you can do with it
- Color palette extractionPrimary, secondary and neutral colors get semantic names, with hex, RGB and CSS variables.
- Typography analysisFont families, type scale, weights and line heights are captured.
- Spacing detectionSpacing tokens, base units and CSS variables are collected.
- Radius and shadow tokensBorder radius and box shadow definitions are included in the output.
- Layout analysisContainer widths, breakpoints and grid systems are recorded.
- No browser requiredPlain HTTP extraction means no Puppeteer or Playwright install.
- Anti-blocking headersUser agent rotation and proper headers reduce simple request blocks.
Tools it exposes
extract_design_system
The main tool. Takes a URL and returns a complete skill.md with colors, typography, spacing and more.
validate_url
Checks that a URL is accessible and returns its status code and content type.
get_site_colors
Extracts only the color palette, as JSON with primary, secondary and neutral colors.
get_site_typography
Extracts only typography, as JSON with fonts, type scale and text styles.
Frequently asked questions
What is website-design-systems-mcp?
It is a Model Context Protocol server that extracts a design system from any website URL and generates an AI-readable skill.md file, so an assistant can recreate the site's colors, typography, spacing and layout.
How do I install website-design-systems-mcp?
Run npx website-design-systems-mcp directly, or add the package to a project with its npm install command from the README. Then add the server to your client config with the npx -y entry shown on this page, and restart the client so it loads.
Does it need a headless browser?
No. The README says it uses pure HTTP extraction with Cheerio, with no Puppeteer or Playwright. The trade-off is that sites that build their styles only in JavaScript may not be captured fully.
Which tools does it provide?
Four tools: extract_design_system returns the full skill.md, validate_url checks that a page is reachable, get_site_colors returns the palette only, and get_site_typography returns fonts and type scale only. The first is the main tool.
Does it work with Claude Desktop and other clients?
The README gives a Claude Desktop configuration for macOS and notes the project is MCP compatible. Any client that can launch a local MCP server with the same npx or node command should be able to use it, though the README documents only Claude Desktop.
What are its limits?
It may miss styles on JavaScript-rendered sites, can be blocked by aggressive bot protection such as Cloudflare, and cannot reach pages that need a login. It works best on ordinary public websites.
What else can extract a site's design?
This server extracts colors, typography, spacing, radius, shadow and layout tokens from a site over plain HTTP, with no headless browser, and writes AI-readable skill.md files. Related: Design Extract MCP, Extract Design System MCP and extract-design-system.