Agent-native design system
Design system agent demo
Machine-readable contracts, intent benchmarks, and MCP tools so agents reuse @dt/* before inventing markup. Colophon covers the full stack.
MCP & docs
- MCP: /mcp
- Card: /.well-known/mcp/server-card.json
- Agent card: /.well-known/agent.json
- Case study (repo):
docs/AGENTIC_DS_CASE_STUDY.md - Catalog policy (repo):
docs/CATALOG-POLICY.md
Intent golden set
20 queries verified by npm run agent:eval.
- alert-dismissible“dismissible warning banner”
- button-primary“primary action button”
- title-semantic“semantic page title heading”
- submit-loading“loading submit button”
- modal“modal dialog”
- cookie-consent“cookie consent”
- text-input“labeled text input”
- pagination“pagination controls”
Pattern recipes
MCP tool suggest_pattern_for_layout
@dt/CTASection
marketing call-to-action band at section end
Avoid: inline alert or toast feedback
@dt/Header
legacy site header with nav items and language switcher
Avoid: Next.js app shell — prefer SiteHeader in app routes
@dt/HeroSection
full-bleed marketing hero with alignment and background variants
Avoid: blog article hero — prefer ArticleHero pattern
@dt/SiteHeader
Next.js app shell sticky header with brand and nav
Avoid: Storybook-only legacy Header pattern
@dt/SiteFooter
site-wide footer with link columns and social links
Avoid: legacy Footer pattern with different IA
@dt/ArticleHero
blog article hero with title metadata and optional image
Avoid: marketing homepage hero — prefer HeroSection
Local verification
npm run build:tokens npm run agent:eval npm run agentic-ds-audit npm run ds:mcp