Design Playbook
AI can build fast, but without clear design intent it will converge on safe, generic outcomes. This playbook shows how to give AI the right inputs — at the right time — to produce distinctive, high-quality design without slowing delivery.
When to use this playbook
Core Principle
AI amplifies taste. It doesn't invent it.
When you give AI vague instructions, it defaults to “average” aesthetics — the statistical mean of everything it has seen. This produces competent but undifferentiated designs.
Strong design requires declared taste: specific references, precise language, and intentional constraints. Give AI clear inputs and it will amplify them. Give it nothing and it will give you nothing distinctive in return.
References
Real examples that show what “good” looks like for this project
Language
Precise vocabulary that names what you want, not vague descriptions
Constraints
Boundaries that focus AI on specific choices, not infinite options
Catalyst note
Stage-Aware Guidance
These steps scale with your project stage. A POC doesn't need production-level design polish, but it still benefits from clear intent. Add rigour as you advance.
| Stage | Design Expectation | Recommended Steps |
|---|---|---|
| POC | Clear hero, consistent tone, credibility | Steps 1–4 |
| MVP | Coherent system, repeatable patterns | Steps 1–6 |
| MMP | Polished flows, brand alignment | Steps 1–7 |
| PROD | Full system consistency, accessibility, performance | All steps + iteration |
The Playbook
Seven recommended steps for getting distinctive design from AI. Click each step to expand.
Design Intent
Prevent generic output by explicitly declaring intent before writing code
Before starting a Catalyst build, capture four things that will anchor AI toward distinctive output.
Real-world reference
A production site or app that's realistic and credible. Something actually shipped, not a concept.
Aspirational reference
A “concept car” reference. May be more expressive or experimental than what you'll actually build.
Declared vibe
3–5 adjectives that describe the feeling you're aiming for.
Audience signal
Who must this design convince? Different audiences need different visual signals.
Output
A short design intent note. This can live in chat context, a project doc, or a markdown file in your repo. Keep it concise — 4–6 sentences is enough.
Common mistake
Visual Context Injection
Give AI visual grounding so it doesn't default to generic patterns
Key rule: Screenshots outperform text prompts.
Modern AI models are vision-first. Without visual input, they fall back to training priors — the statistical average of everything they've seen. With visual input, they can adapt specific patterns to your context.
What to do:
- Capture screenshots of your real-world reference (the homepage, key UI, specific patterns)
- Capture screenshots of your aspirational reference
- Feed them directly into the AI model when prompting for design work
- Explicitly say: “Use this as a visual reference. Adapt structure and tone, not content.”
Browser screenshots
Direct captures of reference sites
Design inspection tools
Figma, DevTools, VisBug
Mobbin exports
Curated UI pattern screenshots
Why this matters
Language Calibration
Enable better prompts by using shared design vocabulary
Teams can't ask for what they can't name. Building a shared vocabulary makes your prompts more precise and gives AI specific targets instead of vague descriptions.
Layouts
Styles
Interactions
Component Intent
Best practice
Hero-First Design
Set the visual and emotional tone early with focused effort
The 50% Rule: Spend roughly half your design effort on the hero.
The hero defines:
- Typography scale and weight hierarchy
- Colour application and accent usage
- Spacing rhythm and density
- Animation intensity and style
The hero becomes:
- Demo thumbnail for stakeholders
- Pitch artefact for presentations
- Style reference for subsequent pages
- Visual anchor for brand alignment
Catalyst note
Structured Section Assembly
Avoid template soup and visual incoherence
When building full pages, explicitly define sections before asking AI to build them. This gives AI assembly instructions instead of leaving it to guess.
Define each section with:
Layout type
split, stacked, bento, etc.
Animation level
none, subtle, prominent
Content density
sparse, balanced, dense
Example section plan:
Micro-Iteration
Preserve good decisions while refining design
Once you have a working design, iterate on individual elements rather than regenerating entire pages or sections.
Do iterate on:
- • Individual components
- • Spacing and alignment
- • Animation timing and easing
- • Typography refinements
- • Color adjustments
Avoid:
- • Regenerating entire pages
- • Starting over when one element is wrong
- • Losing accumulated design decisions
- • “Just make it look better”
Why this matters
Style Extraction & Lock
Prevent late-stage design drift as you mature
As you move from MVP onward, extract your design decisions into a durable format that AI can reference in future sessions. This creates “design memory” that persists beyond a single conversation.
What to extract:
Colour tokens
Primary, accent, neutrals, semantics
Typography rules
Font stack, scale, weights
Spacing principles
Rhythm, container widths, gaps
Create a style.md file
Save your extracted tokens and rules into a simple markdown file. Feed this back into future AI prompts and reference it when building downstream surfaces (docs, app, presentations).
Catalyst note
How to Use This Playbook
Focus on Steps 1–4. Capture intent, inject visual context, and get the hero right. Skip the later steps until you need them.
Add Steps 5–7. Structure your sections, iterate surgically, and extract style tokens to prevent drift across multiple surfaces.
Apply this playbook retroactively if design feels generic. Start with Step 1 (intent) even if you've already built. It's never too late to redirect.
Catalyst note
Common Failure Modes
Patterns that consistently lead to generic or weak design outcomes.
No references
Starting with no visual grounding, expecting AI to invent a distinctive style
Text-only prompts
Describing design in words when a screenshot would be 10x more effective
Full regeneration loops
Re-generating entire pages when one element is wrong, losing good decisions
Skipping the hero
Trying to design everything at once instead of nailing the visual anchor first
Polish at the end
Treating design as a final coat of paint rather than a foundational input
Vague direction
'Make it look modern' instead of specific vocabulary and concrete references
How This Fits Catalyst
This playbook replaces slow, speculative design work. Instead of mood boards, Figma rounds, and long design debates, you give AI focused inputs upfront and let it amplify your declared taste.
The result: distinctive design at Catalyst speed. You keep the proof-led delivery model, stakeholders still see real software fast, and the output looks like it belongs to your project — not a template.