How do I install Opendesign?

Copy the stdio config for Cursor, Claude Desktop, Claude Code, or VS Code on this page. It uses the publisher's install, not a PlugMCP proxy.

Does Opendesign need an API key?

No required environment variable is listed on this record.

What transport does Opendesign use?

Opendesign runs locally over stdio.

When was Opendesign last checked?

Last checked 2026-10-27. 从真实网站提取设计系统，并通过 MCP 把设计规范交给 AI 编程 Agent。 | Extract design systems from real websites and give AI coding agents grounded specifications through MCP.

Opendesign MCP server

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

1,486 sites · 920 with full Playwright screenshot packs · 5 languages · ~$0.10 marginal cost per site

What's actually in a spec

Two tiers, and the numbers below are what you will literally find in the files — verify any of them by downloading one pack.

All 1,486 sites — 6 measured token layers (spec.json, also inlined in catalog.json):

colors · typography · spacing · surfaces · layout · motion

Every value is read off the live page with Playwright + getComputedStyle, then grounded against those measurements. Nothing in this tier is a model's impression of the site.

The 920 sites with full packs — all 11 layers + a paste-ready system prompt (sites-entry.json):

identity · colors · typography · spacing · surfaces · layout · components · motion · interaction · voice · don'ts + systemPrompt

Measured across a 158-pack sample, every one of these layers is populated in 98–100% of packs. The five extra layers are the interpretive ones — component recipes, interaction rules, copy voice, and the anti-pattern list — which need the screenshots the pack pipeline produces. The same content is rendered as DESIGN.md (9 sections) for dropping straight into a prompt.

Same shape across every site in a tier, so an agent that learns to read one has learned to read all of them. Check spec_completeness in catalog.json to know which tier a site is in before you commit to it. → layer definitions + per-layer status

// GET https://opendesign.cc/packs/linear/spec.json
{
  "colors": { "bg": "#08090A", "ink": "#F7F8F8", "muted": "#62666D",
              "line": "rgba(255,255,255,0.08)",
              "principle": "Extreme contrast for focus, subtle noise and semi-transparent layers for depth." },
  "typography": { "display": "grotesque-sans", "scale": [ /* size / lh / weight / ls */ ] },
  "spacing": { "base": 4, "scale": [4, 8, 16, 24, 32, 48, 64, 96] },
  "motion": { /* durations + easing */ },
  "surfaces": { /* radii, elevation strategy */ }
}

Also usable by humans

Browse opendesign.cc — infinite canvas, 5-language detail pages, downloadable design packs (spec + tokens + real screenshots as a ZIP).

Run your own

git clone https://github.com/qiuyiwu1989-star/opendesign
cd opendesign/extract && ./setup.sh
python3 extract.py https://your-site.com          # drive the browser, measure the DOM
python3 synthesize.py extracts/your-site-com      # → spec.json + DESIGN.md
./pack.sh extracts/your-site-com                  # → downloadable pack

Full pipeline, self-hostable: architecture · deployment · data pipeline · self-hosted data layer

Docs

Concepts — positioning & first principles · layer definitions · design pack standard · lessons learned

Agent integration — MCP setup · agent integration · the director protocol

Operating it — curator workflow · quality gate · lessons learned

Contributing

Propose a site — open an issue, takes a minute
Fix a spec — spot a wrong color or a weak don'ts list? PR the entry
Anything else — tools, docs, translations

Selection bar: a clear design DNA you can grasp in three pages, decomposable into tokens, with an opinion about what it refuses to do. Not: content farms, template SaaS, component-library soup. → CONTRIBUTING.md

License

Code MIT · Curated specs CC BY 4.0 (commercial use fine, keep attribution) · Original sites' assets © respective owners

@misc{opendesign2026,
  title  = {OpenDesign: an open standard for extracting reusable web design
            tokens via browser instrumentation and vision models},
  author = {Qiu, Yiwu and OpenDesign contributors},
  year   = {2026},
  url    = {https://opendesign.cc}
}

Made with ✦ by Qiu Yiwu

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

	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

1,486 sites · 920 with full Playwright screenshot packs · 5 languages · ~$0.10 marginal cost per site

What's actually in a spec

Two tiers, and the numbers below are what you will literally find in the files — verify any of them by downloading one pack.

All 1,486 sites — 6 measured token layers (spec.json, also inlined in catalog.json):

colors · typography · spacing · surfaces · layout · motion

Every value is read off the live page with Playwright + getComputedStyle, then grounded against those measurements. Nothing in this tier is a model's impression of the site.

The 920 sites with full packs — all 11 layers + a paste-ready system prompt (sites-entry.json):

identity · colors · typography · spacing · surfaces · layout · components · motion · interaction · voice · don'ts + systemPrompt

// GET https://opendesign.cc/packs/linear/spec.json
{
  "colors": { "bg": "#08090A", "ink": "#F7F8F8", "muted": "#62666D",
              "line": "rgba(255,255,255,0.08)",
              "principle": "Extreme contrast for focus, subtle noise and semi-transparent layers for depth." },
  "typography": { "display": "grotesque-sans", "scale": [ /* size / lh / weight / ls */ ] },
  "spacing": { "base": 4, "scale": [4, 8, 16, 24, 32, 48, 64, 96] },
  "motion": { /* durations + easing */ },
  "surfaces": { /* radii, elevation strategy */ }
}

Also usable by humans

Browse opendesign.cc — infinite canvas, 5-language detail pages, downloadable design packs (spec + tokens + real screenshots as a ZIP).

Run your own

git clone https://github.com/qiuyiwu1989-star/opendesign
cd opendesign/extract && ./setup.sh
python3 extract.py https://your-site.com          # drive the browser, measure the DOM
python3 synthesize.py extracts/your-site-com      # → spec.json + DESIGN.md
./pack.sh extracts/your-site-com                  # → downloadable pack

Full pipeline, self-hostable: architecture · deployment · data pipeline · self-hosted data layer

Docs

Concepts — positioning & first principles · layer definitions · design pack standard · lessons learned

Agent integration — MCP setup · agent integration · the director protocol

Operating it — curator workflow · quality gate · lessons learned

Contributing

Propose a site — open an issue, takes a minute
Fix a spec — spot a wrong color or a weak don'ts list? PR the entry
Anything else — tools, docs, translations

License

Code MIT · Curated specs CC BY 4.0 (commercial use fine, keep attribution) · Original sites' assets © respective owners

@misc{opendesign2026,
  title  = {OpenDesign: an open standard for extracting reusable web design
            tokens via browser instrumentation and vision models},
  author = {Qiu, Yiwu and OpenDesign contributors},
  year   = {2026},
  url    = {https://opendesign.cc}
}

Made with ✦ by Qiu Yiwu

Add this server

Host a copy with our keys and logs.

Server facts

Tools

Questions

How do I install Opendesign?

Does Opendesign need an API key?

What transport does Opendesign use?

When was Opendesign last checked?

Documentation

OpenDesign

The taste layer for AI-built software.

The problem

The fix

Connect it

The 7 tools

Why the tokens are trustworthy

What's actually in a spec

Also usable by humans

Run your own

Docs

Contributing

License

Add this server

Host a copy with our keys and logs.

Server facts

Tools

Questions

How do I install Opendesign?

Does Opendesign need an API key?

What transport does Opendesign use?

When was Opendesign last checked?

Documentation

OpenDesign

The taste layer for AI-built software.

The problem

The fix

Connect it

The 7 tools

Why the tokens are trustworthy

What's actually in a spec

Also usable by humans

Run your own

Docs

Contributing

License