opendesign

---

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

1. Propose a site — open an issue, takes a minute
2. Fix a spec — spot a wrong color or a weak don’ts list? PR the entry
3. 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}
}