darklight
AgentKit
Three swappable themes for AI agent products — editorial dark, daylight bright, fintech…
DocsInstall
AgentKit
webdesignhot
design.md · open catalog + CLI + MCPDesign systems your
Design systems your
AI agent can actually read.
480 DESIGN.md files extracted from real production design systems. One command drops the tokens — color, type, spacing, components — into your repo, so your coding agent builds in a real brand instead of guessing.
$npx @webdesignhot/design-md add linear
480
DESIGN.md files
473
Hand-curated
4
Export formats · Tailwind, CSS, DTCG, Figma
6
Try-on templates · desktop + mobile
Everything an agent needs to look right.
design.md is a catalog, a CLI, and an MCP server around one open spec. Use whichever fits your tool chain.
Catalog
browse →480 DESIGN.md files extracted from real production design systems — Linear, Vercel, Stripe, Apple, Notion, and 475 more. Browse, preview, install.
CLI
npx @webdesignhot/design-mdOne command drops a DESIGN.md into your repo. add · list · diff · export · lint · init — your agent reads it instead of guessing your brand.
MCP server
get · search · diffA Model Context Protocol server so Claude, Cursor, and any MCP client can search, fetch, diff, and install designs without leaving the chat.
Spec
multi-themewebdesignhot/0.2 — a structured Markdown format for color, type, spacing, and component tokens. Models light + dark + brand variants in one file.
Create
generate →Generate a brand-new DESIGN.md from a prompt or a URL. Tweak any token live, export to Tailwind 4, CSS variables, DTCG JSON, or Figma.
Open the full catalog →Featured
Browse all 480 →Pulled from systems you already know.
lightminimal
Apple
White-canvas product theatre — SF Pro Text, 980px pill CTAs, and a single-blue accent sy…
DocsInstall
Apple
webdesignhot
darkminimal
Linear
Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pi…
DocsInstall
Linear
webdesignhot
lighteditorial
Notion
Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed…
DocsInstall
Notion
webdesignhot
lighteditorial
Stripe
Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, sig…
DocsInstall
Stripe
webdesignhot
lightsans
Tailwind CSS
The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, e…
DocsInstall
Tailwind CSS
webdesignhot
lightminimal
Vercel
Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white ty…
DocsInstall
Vercel
webdesignhot
darkeditorial
webdesignhot
AI-era editorial dark — pure black with one acid-lime accent.
DocsInstall
webdesignhot
webdesignhot
How it works
Three steps from blank repo to on-brand.
- Step 01
Pick a design
Browse 480 systems by mood, color, or category. Preview each in six try-on templates before you commit. - Step 02
Drop it in
npx @webdesignhot/design-md add <slug>writes a DESIGN.md at your repo root. Or wire the MCP server straight into your agent. - Step 03
Let the agent build
Your coding agent reads the spec and ships UI in a credible brand — or export to Tailwind 4, CSS variables, DTCG JSON, or Figma.
Paired product · AgentKitLive
Got the tokens? Now ship the page.
AgentKit reads any DESIGN.md and renders 9 production landing sections in that design system — live chat hero, agent trace viewer, tool-calling demo. A Next.js 16 kit: 65 components, 291 tests. Ship your AI product's landing page in an afternoon.
See AgentKit →Early-bird $79 $129 · first 50 buyers · compatible v1.x updates
65
Components
291
Tests
9
Landing sections
Stop guessing your agent's design.
Browse 480 free DESIGN.md files, or grab AgentKit and ship the whole landing page.