OpenDesign · Model Context Protocol

Give your agent real design taste.

Connect OpenDesign's 900+ curated, grounded design systems to Cursor, Claude, Windsurf — any MCP client. Your agent searches the library, pulls a reference's actual tokens (color, type scale, spacing, layout, motion), and builds from those — not from memory.

Why MCP, not "just paste a link"? Many agent runtimes block or sandbox raw web fetches (URL allowlists, browser CORS). An MCP tool is connected by you, so it works where a bare fetch is refused — the network calls run from the local MCP process, with no CORS and no URL policy.

Remote — no install

Point any MCP client that speaks Streamable HTTP straight at this URL. No download, no local process, nothing to keep updated:

https://opendesign.cc/mcp/http

Claude Desktop / Claude Code (claude_desktop_config.json or .mcp.json):

{
  "mcpServers": {
    "opendesign": { "url": "https://opendesign.cc/mcp/http" }
  }
}

Stateless and read-only — every call just reads the same public catalog these static pages serve, so there's nothing session-specific to break. Same 5 tools as the local server below.

Sanity-check it directly:

curl -s https://opendesign.cc/mcp/http \
  -H "Content-Type: application/json" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/list"}'

Install — Node, zero dependencies

Prefer a local stdio process instead? Needs Node ≥ 18. Grab the one file, point your client at it:

curl -o opendesign-mcp.mjs https://opendesign.cc/mcp/opendesign-mcp.mjs

Then add to your MCP config (Claude Desktop: claude_desktop_config.json · Cursor: ~/.cursor/mcp.json):

{
  "mcpServers": {
    "opendesign": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/opendesign-mcp.mjs"]
    }
  }
}

Restart the client — opendesign appears in the tool list. Source & a Python version: github.com/qiuyiwu1989-star/opendesign.

What your agent gets

Tool	Does
`search_designs`	Find references by need — score-ranked. `"fintech trust"`, `tags:["ai"]`
`get_design_system`	A site's real grounded tokens (colors, typography, spacing, surfaces, layout, motion)
`fetch_design_spec_markdown`	The full 11-layer spec as Markdown — drop into a prompt
`list_designs`	Browse the catalog
`get_director_protocol`	The design-director protocol — diagnose → recommend → decompose
`recommend_references`	1 primary + 2 alternates from different aesthetic families — safe/bold/unexpected, enforced in code, not left to chance
`get_critique_rubric`	The 5-dimension scorecard for reviewing a design — you apply it, this just hands you the structure

Try it in one line

npx @modelcontextprotocol/inspector node opendesign-mcp.mjs