- Learn
- Design Systems
MasterDesign Systems
Design tokens turn a vague 'make it look nice' into something an AI can apply exactly. Learn what design tokens and a design.md are, the foundations behind them, and how to hand a complete, on-brand design system to Claude, Cursor, or v0.
Jump To:
What Is a Design System?
A design system is the set of decisions behind how a product looks — its colors, type, spacing, and shapes — written down so they can be reused. Design tokens are those decisions as data; a design.md is that data packaged so an AI agent can build with it.
Tokens
The raw values — a primary color, a base radius, a font — named by their role, not their look. The single source of truth.
Foundations
Color, typography, spacing, radius, elevation and motion — the categories every token falls into and the rhythm that ties them together.
design.md
One Markdown file bundling the tokens, rules, and component specs — paste it into an AI agent and it builds on-brand UI on the first try.
The one-line version
A prompt like "make it modern and clean" gives the model nothing to anchor on. Design tokens replace that guesswork with exact values, and a design.md is how you hand the whole system over at once. Browse ready-made ones in the Design Marketplace.
Guided Lessons
Your Complete Design Systems Path
Click any lesson to expand it. Work through them in order, or jump straight to what you need.
A design token is a single design decision stored as a named value — primary = #6366f1, radius = 0.75rem, font-sans = Inter. Instead of scattering hex codes and pixel values across a hundred files, you name the decision once and reference the name everywhere.
The power is in the naming. A token is named for its role ("primary", "muted", "destructive"), not its appearance ("indigo-500", "light-gray"). Change the value behind the name and every surface that uses it updates at once — and an AI agent reading "use the primary color" always knows what you mean.
Mental model
A hex code is a fact. A token is a decision with a name. Design systems are built on the names, not the facts — that's what makes them reusable and easy to retheme.
Keep learning
Design Marketplace
Browse live themes and copy them as CSS or a design.md.
Build a Design System
Author tokens with a live preview and export a design.md.
AI Skills
Package expertise the same way you package a design system.
Prompt Engineering
Tokens give the model values; good prompts tell it what to do with them.
AI Automation
Wire design systems into repeatable build workflows.
Skills Marketplace
Install ready-made skills for Claude, Cursor, and more.
Give your AI a design system
Copy a ready-made design.md from the marketplace, or build your own with a live preview and ship it.