Source Design exposes a Model Context Protocol (MCP) server that lets AI coding assistants extract live design systems, propose component upgrades, and browse 22 pre-extracted design libraries — all without leaving the editor.
https://source--design.vercel.app/api/mcp
Supports both SSE (Server-Sent Events) and HTTP transports. No authentication required.
The server registers four tools. Each one maps to a core capability of Source Design.
Inspects a live website's deployed CSS, parses every rule, clusters raw values into semantic roles, and returns a full design system in four formats: DESIGN.md, Tailwind v4 @theme, CSS custom properties, and W3C JSON tokens.
Parameters
url(string, required) — the website to extract, e.g. "stripe.com"Returns
JSON object with colors, fonts, spacing, shadows, and the four compiled files as string fields.
Extracts a site's brand tokens and generates clean UI component proposals (buttons, cards, headers, inputs) that match the existing visual identity.
Parameters
url(string, required) — the website to analyzeReturns
Structured proposals for standard UI blocks with production-ready CSS using the site's own extracted tokens.
Returns the catalog of 22 pre-extracted design systems from popular sites: ChatGPT, Vercel, Supabase, GitHub, Netflix, Porsche, and 16 others.
Parameters
None.
Returns
JSON array of objects, each with slug, name, and url fields.
Retrieves a specific pre-extracted design system from the library by its slug. Returns the full token set in all four export formats.
Parameters
slug(string, required) — e.g. "vercel", "supabase", "netflix"Returns
The complete design system: colors, fonts, spacing, shadows, and all four compiled file strings.
Open Settings → Connectors → Add a custom connector. Name it "Source Design" and paste the MCP URL. No sign-in needed.
Open Settings → Apps & Connectors → Enable Developer mode → Create a new connector named "Source Design" with the MCP URL. No authentication.
Add to your .cursor/mcp.json:
{
"mcpServers": {
"source-design": {
"url": "https://source--design.vercel.app/api/mcp"
}
}
}Run one command:
claude mcp add --transport http source-design https://source--design.vercel.app/api/mcp
Once connected, try these in any supported client: