The AI-Augmented
Design Playbook

Phase 0: Context

Set the stage so AI can think with you, not at you.

This is the most underrated phase. Skip it and every subsequent AI interaction is worse. The quality of your context pack directly determines the quality of AI partnership throughout the project.

The Context Pack

project-name/
├── context/
│   ├── brief.md              # Product, users, constraints, goals
│   ├── design-system.md      # Tokens, components, patterns
│   ├── app-structure.md      # Current screens, flows, navigation
│   ├── decisions.md          # Design decision log (ongoing)
│   └── [topic].md            # Competitive research, IA map, etc.

Prompt Pattern

Here's the product context: [paste brief]
Help me organize this into a structured project brief.
What's missing that you'd need to be a useful thinking partner on this project?

Exit Criteria

• Brief covers product, users, constraints, and goals
• Design system documented (even if minimal)
• Current state captured (or "greenfield" noted)
• Context folder is handoff-ready for a new team member

Phase 1: Discover

Expand the map before you pick a direction.

This is where AI earns its keep fastest. Competitive research that would take days takes hours. Problem space exploration that lives in your head gets externalized and pressure-tested.

Interaction Mode: Expansive Dialogue

Don't ask for a report. Think out loud and let AI expand on it.

Prompt Patterns

# Competitive Research
Analyze [competitors] focusing on: [specific dimensions].
Don't just list features — compare approaches and interaction patterns.
What gaps exist that no one is filling?

# Problem Space Expansion
I'm designing [X] for [users]. Here's what I think the core problems are: [list].
What am I missing? What adjacent problems would a user encounter
before and after using this product?

# Assumption Check
Here are the assumptions I'm working with: [list].
Which ones are riskiest? What would change if each one were wrong?

Exit Criteria

• You can articulate your unique angle in the landscape
• Assumptions are surfaced and risks consciously accepted
• At least one surprising finding that shifted your thinking

Phase 2: Define

Make strategic choices that constrain everything downstream.

This is where product intuition matters most. AI can generate 10 directions — your job is to pick the one with conviction and articulate why.

Interaction Mode: Socratic Challenge

Push back on AI suggestions. Ask "why not the opposite?" The best definitions come from eliminating alternatives with reason.

Prompt Patterns

# User Story Reframe
I'm building [X]. The obvious user is [Y].
But I think the real opportunity is [Z]. Help me articulate why
and what it means for the product.

# Strategy Pressure Test
Here's my product strategy: [strategy].
Play devil's advocate. What's the strongest argument against this direction?

# Entity Modeling
The core objects in this product are: [list].
Help me map the relationships. What's the central entity?
What does that choice imply for the UI?

Exit Criteria

• Product strategy explained in 2 sentences
• Target user specific enough for design decisions
• Entity model clarifies primary vs. secondary in the UI
• Key decisions logged with rationale

Phase 3: Structure

Design the bones before the skin.

Information architecture is combinatorial — many valid ways to organize the same content. AI rapidly generates and compares structural options while you evaluate against user mental models.

Interaction Mode: Structured Exploration

Explore 2–3 structural options in depth before committing. Have AI articulate the tradeoffs of each.

Prompt Patterns

# IA Exploration
Here are the core surfaces in the app: [list].
Generate 3 navigation structures. For each one, explain:
- What it prioritizes / What it buries
- How a new user vs. power user experiences it

# Flow Validation
Here's the IA: [structure].
Walk me through these user stories: [stories].
Where does the structure support vs. fight the flow?

# Empty State Design
For each screen in [IA], what does it look like when there's no data?
How does the empty state guide the user?

Exit Criteria

• IA supports all key user stories
• Empty states and edge cases accounted for
• Navigation model decided with documented rationale
• Screen inventory complete

Phase 4: Explore

Find the visual and interaction language.

This is where your design eye matters most. AI can generate mood boards and suggest directions, but it can't replace your aesthetic judgment. Expand the option space, then curate ruthlessly.

Interaction Mode: Creative Ping-Pong

Share a vague feeling. Let AI articulate it. React. Refine. AI helps you discover what you want by generating things to react to.

Prompt Patterns

# Direction Exploration
The product is [X] for [users]. The feeling should be [descriptors].
Give me 3-4 visual directions. For each: name it, describe the personality,
suggest key design decisions (color, typography, density, motion).

# Reference Analysis
Here's a design I'm inspired by: [reference].
Break down what makes it work structurally — spacing, hierarchy,
and composition principles I could extract.

# Design System Foundation
Based on [direction], propose a design system foundation:
color palette, type scale, spacing scale, corner radius, shadow system.

Exit Criteria

• Visual direction chosen with clear rationale
• Design system tokens defined (even if preliminary)
• You can articulate the "why" behind visual choices
• Direction specific enough for someone else to execute

Phase 5: Design

Screen-level decisions, one surface at a time.

AI as execution partner accelerates the most here. Describe what a screen should do, have AI generate a structured draft, then refine through critique cycles.

Interaction Mode: Art Direction

You're the director. AI proposes, you react and redirect. "More whitespace." "The hierarchy is wrong." "Try it with the action at the bottom."

Prompt Patterns

# Screen Design
Here's the screen: [name and purpose].
Context: [where user came from, what they're trying to do].
Content: [what needs to be on this screen, in priority order].
Generate a detailed layout proposal with hierarchy and interaction notes.

# UI Copy
Write the copy for [screen/flow]. Tone: [tone]. User is [context].
Give me 2-3 options for the key headline.

# Screen Critique
Here's my current design for [screen]: [description or screenshot].
Critique it as a [first-time user / power user / accessibility reviewer].

Exit Criteria

• All screens designed (at least lo-fi)
• Key interactions specified
• Copy written (not placeholder)
• Screens work as a flow, not just individual pages

Phase 6: Prototype

Make it real enough to feel, test, and share.

AI at maximum leverage. Building interactive prototypes from specs is exactly what AI does faster and more consistently than manual construction. Your role: testing, feeling, directing revisions.

Interaction Mode: Build → Feel → Direct

Don't over-spec. Get a rough prototype fast, interact with it, then direct changes based on how it feels.

Prompt Patterns

# Prototype Generation
Build an interactive prototype for [flow].
Here's the spec: [screens + transitions].
Make it feel like a real app — smooth transitions, touch targets, proper spacing.
Single HTML file I can open in a mobile browser.

# Iteration
The [specific part] doesn't feel right.
[What's wrong: too fast / too much info / wrong hierarchy / etc.]
Try [specific direction].

# Multi-State
Show me all states for [screen]:
empty, loading, populated (few), populated (many), error.
How do transitions between states feel?

Exit Criteria

• Key flows clickable end-to-end
• It "feels" right when you use it
• Stakeholders can experience the design
• Edge cases visible (empty states, errors, loading)

Phase 7: Refine

Critique, iterate, polish — with AI as a fresh pair of eyes.

AI critique is most valuable with a specific lens. "What do you think?" gets generic feedback. "Critique this as a first-time user who doesn't know what this app does" gets actionable insight.

Interaction Mode: Structured Review Cycles

Ask for critique through specific lenses, one at a time. Focused rounds produce better feedback than "review everything."

Prompt Patterns

# Persona-Based Critique
Review [screen/flow] as [specific persona with context].
First impression? Where do you get confused?
What would make you abandon this flow?

# Consistency Audit
Here are all screens in [flow]: [list/screenshots].
Check consistency in: spacing, typography, button styles,
copy patterns, icon usage, interaction patterns.

# Accessibility Review
Review [design] for accessibility:
- Color contrast (WCAG AA), touch targets (44px min)
- Reading order, screen reader flow
- Cognitive load and information density

Exit Criteria

• At least one round of structured critique completed
• Critical usability issues addressed
• Cross-screen consistency verified
• Proud enough to show stakeholders

Phase 8: Bridge

Connect design to everything beyond the canvas.

The bridge between design and implementation is full of tedious, structural work that AI handles exceptionally well — specs, documentation, tooling, and format translation.

Interaction Mode: Specification + Tool Building

Be precise about what developers need. AI translates design intent into technical specification and builds workflow tools.

Prompt Patterns

# Spec Generation
Generate developer specs for [screen]:
- All measurements using design system tokens
- Interaction behavior for each element
- All states (default, hover, pressed, disabled, loading, error)
- Final copy

# Custom Tooling
I keep doing [repetitive task] manually.
Build me a [script/plugin/tool] that does it automatically.
Input: [what I provide]. Output: [what I need].

# Design System Documentation
Document [component] for the team:
- When to use it (and when not to), variants and states
- Spacing/layout rules, interaction specs, code-ready tokens

Exit Criteria

• Key screens have developer-ready specs
• Design system documented for the team
• Repetitive workflow friction automated
• Developers can build without constant clarification