dark light
AgentKit
Three swappable themes for AI agent products — editorial dark, daylight bright, fintech…
Docs
Install
AgentKit
webdesignhot
design.md · open catalog + CLI + MCP
Design systems your
Design systems your
AI agent can actually read.
403 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
403
DESIGN.md files
400
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 → 403 DESIGN.md files extracted from real production design systems — Linear, Vercel, Stripe, Apple, Notion, and 398 more. Browse, preview, install.
CLI
npx @webdesignhot/design-md One 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 · diff A Model Context Protocol server so Claude, Cursor, and any MCP client can search, fetch, diff, and install designs without leaving the chat.
Spec
multi-theme webdesignhot/0.1 — 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 403 → Pulled from systems you already know.
light minimal
Apple
White-canvas product theatre — SF Pro Text, 980px pill CTAs, and a single-blue accent sy…
Docs
Install
Apple
webdesignhot
dark minimal
Linear
Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pi…
Docs
Install
Linear
webdesignhot
light editorial
Notion
Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed…
Docs
Install
Notion
webdesignhot
light editorial
Stripe
Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, sig…
Docs
Install
Stripe
webdesignhot
light sans
Tailwind CSS
The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, e…
Docs
Install
Tailwind CSS
webdesignhot
light minimal
Vercel
Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white ty…
Docs
Install
Vercel
webdesignhot
dark editorial
webdesignhot
AI-era editorial dark — pure black with one acid-lime accent.
Docs
Install
webdesignhot
webdesignhot
How it works
Three steps from blank repo to on-brand.
- Step 01Pick a designBrowse 403 systems by mood, color, or category. Preview each in six try-on templates before you commit.
- Step 02Drop 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 03Let the agent buildYour 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 · AgentKit Live
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, 281 tests. Ship your AI product's landing page in an afternoon.
See AgentKit →
Early-bird $79 $129 · first 50 buyers · lifetime updates
65
Components
281
Tests
9
Landing sections
Stop guessing your agent's design.
Browse 403 free DESIGN.md files, or grab AgentKit and ship the whole landing page.