Design tokens your AI agent actually uses.
Build your Tailwind design system in a visual studio, then hand it to your AI coding agent over a live MCP endpoint. Claude, Cursor, and friends generate on-brand UI from your real tokens — instead of guessing your colors every prompt.
Free to design one theme. No card until you connect an agent.
@theme {
--color-brand-600: #4f46e5;
--color-brand-700: #4338ca;
}
:root {
--primary: var(--color-brand-600);
--radius: 0.625rem;
}Semantic tokens alias to primitives — your agent gets meaning, not a frozen hex.
How it works
From a visual editor to your agent in three steps
Design your theme
Pick your brand colors, type, spacing, and radius. ToknHost generates a full, accessible Tailwind design system — primitives and semantic tokens, light and dark.
Get your MCP endpoint
Every save publishes your tokens to a live MCP server (plus a plain fetch URL). One private endpoint, always in sync with your design.
Your agent builds on-brand
Point Claude, Cursor, or any MCP client at it. They pull your tokens — shaped for your framework — and generate UI that matches your design system.
What you get
One source of truth for design — human and agent
Tailwind-first
Built around Tailwind v4 @theme. Also emits shadcn, Tailwind v3, CSS variables, and DTCG JSON — pick per request.
Semantic, not flattened
Semantic tokens alias to primitives (--primary: var(--color-brand-600)), so agents receive intent, not hardcoded hex.
Light + dark, always
Every token in both modes out of the box — no second pass, no drift between them.
A real MCP server
Not a download — a live endpoint your agent connects to, with a direct fetch URL for tools without MCP support.
Designer-quality defaults
Full 50–950 ramps, accessible foregrounds, sensible spacing and radius — generated to look hand-made.
Private and yours
Each endpoint is private by default behind a bearer token you can rotate anytime.
Pricing
Start free. Upgrade when your agent needs it.
Free
Design and explore one theme.
$0/mo
- ✓One design system
- ✓Full visual editor
- ✓Light + dark, accessible defaults
- —MCP endpoint & export
Pro
Serve your tokens to your AI agents.
$12/mo
- ✓Everything in Free
- ✓Live MCP endpoint + fetch URL
- ✓Export every framework format
- ✓Unlimited design systems
Card required · cancel anytime before day 7
FAQ
Questions, answered
What's MCP?
The Model Context Protocol — the open standard AI coding agents like Claude and Cursor use to pull in external context and tools. ToknHost runs an MCP server that serves your design tokens.
Do I need a card for the trial?
Yes — the 7-day Pro trial takes a card upfront and converts to $12/mo after. Cancel anytime before day 7 from your billing portal and you won't be charged.
Which frameworks are supported?
Tailwind v4, shadcn, Tailwind v3, CSS variables, and DTCG JSON. Your agent asks for the format it wants, per request.
Can I use it without MCP?
Yes — every theme also has a plain fetchable URL that returns the same tokens, for tools and workflows that don't speak MCP yet.
Give your agent a design system it understands.
Design your tokens once. Keep every AI-generated component on-brand.
Start free