Why does my AI-generated UI look like turd?
Take control with design tokens
Clearly defining your design foundations – colours, typography, spacing, borders, shadows – as design tokens, and instructing your AI to stick to them, is key to avoiding your app turning into a sloppy mess.
Design your tokensYou and your AI aren't speaking the same design language
We've all felt the pain when designs don't translate from Figma to code. Design tokens introduce a shared vocabulary: named values for colors, spacing, typography.
The same problem exists with AI. Design tokens apply semantic names to standardised values – whether in Tailwind classes, CSS variables, or any other format. If your AI isn't instructed to use those tokens, it may just pick random values.
How to speak to your AI in design tokens
These examples use Tailwind CSS and shadcn/ui, the defaults for most AI generators, like Lovable. Same principles apply to any styling system.
Not sure what jargon your AI is using? Ask it:
Colour
Colours are organized in layers with semantic names. 'background' is your base, 'card' sits on top, 'popover' floats above. Each has a matching foreground color. Tell your AI which semantic color, not which hex code.
Dashboard Overview
Your weekly statistics
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.
Project Update
New features have been deployed
Typography
Font sizes use a named scale from extra-small to extra-large. Weights range from normal to bold. Your AI understands these token 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.
Card
Subtle depth
Card
Medium depth
Card
Strong depth
Layout
Layout tokens define breakpoints for different screen sizes and container widths. Tell your AI which container size to use and when layouts should change, instead of writing custom media queries or arbitrary widths.
Responsive breakpoints at different screen widths
Mobile
@sm
Tablet
@md
Desktop
@lg
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.
Item
Item
Item
Divider using border-t border-border
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.