ui.byronwade.com

Design systems that install as MCP — fail-closed consistency kits for agents. Stack: Contract MCP (required) · design.md/agents.md (law book) · skills (optional cookbook). Differentiator: shadcn MCP installs components; contract MCP enforces get_contract → validate_ui. Meridian is the first live contract. Harbor, Atlas, and Vellum follow. Free (stdio COGS ≈ $0). Marketing: https://ui.byronwade.com/stack · https://ui.byronwade.com/#stack

Browsers hitting these URLs get designed HTML. Agents receive raw text (Accept: text/markdown / text/plain, or ?raw=1).

Platform

• Home: Catalog · agent stack · how it works · pricing ($0)
• Agent stack: Why MCP + markdown + skills (full docs)
• stack.md: Same doctrine under Meridian system
• Meridian: Live cinematic contract (film + proofs)
• Harbor · Atlas · Vellum: Soon / preview

Platform (all contracts)

• platform.md: Shared architecture — MCP, filenames, JSON keys
• pricing.md: Why MCP is open source (COGS ≈ $0 on stdio)
• Skeleton SSOT: lib/platform/skeleton.ts
• DNA packs: lib/contracts/dna/{id}.ts (aesthetics may differ; structure must not)
• Contract JSON (same shape): /r/{id}.contract.json for every id

Meridian — for agents

• design.md: AI contract (frozen vs creative, OKLCH, contrast)
• agents.md: Strict operating manual — load order, platform consistency, skills, gates
• architecture.md: System layers
• llms.txt: Meridian discovery map
• meridian.contract.json: Machine contract
• Theme grammar lives in-repo at lib/design/

MCP · CLI

# Into ANY project (npx) — fetches /r/{id}.contract.json live
CONTRACT_ID=meridian CONTRACT_SITE=https://ui.byronwade.com \
  npx -y --package=github:byronwade/ui.byronwade.com contract-mcp

# Contributor checkout
CONTRACT_ID=meridian node packages/contract-mcp/server.mjs

# Pair with shadcn MCP for atom install (different job)
# npx shadcn@latest mcp

npm run gen:contract
npm run check:platform

Install UI: https://ui.byronwade.com/meridian/install
Prompts: build_surface · done_gate · Resources: contract://kit

MCP = lightweight consistency kit (identical tools on every contract): get_contract (before UI) · resolve_token · list_primitives · get_recipe · validate_ui (before done) Every response includes obey.must / obey.mustNot — agents must not invent tokens.

Skill loop (prove on site)

1. Theme → https://ui.byronwade.com/meridian/theme · skill meridian-theme
2. Surface → https://ui.byronwade.com/meridian/surfaces · skill meridian-surface
3. Compose → https://ui.byronwade.com/meridian/surfaces#proofs · skill meridian-compose
4. Cinematic → https://ui.byronwade.com/meridian · skill meridian-cinematic
5. A11y → https://ui.byronwade.com/meridian/theme#contrast · skill meridian-a11y

Research specs (ranked merge)

• System index: All detailed specs + DNA
• influences · meridian · sources
• layout · ux · dx
• color · typography · density
• ai-surfaces
• Repo paths: docs/*.md

Showcase

• Theme: Laws, knobs, workbench proof, contrast pairs
• Surfaces: Workbench + composer + four density lanes
• Skills: Top agent skills with on-site proofs
• System: Ranked research specs
• Film: Cinematic film covering the full skill loop

Install skills

npx skills add byronwade/ui.byronwade.com
npx skills add byronwade/ui.byronwade.com --skill meridian-theme

Enforce

• npm run check:platform — cross-contract structural parity
• npm run check:design
• npm run check:contrast
• npm run check:meridian
• TypeScript unions in lib/design/grammar.ts
• Cinematic + material laws in lib/design/recipes.ts
• Contract JSON + MCP tools for runtime agent guidance
• Structural renames land in skeleton.ts and regenerate every contract