Design system agent demo

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/HeroSection

  full-bleed marketing hero with alignment and background variants

  Avoid: blog article hero — prefer ArticleHero pattern

• @dt/HomeHero

  production homepage hero with kinetic title and scroll indicator

  Avoid: generic marketing hero without homepage-specific motion

• @dt/SiteHeader

  Next.js app shell sticky header with brand and nav

  Avoid: embedded header inside a card or modal

• @dt/SiteFooter

  site-wide footer with link columns and social links

  Avoid: legacy Footer pattern with different IA

• @dt/NewsBulletin

  homepage news strip with three topical slots above footer

  Avoid: full blog index or article grid

• @dt/ArticleHero

  blog article hero with title metadata and optional image

  Avoid: marketing homepage hero — prefer HeroSection

• @dt/ContactInquiryPanel

  contact page message vs book-a-call tab panel

  Avoid: standalone contact form without tab chrome

• @dt/PricingPageContent

  pricing page with package tiers and agency comparison

  Avoid: single pricing card inline on homepage

Local verification

npm run build:tokens
npm run agent:eval
npm run agentic-ds-audit
npm run ds:mcp