OpenDesign

The taste layer for AI-built software.

1,486 real design systems. Grounded tokens, not vibes. One line to connect.

Live site · MCP setup · Agent protocol · 中文说明

---

The problem

Ask any AI to build you a landing page. You get Inter, a blue-violet gradient hero, rounded-2xl on everything, a soft shadow on every card.

That's not a bug. It's the mathematical average of the training data — and an average has no brand. Every AI-built page ends up looking like every other AI-built page.

You can't prompt your way out of it. "Make it look premium" isn't executable. Pasting a screenshot isn't verifiable. The model still falls back to the mean.

The fix

Give the agent one real design system's actual values at the moment of generation.

"Build a fintech dashboard that feels trustworthy"
        ↓
  recommend_references()    → 1 primary + 2 alternates, deliberately different aesthetics
        ↓
  get_design_system("...")  → the REAL tokens from that site
        ↓
  { bg: "#08090A", ink: "#F7F8F8", muted: "#62666D",
    line: "rgba(255,255,255,0.08)", scale: [...], motion: {...} }
        ↓
  Every value traces to a design real humans shipped.

Not "Stripe-ish blue." The hex Stripe actually ships.

Connect it

Remote — nothing to install:

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

Local — zero-dependency Node:

{ "mcpServers": { "opendesign": { "command": "npx", "args": ["-y", "opendesign-mcp"] } } }

Works with Claude Desktop, Claude Code, Cursor, Windsurf — any MCP client. No account, no API key, no rate card.

No MCP? Everything is static and public. GET https://opendesign.cc/skill.md turns any agent into a design director; catalog.json, packs/<slug>/spec.json and llms.txt are plain fetches.

The 7 tools

Tool	What it does
get_director_protocol	Read first. The protocol: diagnose → form a POV → route → decompose
recommend_references	A brief in, 1 primary + 2 alternates from different aesthetic families — safe / bold / unexpected, enforced in code
get_design_system	The core one. A site's real grounded tokens
search_designs	Score-ranked search. Tells you which of your terms matched nothing instead of silently returning noise
list_designs	Browse the catalog
fetch_design_spec_markdown	The full spec as Markdown, 5 languages — drop straight into a prompt
get_critique_rubric	The 5-dimension review scorecard for "is this design any good?"

Why the tokens are trustworthy

Every entry is extracted by driving a real browser (Playwright), reading getComputedStyle off the actual DOM, aggregating by frequency, and grounding a vision model's read against those measurements. The numbers are measured, not remembered.

	Typical inspiration gallery	OpenDesign
What you get	A screenshot	Machine-readable token spec
Colors	You eyedrop them	Actual hex, frequency-ranked
Type	"looks like a grotesk"	Real scale: size / line-height / weight / tracking
Motion	—	Duration buckets + easing curves
Anti-patterns	—	An explicit don'ts list per site
For an agent	Unusable	One fetch = full design context