Why does everything I build with AI look like turd?
Take control with design tokens
Tokens are the blueprint for every color, spacing value, and corner in your app. Not a theme, but a foundational design layer that keeps things coherent. Without it, your AI's frontend will eventually turn into a sloppy mess.
Design Your AI-Friendly TokensColour scale
Typography
Spacing & Borders
Keep your AI on track
Even great AI designs drift over time. Tokens keep things consistent, but only if you tell your AI to use them. Once you've designed your tokens, instruct your AI to stick to them with our Claude Skill or GitHub Copilot Instructionsto stop your designs from degrading into a sloppy mess.
Read on to learn more about how modern styling systems use design tokens to create consistent, coherent UIs, and how to get your AI to do the same.
A brief primer on tokens
Colour
Colors use semantic tokens organized by layering (background, card, popover) and intent (primary, success, destructive, warning). Each color has foreground, subdued, and highlight variants for different emphasis levels. Always pair backgrounds with their matching foreground colors.
Spacing
Spacing uses a scale where each step is 4 pixels. When you tell your AI 'add some space,' it picks randomly. Be specific about your spacing values and stick to the scale.
Typography
Font sizes use a named scale from extra-small to extra-large. Line-height follows our leading scale (tight, snug, normal, relaxed, loose) and letter spacing follows our tracking scale (tighter through widest) defined in tokens. Weights range from normal to bold. Your AI understands these semantic names better than raw pixel values.
Shadows
Shadows use preset levels: small (subtle), medium, and large (pronounced). Don't tell your AI 'add a shadow'—specify which level. Cards usually get small shadows, modals get large.
Borders
Borders use preset widths (1px, 2px, 4px) and styles (solid, dashed, dotted). Tell your AI which width and style from our token system, not arbitrary values.
Animations
Animation tokens define consistent motion for UI elements. Use duration tokens (fast, normal, slow) for timing, and easing tokens (ease-out, ease-in-out, spring) for natural movement. Apply these to transitions, hover states, and micro-interactions to create polished, professional interfaces.
Ready to level up your AI generated code?
Design a complete set of tokens then give them to your AI and watch it finally understand what you actually want.