Chapter 3
Design Direction
How to guide AI toward distinctive, production-grade design — not generic “AI slop.”
The “AI Slop” Problem
Left to their own devices, AI agents converge on a predictable set of design choices: Inter or Roboto fonts, purple-to-blue gradients on white backgrounds, centered card grids, and generic rounded buttons. This is not because the AI lacks ability — it’s because without explicit direction, it defaults to the statistical center of its training data.
The fix is simple: direct the AI with the same specificity you’d give a human designer.
The Design Direction Framework
Before generating any UI, establish four decisions with your agent:
- Purpose: What problem does this interface solve? Who uses it?
- Tone: Pick an extreme aesthetic direction — brutalist, editorial, luxury, playful, organic, industrial, retro, or minimal. Commit fully.
- Typography: Choose distinctive, characterful fonts. Never generic (Inter, Roboto, Arial). Pair a display font with a body font.
- Color: Dominant colors with sharp accents. Avoid timid, evenly-distributed palettes. Use daisyUI semantic colors.
Aesthetic Directions (Pick One)
Brutalist
Raw typography, high contrast, minimal decoration. Unapologetic and bold.
Editorial
Magazine layouts, serif fonts, generous whitespace. Refined and authoritative.
Luxury
Refined details, gold accents, elegant spacing. Exclusive and polished.
Organic
Natural shapes, earth tones, flowing layouts. Warm and grounding.
Industrial
Monospace fonts, grid systems, utilitarian. Functional and sharp.
Playful
Bold colors, rounded shapes, animated elements. Fun and approachable.
Retro-Futuristic
Synthwave colors, neon accents, geometric patterns. Nostalgic yet forward.
Minimalist
Restraint, precision, subtle details. Less is everything.
Typography: Be Specific
Always specify exact fonts. The AI needs names, not descriptions. Good examples:
Use Crimson Pro for headings (weights 600, 700) and
JetBrains Mono for body text (weights 400, 500).
Pair them via Google Fonts.This is how this very site is styled. The AI can execute font pairing perfectly when given explicit names and weights.
Color Systems: daisyUI Semantic Colors
The daisyUI 5 color system is designed for theming. Every component uses semantic color names that auto-adapt:
| Token | Purpose | Rule |
|---|---|---|
--color-primary |
Main brand color | Use once — most important element only |
--color-secondary |
Optional secondary brand | Supporting elements, hover states |
--color-accent |
Optional accent | Highlights, badges, emphasis |
--color-base-100 |
Page background | Majority of the page surface |
--color-base-200 |
Elevated surface | Cards, drawers, elevated containers |
--color-base-content |
Text on base colors | Auto-contrasts against base-* backgrounds |
Spatial Composition
Direct the AI to break predictable layouts:
- Asymmetry: Request asymmetrical grids, off-center heroes, uneven column ratios
- Overlap: Elements that overlap section boundaries create depth
- Negative space: Specify generous whitespace — AI tends to pack content tightly
- Grid-breaking: Occasional full-bleed elements that break the container
Motion and Micro-Interactions
AI can implement CSS animations reliably. Specify:
-
Page load: Staggered reveals with
animation-delayon child elements - Scroll triggers: Intersection Observer for reveal-on-scroll
-
Hover states: Smooth transitions on interactive elements (
transition-all duration-300) - Focus: One orchestrated page load animation beats scattered micro-interactions
The Prompt Template
Here’s a template you can adapt for directing AI design:
Design direction for this site:
- Tone: [editorial / brutalist / luxury / playful / organic]
- Display font: [name] from Google Fonts
- Body font: [name] from Google Fonts
- Primary color: [hex or OKLCH] — use sparingly
- Background: [dark / light / textured], base-100 = [value]
- Layout: [asymmetric / grid-based / single-column / magazine]
- Motion: [scroll reveals / page load stagger / subtle / none]
- Components: daisyUI 5, semantic colors only
- NEVER: Inter, Roboto, Arial, purple gradients, centered cards grid
Common pitfall: If you don’t specify fonts, the AI will default to Inter, system-ui, or Roboto. Always name your fonts explicitly. Generic fonts are the #1 signal of AI-generated design.
This site uses: “Technical Manuscript” aesthetic — dark charcoal background, amber primary, Crimson Pro display + JetBrains Mono body. The AI was directed with the exact template above.
Next