30 Days of Product
Workshop · 90 minFor tech-savvy builders

How to
Design
with AI.

Header card
Title goes here
Supporting subtext that gives the user context for what this section is about.
by author · 3 min read
Metric
312+
+12.4% this week
Notification card
Icon · heading · body text · timestamp.
2 min ago
Tab one Tab two Tab three
Featured Pinned Recent
Adrian Cole Founder · Builder · Designer
Who's running this

Hi — I'm Adrian.

Adrian Cole
Adrian Cole
3× Founder Builder Designer
Short bio
Three startups. Coached dozens of first-time founders. Helped ship products that raised funding. Worked with companies to build impactful products end-to-end — strategy, design, and development under one roof.
Why this workshop
AI tools made design accessible — and made bad design a real problem. The fix isn't a better tool. It's a stronger foundation.
Frame the room

Design isn't
decoration.

It's decision-making in service of a goal. Every screen, every button, every word — chosen for a reason or not chosen at all.

If it's just decoration
It's noise. It distracts the user from the goal and wastes the screen.
If it's a decision
Every element earns its place. It serves the user's goal, or it's cut.
The shift
Designers ask "what's the goal?" before "what should it look like?" AI builders rarely do.
The North Star

Design serves the
user's goal—
not the screen.

01
Goal
What is the user trying to accomplish? Name it in one sentence. If you can't, you're not ready to design.
02
Context
Where are they? When are they using this? What's their state of mind — focused, distracted, anxious, hopeful?
03
Minimal pathway
From intent to outcome in the fewest possible steps. Every extra tap is a tax. Cut the tax.
04
Every element earns its place
Components, color, hierarchy are tools in service of the pathway. If they don't serve the goal — cut them.
Before you design

Deep context = good decisions.
Shallow context = slop.

The single biggest predictor of AI design quality isn't the prompt — it's the context behind the prompt.

Shallow context
A category. A vibe. No user.
"design a travel app · plan, layout, destination experiences"
→ Generic, templated, dead on arrival
Deep context
User, moment, intent, constraints.
"design destination browse for a solo traveler planning a weekend trip on Friday night from her phone — accounting for safety, cost, planning effort, and best time to travel based on the activities she wants (surf in winter, hike in spring)"
→ Specific, on-brand, useful
If you wouldn't trust a junior designer with this little information, don't trust the AI with it either.
The pre-design checklist

Five questions before you prompt.

01 Do I understand the problem — not just the feature being requested?
02 Have I talked to real users or done at least one user interview?
03 Can I contextualize — who, when, where, what state of mind?
04 Could I brief a junior designer with this — confidently?
05 Am I about to give the AI the same depth — or type three words and hope?
⌃ HOVER EACH PROMPT
Prompt A
"build me a fitness app — workout tracking, leaderboard, social feed, premium feel"
Shallow · will produce slop
Feature list dressed as a brief. No user, no jobs-to-be-done, no failure mode named. AI fills the void with the most-likely template.
Prompt B
"design a fitness app for first-time runners 30-45 who quit by week 3. Used 6am before work on phone. Goal: complete a 5K in 8 weeks. Hook them with visible progress, group accountability, and a kill-switch if they miss 3 sessions. Tone: calm, encouraging, never bro-coded."
Deep · will produce design
User · failure mode · jobs-to-be-done · time-of-use · emotional tone · success metric. AI has the same brief a senior designer would.
Quiz
Vocabulary

UI vs UX. Don't confuse them.

UI
User Interface. What the user sees and touches — the buttons, layouts, colors, type.
if it's pixels on a screen, it's UI.
UX
User Experience. The full path from intent to outcome — flows, decisions, the way it feels.
if it's a flow or a feeling, it's UX.
⌃ QUICK QUIZ · HOVER EACH TO REVEAL
Users abandon checkout because the "Pay" button is the same color as the "Cancel" button.
UI problem
hover
Users can't find the "Forgot password" link because it's buried two screens deep.
UX problem
hover
Users skip the onboarding because it has 7 screens and no skip option.
UX problem
hover
The opportunity · and the price of entry

AI gives you three things. And asks for three back.

What AI gives you
Speed
A prototype in 60 seconds. A flow in an hour. Velocity that used to require a team.
Accessibility
No design degree required. The barrier is no longer skill — it's taste and intent.
Iteration
Prototype at the speed of thought. Try ten directions in the time it used to take to try one.
— but here's the price of admission —
What AI demands from you
Clarity
Know exactly what you're solving, for whom, and why. Vague prompts produce vague design.
Strategy
A point of view on what to ship and what to cut. AI gives you ten paths — you pick the one that wins.
Taste
The judgment call. AI gives you the options. You decide what's good — and why.
Quiz
The cost of shallow prompts

Which would you trust
with your credit card?

hover
UNLOCK YOUR
FITNESS JOURNEY
Run · 5km NOW!
Group · TRY NOW
Premium · $99 SAVE!
🔥 ACTIVATE PLAN
⚡ Get Started
AI SLOP
No hierarchy · clashing colors · two competing CTAs · stamped templates. The AI guessed.
hover
Today · 6:42 AM
Morning Run
Plan adjusted to your week. Group session at 7 AM.
Distance · today
5.2km
Streak
6 days
Start Run
DESIGNED
One goal · clear hierarchy · single CTA · earned elements. Same AI. Deeper context.
The market is learning

Users always spotted bad apps.
AI slop stands out even more.

Bad design was always visible — clumsy hierarchy, mismatched type, hollow copy. AI didn't invent the problem. It just made it cheaper to ship, and easier to spot at a glance.

If your app looks like it was vibe-coded in 30 minutes — that's because it was.
Designer Twitter · circa 2025
I close apps that look like every other AI-generated app. The novelty is gone.
r/SideProject comment thread
AI lowered the floor on building. It also lowered the ceiling on trust.
Indie Founder Slack
don't be the app users close before scrolling.
Why we're here

Foundation over velocity.

AI gave you the tools.

This workshop gives you the foundation that makes the tools worth using.

next 60 minutes · we build it.
What we're covering next
02 Good design 10 min
03 Anatomy of a UI 8 min
04 Components 12 min
05 Screen states 6 min
06 Taste & styles 8 min
07 Fidelity & workflows 10 min
08 Live build 15 min
Part 2 · Six principles · three strategic, three tactical

Good design = goal achieved with minimal friction.

Strategic · how you think
01 · Goal-first
Name what the user is trying to do — in one sentence — before you design anything.
02 · Context-rich
Where, when, who, what state of mind. AI can't fill in what you don't know.
03 · Minimal pathway
Fewest steps from intent to outcome. Every extra tap is a tax. Cut the tax.
Tactical · how it looks
04 · Hierarchy
What does the eye see first? Second? Third? Every screen has an order. Decide it.
05 · Contrast
The important thing has to look important. Make buttons, headings, alerts earn their job.
06 · Whitespace
Empty space is a tool, not waste. It tells the eye where to rest.
Principle 01 · Hierarchy

What does the eye see first?

hover
Profile
Adrian Cole
Founder · designer · builder. Workshop facilitator.
Account
Saved trips
Billing
Logout
No hierarchy
Every element looks the same weight. The eye has nowhere to land. Reader has to scan every line equally.
hover
Profile
Adrian Cole
Founder · designer · builder.
Saved trips 12
Notifications 3
Edit profile
Hierarchy
Name dominates · supporting line is quieter · interactive rows have weight · primary action lifts. The eye knows where to go.
Principle 02 · Contrast

Make the important thing actually look important.

hover
Confirm Booking
Bali Surf Trip
3 nights · Oct 12-15 · $620 total
Cancel
Save for later
Confirm & pay
No contrast
Three actions, all the same weight. The user has to read every label to figure out what to do. Friction.
hover
Confirm Booking
Bali Surf Trip
3 nights · Oct 12-15 · $620 total
Save for later
Cancel
Confirm & pay
Contrast
One primary action. Two quieter alternatives. The eye knows where to go without reading.
Principle 03 · Whitespace

Empty space is a tool.

hover
Destinations
Bali Beach $620
Lisbon Coast $540
Kyoto Spring $880
Iceland Lights $1,200
Marrakesh Souk $420
Patagonia Hike $1,400
Lofoten Cabin $760
Tulum Cenotes $680
Crowded
Eight items, no breathing room. The eye can't rest and skims past everything. Reader gives up.
hover
Featured
Bali Beach
3 nights · From $620
Book this trip
Breathing room
One thing to read. One thing to do. The eye lands, reads, and acts — with nothing fighting it.
All three at once

A single screen doing all three.

Destination details
Bali Beach
3 nights · Oct 12-15 · Surf + sun. Solo-friendly, safe in dry season.
Hostel pickup included
Guided surf 3 days
Total $620
Book this trip
01
Hierarchy — destination name dominates · context line is quieter · row labels read as data, not decoration.
The eye lands on the trip name first. Always.
02
Contrast — one primary action ("Book this trip"). Nothing else competes with it.
Single CTA. Single decision.
03
Whitespace — gaps between rows · padding around the card · the screen breathes.
Nothing is fighting for attention.
★
All three principles in service of one goal: book the trip.
Quiz
Quick check · hover each

Spot the broken principle.

hover
Trips
Bali $620
Lisbon $540
Kyoto $880
Iceland $1,200
Tulum $680
Lofoten $760
Patagonia $1,400
Whitespace
Nothing to breathe. The list reads as noise, not options.
hover
Profile
Adrian Cole
Founder · designer · builder · workshop facilitator
Saved trips · Notifications
Edit profile
Hierarchy
Every line shouts at the same volume. The eye has no anchor.
hover
Confirm
Bali Surf Trip
3 nights · $620 total
Confirm
Cancel
Save
Share
Contrast
Four equal buttons. The user has to read every one to find the primary action.
Part 3 · Anatomy of a UI

Precision in = precision out.

When you prompt AI, vague instructions produce vague design. The fix is vocabulary. Once you can name what you want, you can ask for exactly that.

Vague — generic output
"make the thing bigger"
AI guesses what "thing" means and what "bigger" means. You get something different every time.
Precise — specific output
"increase the card padding to 24px and bump the title to heading 2"
Specific components · specific values · specific outcome. AI executes instead of guessing.
Two things you need to prompt with precision
A Component vocabulary — the names of the building blocks. We're about to walk through them.
B UI design basics — hierarchy, contrast, whitespace, spacing tokens, type scale. We covered the core three. Keep learning on your own — every hour you put into the fundamentals pays back in better prompts and better output.
Quiz
Anatomy quiz · click a pin · hover the answer card

Name what you see.

Where to next?
All Beach Mountain City
Featured · Solo trip
Bali Surf
3 nights · Oct 12 · from $620
Save trip
Lisbon
Coast$540
Marrakesh
Souk$420
Home
Explore
Saved
Profile
1
2
3
4
5
6
click a pin · then hover this card to reveal
Part 4 · Component deep-dive

Now you know the names.
Let's go deeper.

Six components is the alphabet. The next twelve are the words you'll use most.

12 components · 6 pairs · 12 minutes.
Coming up · pairs
→Button + Inputaction + entry
→Card + List itembrowse + scan
→Chip + Tagmetadata + category
→Top + Bottom navorient + navigate
→Modal + Toastinterrupt + notify
→Avatar + Badgeidentity + status
Part 4 · The 12 you'll use most

Each component has a job.
Use it for that job.

Components aren't decoration — they're a contract with the user. When you use a button, the user expects an action. When you use a chip, they expect filtering. Break the contract, break the trust.

A · Match component to job
Buttons act. Inputs take. Cards group. Chips filter. Don't use a button when you mean a link.
B · Use the name in your prompts
"Replace the chip with a button" tells AI exactly what you want. "Make it tappable" doesn't.
C · Pair them in pairs
Components rarely live alone. Button + input. Card + list. Top + bottom nav. The pairs are the patterns.
Pair 01 · Action + entry

Button. Input.

Button.
Pair 01 · A
Triggers a single action. The most visible thing on the screen — because the next step matters.
Book this trip
use when: confirm · submit · pay · continue.
Input.
Pair 01 · B
Where the user gives you something. Text, numbers, email. Always paired with a label.
Bali, Indonesia
use when: search · form fields · sign-up · checkout.
Pair 02 · Browse + scan

Card. List item.

Card.
Pair 02 · A
A grouped chunk of content the user can act on. Image, title, metadata. Browse mode.
FEATURED
Solo trip · Indonesia
Bali Surf
3 nights · Oct 12 $620+
use when: galleries · feeds · destination grids · product browse.
List item.
Pair 02 · B
A scannable row. Title, metadata, action. Stacks vertically. Scan mode.
Bali Surf · 3 nights$620
Lisbon Coast · 4 nights$540
Kyoto Spring · 5 nights$880
use when: settings · inbox · transaction logs · search results.
Pair 03 · Metadata + categorization

Chip. Tag.

Chip.
Pair 03 · A
An interactive filter. Tap to add or remove. Multiple chips can be active.
All Beach Mountain City
use when: filtering · multi-select · category browsing.
Tag.
Pair 03 · B
A non-interactive label. Tells the user something about content — status, type, priority.
PREMIUM NEW SOLD OUT DRAFT
use when: status · priority · category · type indicators.
Pair 04 · Orient + navigate

Top nav. Bottom nav.

Top nav.
Pair 04 · A
Tells the user where they are. Logo · screen title · contextual actions (search, profile).
use when: every screen needs orientation · brand presence · contextual icons.
Bottom nav.
Pair 04 · B
The primary destinations of the app. 2–5 tabs at thumb-line. Always visible on main screens.
Home Explore Saved Profile
use when: mobile apps · 2–5 core sections · need fast thumb access.
Pair 05 · Interrupt + notify

Modal. Toast.

Modal.
Pair 05 · A
A blocking interrupt. The user can't continue until they answer. Use sparingly — they hate being stopped.
Cancel trip?
You'll lose your booking. This can't be undone.
use when: destructive actions · auth · payment confirmation.
Toast.
Pair 05 · B
A passive notification. Confirms an action happened. Auto-dismisses. Doesn't block.
Trip saved to your library
use when: success messages · undo affordances · non-blocking confirmations.
Pair 06 · Identity + status

Avatar. Badge.

Avatar.
Pair 06 · A
A visual identifier for a person. Photo, initials, or fallback. Round, usually small.
+5
use when: profiles · comments · participants · presence indicators.
Badge.
Pair 06 · B
A small status indicator. Number, dot, or short label. Lives on top of another element.
3
Online Pro Beta 🔥 6-day streak
use when: unread counts · online status · "new" indicators · cart count.
Quiz
Quick check · hover each

Which component would you use?

hover
Confirm the user wants to delete
their booking.
Modal
Destructive action · needs the user to stop and confirm. Block until they answer.
hover
Let users filter trips
by category.
Chip
Multiple categories · multi-select · tap to add/remove. Filter, don't navigate.
hover
Confirm a trip was
saved successfully.
Toast
Passive feedback · auto-dismisses · doesn't block. Tell them, don't stop them.
Part 5 · Screen states

Screens aren't static.
A button has 5 lives.

Most AI builds skip states. Then your app launches and the first thing users see is nothing — or worse, a broken layout.

cover the states. then you've built a product.
What we'll cover
AComponent states5 lives of a button
BEmpty stateno data yet
CLoading statedata on the way
DError statesomething broke
ESuccess stateaction confirmed
Component states · the 5 lives

One button. Five jobs.

01 · Default
Resting. Available to use.
02 · Hover
Cursor is on it. "I'm clickable."
03 · Active
Being pressed. "I felt that."
04 · Disabled
Not available right now. "Can't use me yet."
05 · Focus
Keyboard-selected. Critical for accessibility.
Screen states · every screen has 4

Empty. Loading. Error. Success.

A · Empty
No trips yet
Save a destination to see it here.
Teach. Empty isn't blank — it tells the user what to do next.
B · Loading
Loading trips…
Reassure. Something is happening. Show the shape of what's coming.
C · Error
Couldn't load
Check your connection and try again.
Recover. What broke, what to do, how to retry. Never blame the user.
D · Success
Trip booked
Bali Surf · Oct 12 · confirmed.
Celebrate. Confirm the action. Show what's next.
Quiz
Quick check · hover each

What state is this screen in?

hover
No saved trips
Save one to see it here.
Empty
Nothing to show — but teaches the next action, not just blank space.
hover
Loading…
Loading
Data on the way · skeleton hints at shape of what's coming.
hover
Payment failed
Card declined · try another
Error
Names the problem · gives the next move. Never just "error."
Part 6 · Taste & design styles

Taste is what separates good from great.

You can't conjure taste. You observe it. Build a habit of studying the apps you love — asking why they work, not just that they work.

"Taste is the by-product of paying attention."
— every designer who ever got good.
01
Build a screenshot library of apps you love. Not "good designs." Apps that made you feel something.
02
For each one, write one sentence: what's the move? "Bold type + lots of whitespace." "Friendly empty state." "Tiny micro-interactions."
03
When prompting AI, show it the screenshots. AI matches what you show better than what you describe.
The AI-era workflow

Screenshot the apps you love. Paste. Prompt.

Step 01
Capture
Open the app you love. Screenshot the screen that hooked you. Multiple if you can.
→
Step 02
Paste & prompt
Drop the screenshot into Claude. Add: "Build me a screen like this for [your goal] / [your user]."
📎 attach.png
build a screen like this for wandr…
→
Step 03
Adapt
Tweak the result for your brand and context. You're never copying — you're learning the move.
Same screen · different style

Style is a choice.
It has to match your user.

A banking app isn't neubrutalist. A kids' game isn't minimalist. The aesthetic is downstream of who the user is and how they should feel. Pick the style for the audience — not for yourself.

Minimalist
"Calm. Professional. Trust me."
Fintech · health · enterprise.
Neubrutalism
"Bold. Loud. Vibe-coded."
Indie creators · Web3 · maker tools.
Neumorphism
"Recessed. Tactile. Controlled."
IoT · smart home · audio · pro controls.
Skeuomorphism
"Familiar. Tactile. Real."
Music · creative · pro tools.
Same booking screen · four styles

Style is downstream of who the user is.

01 · Minimalist
Calm. Trusted.
fintech · enterprise · luxury.
Confirm booking
Bali Surf
3 nights · Oct 12-15 · $620
Hostel pickupincluded
Guided surf3 days
Confirm & pay
02 · Neubrutalism
Loud. Opinionated.
indie · creator · maker tools.
Confirm booking
Bali Surf
3 nights · Oct 12-15 · $620
Hostel pickupincl.
Guided surf3 days
Confirm & pay
03 · Neumorphism
Recessed. Tactile.
IoT · smart home · audio · controls.
Confirm booking
Bali Surf
3 nights · Oct 12-15 · $620
Hostel pickupincluded
Guided surf3 days
Confirm & pay
04 · Skeuomorphism
Real. Tactile.
music · creative · pro tools.
Confirm booking
Bali Surf
3 nights · Oct 12-15 · $620
Hostel pickupincluded
Guided surf3 days
Confirm & pay
Style library · contemporary

Four more shipped today.

05 · Material Design 3
Familiar. Calm.
Android · Google products · CRUD apps.
Confirm booking
Bali Surf
3 nights · Oct 12-15 · $620
Hostel pickupincluded
Guided surf3 days
Confirm & pay
06 · Bento
Gridded. Modular.
dashboards · marketing · AI tools.
CONFIRM
Bali Surf
3 nights · $620
Pickupincluded
Surf3 days
Total$620
Confirm & pay
07 · Glassmorphism
Frosted. Atmospheric.
lifestyle · travel · iOS widgets.
Confirm booking
Bali Surf
3 nights · $620
Pickupincluded
Surf3 days
Confirm & pay
08 · Dark Mode
Quiet. Focused.
dev tools · crypto · pro software.
Confirm booking
Bali Surf
3 nights · Oct 12-15 · $620
Pickupincluded
Surf3 days
Confirm & pay
Style library · expressive & editorial

Four more with more attitude.

09 · Editorial
Composed. Quiet.
publishing · long-form · galleries.
Confirm booking · Issue 12
Bali Surf
3 nights · Oct 12-15
Pickupincl
Surf3d
Total$620
Confirm
10 · Maximalism
Loud. Unmissable.
indie · fashion · gen-z · merch.
CONFIRM
Bali Surf
3 NIGHTS · $620
Pickupincl
Surf3d
Total$620
Confirm
11 · Swiss / Helvetica
Functional. Stripped.
design tools · architecture · journals.
CONFIRM BOOKING
Bali Surf
3 nights · Oct 12-15
Pickupincl
Surf3d
Total$620
Confirm & pay
12 · Cyberpunk
Neon. Glitchy.
gaming · Web3 · esports · NFT.
// CONFIRM
Bali Surf
3N · 10.12 · $620
PICKUPINCL
SURF3D
Confirm & pay
Practical · how to actually prompt for style

Three moves that upgrade your prompts.

Move 01 · Reference
Design like X
"design this like Airbnb — generous whitespace, large photography, clean type, single primary CTA per screen"
Move 02 · Vocabulary
Use the right adjectives
user-friendly minimalist zero friction dense playful premium utilitarian approachable restrained confident
Move 03 · Reference + ICP
Pair style + user
"design like Linear (precise, dense, keyboard-first) for a user who is a solo dev shipping their first SaaS — needs to feel competent, not coddled"
Bonus · Anti-prompt
Tell it what not to do
"avoid: gradient buttons, generic illustrations, mascot characters, marketing-page energy. This is a tool, not a landing page."
Quiz
Quick check · hover each

What style would you use?

hover
A budgeting app for
mid-career professionals
tracking $80k+ income.
Minimalist
Money apps must read as trustworthy. Restraint > personality here.
hover
A smart-home
thermostat control
panel.
Neumorphism
Recessed buttons feel like physical knobs. Tactile = trust for controls.
hover
An indie creator
launch tool for
Substack writers.
Neubrutalism
Creators want opinionated + distinctive. Bold blocks + raw type = made by a person.
Part 7 · Fidelity & workflows

AI can output hi-fi in 30 seconds.
So why ever start low-fi?

Because color is loud. The minute you see polished pixels, your brain stops thinking about structure and starts judging the visuals. Low-fi forces clarity.

fidelity isn't tradition · it's focus.
What we'll cover
AWhy low-fi still winsin the AI era
BThe 3-stage ladderwireframe → mid → hi
CScreens → workflowsa chain, not a screen
DCohesive designmaking it feel like one app
Reframe

Each fidelity level locks a different decision.

Stage 01 · Wireframe
Grayscale boxes. No type hierarchy. Decide structure and flow: what goes where, in what order.
locks: layout + flow
Stage 02 · Mid-fidelity
Real type, real copy, monochrome. Decide hierarchy and density: what reads first, what's quiet, what breathes.
locks: type + hierarchy
Stage 03 · Hi-fidelity
Full brand, color, micro-states. Decide style and personality: how does it feel? What's the brand?
locks: brand + states

Skip a stage and you make worse decisions. The color is loud, the structure stays quiet, and you'll find out at launch.

Same Wandr browse screen · three fidelities

Watch one screen walk up the ladder.

Low-fi
Stage 01
Wandr
Where to next?
AllBeachMtnCity
HomeFindSaveMe
Decisions locked here
Where each section goes Reading order Relative weight + sizing
Mid-fi
Stage 02
Wandr
⌕ Where to next?
AllBeachMtnCity
Bali Surf3 nights · from $620
LisbonCoast · $540
MarrakeshSouk · $420
HomeExploreSavedMe
Decisions locked here
Type hierarchy Real content + density What reads first vs quiet
Hi-fi
Stage 03
Wandr.
⌕ Where to next?
AllBeachMtnCity
Featured · Solo
Bali Surf
3 nights · from $620
Lisbon
Coast$540
Marrakesh
Souk$420
HomeExploreSavedMe
Decisions locked here
Brand + color system Component states (hover/active) Ship-ready polish
From screen to workflow

One screen rarely stands alone.

Journey statement
"User wants to plan a weekend trip to a new city — and book it from their phone."
Intent · 01
Browse
Opens the app · scans destinations.
Screen: Home
02
Filter
Narrows by category.
Same · Filtered
03
Preview
Taps a card — wants details.
Screen: Detail
Outcome · 04
Book
Decides · commits.
Screen: Confirm
When you brief the AI · this becomes the context
"Design a 4-screen workflow for Wandr — a solo travel app. User journey: first-time solo traveler, 28-40, planning a weekend trip from her phone on Friday night. Path: Home (browse + filter) → Detail (inspect) → Checkout (book) → Confirm (success). Keep type, chrome, brand rail consistent across all four — the user must feel like they never left the app."
Three screens · one flow · one feeling

Every screen should feel like the same app.

Cohesive · feels like one product
Wandr.
Browse destinations
Bali Surf $620
Lisbon Coast $540
See more
Bali Surf
Solo trip · Oct 12 · 3 nights
Hostel pickup included
Guided surf 3 days
Book this trip
Confirm.
Review and pay
Trip total $620
Payment Visa ••42
Confirm & pay
Not cohesive · three different apps
Wandr
Browse destinations
Bali Surf $620
Lisbon Coast $540
See more
Bali Surf
Solo trip · 3 nights
Hostel pickup incl.
Guided surf 3 days
Book
Confirm
Review & pay
Trip total $620
Payment Visa ••42
Pay now
Quiz
Side-by-side · which set belongs together?

Same flow. Two outcomes.

Not cohesive Set A
Wandr
Browse destinations
All›
Bali Surf
3 nights · $620
Lisbon Coast
4 nights · $540
See more
← back
BALI · SURF
Bali Surf
3 nights · Oct 12-15 · $620
Pickupincl
Surf3d
DifficultyBeginner
Book this trip
CONFIRM · 03
Pay $620
REVIEW & SUBMIT
Trip$620
Tax$48
Total$668
Confirm
Same content. Three different design languages. Looks like three different apps stitched together.
Cohesive Set B
⌕
Where to next?
All Beach Mtn
Featured · Solo
Bali Surf
3 nights · from $620
Lisbon
Coast$540
Marrakesh
Souk$420
← Bali Surf
↗
Bali Surf
3 nights · Oct 12-15 · from $620
IncludesHostel + pickup
Best timeApr-Oct
DifficultyBeginner
Book this trip
← Confirm.
✕
Pay $620
Review & submit
Trip total$620
Tax (8%)$48
Today$668
Visa •• 4242
Confirm & pay
Same content. Same type · same chrome · same brand rail · same energy. One app.
Part 8 · User journey mapping

Before you design a screen.
Map the journey.

This isn't full UX research. It's a sanity check: one user · one goal · the path between them.

Skip this and you'll design five screens that don't connect.

20 minutes upfront · saves you days.
The 4-step framework
01Identify the journeyone user · one goal
02List every actionfrom intent to outcome
03Group actions into screenscluster the related ones
04Count your screensnow you know what to design
The 4 steps · zoomed in

A sanity check, not a research project.

Step 01
Identify the journey
One sentence: "User wants to ___." If you can't write the sentence, you're not ready to design.
Step 02
List every action
Every tap · every decision · every input — between intent and outcome. Be exhaustive.
SCREEN A SCREEN B
Step 03
Group into screens
Related actions cluster. Browse + filter? Same screen. Browse + book? Different.
1 2 3 4
Step 04
Count your screens
Now you know exactly how many to design. Most MVPs need 4-6.
Worked example · Wandr · weekend trip planning

"User wants to plan a weekend trip to a new city."

Intent
Browse
Open app · scan destinations · look at hero card.
Action 01
02
Filter
Tap category chip (beach/mountain/city) · narrow.
Action 02
03
Inspect
Tap a card · see full details · check price.
Action 03
04
Save / Book
Save for later OR tap "book" to commit.
Action 04
Outcome
Confirm
Pay · receive confirmation · trip on calendar.
Action 05

Five actions. Now we group them into screens — and we'll know exactly how many screens to design.

Group actions → count screens

5 actions collapse into 4 screens.

01 Home
Browse Filter
2 actions · 1 screen
02 Detail
Inspect
1 action · 1 screen
03 Checkout
Save / Book Pay
2 actions · 1 screen
04 Confirm
Success state
1 outcome · 1 screen
4
Screens to design. Not five. Not three. Four — because that's what the journey actually needs.
Quiz
Try it · habit tracker app · hover each step

Now you walk the framework.

Scenario
You're designing a habit tracker for someone trying to read 20 minutes a day. Apply the 4 steps. Think your answer · then hover.
Step 01
What's the intent statement?
Think: "user wants to ___."
Answer
User wants to build a daily reading habit — not "track reading." The intent is the outcome, not the action.
Step 02
What are the actions?
List every tap and decision.
Answer
Set the habit · pick frequency · check in daily · see streak · adjust if missed. 5 actions.
Step 03
How do they group?
Which actions happen together?
Answer
Onboard (set+frequency) · Today (check-in) · Progress (streak) · Edit (adjust)
1234
Step 04
How many screens?
Count what you grouped.
Answer
4 screens. Now you know what to design. You just shipped your MVP scope in 2 minutes.
Part 9 · Live build · everything we've learned

We're going to build it.
Together. On screen.

One workflow · two screens · three fidelity passes. The prompts are on the screen — I'll copy them straight into Claude.

Your job: before I paste each one, predict what Claude will produce.

prompt → predict → reveal · 15 minutes.
The build · 6 steps
AWireframe promptpredict the output
BWireframe revealstructure + flow
CMid-fi promptpredict the output
DMid-fi revealtype + hierarchy
EHi-fi promptpredict the output
FHi-fi revealbrand + ship-ready
The build · scoped

Two screens. One workflow.

Screen 01
Browse destinations
Top nav · search input · category chips · hero card · 2-col card grid · bottom nav.
user's entry point.
Screen 02
Destination detail
Top nav with back · hero image · title + meta · 3 info rows · primary CTA · bottom nav.
user's decision point.

Watch the prompts. Each one carries forward the context from the last and adds one new fidelity decision. Notice how much context is in these prompts — that's the difference between good design and slop.

Step A · Wireframe prompt

Lock structure + flow.

Wireframe · Stage 01 
Design low-fidelity wireframes for two screens of Wandr, a travel app for first-time solo travelers (ages 28-40) planning short weekend trips from their phone on a Friday night.

Screen 1 · Browse destinations
- Top nav (logo left · profile icon right)
- Search input below nav
- Horizontal scroll of category chips (All · Beach · Mountain · City · Cultural)
- Featured destination card (hero) with title + meta + primary CTA
- 2-column grid of destination cards below the hero
- Bottom navigation (4 tabs: Home · Explore · Saved · Profile)

Screen 2 · Destination detail
- Top nav (back arrow left · share icon right)
- Large image area at top
- Title + meta (nights · dates · price)
- 3 info rows (Includes · Best time · Difficulty)
- Single primary CTA at the bottom
- Bottom navigation

Style rules: grayscale boxes · placeholder shapes · no real images · no brand · no color. Goal is to lock structure and flow without color or style distractions. Output as clickable HTML.
Predict
What will Claude produce?
Take 30 seconds. Picture the output before I paste. Where does the eye go first? How many decisions are made? What's NOT in the wireframe?
click "next" to reveal →
Step A · Wireframe reveal

Just boxes. That's the point.

Browse
Top Nav
Search Input
ChipChipChipChip
Nav 1Nav 2Nav 3Nav 4
Detail
Top Nav · Back
Destination Title
Meta · dates · price
Info Row 1value
Info Row 2value
Info Row 3value
Primary CTA
Nav 1Nav 2Nav 3Nav 4
What's there
Structure. Every section. The order. The relative weight (hero card bigger than the grid items, CTA prominent on detail).
What's not there
Color · type · personality. All deliberately absent — so the only question we answer at this stage is "does the flow work?"
Step B · Mid-fi prompt

Lock type + hierarchy.

Mid-fidelity · Stage 02 
Take the wireframes from Stage 01 and convert to mid-fidelity.

Add now:
- Real type hierarchy — heading, subhead, body, caption (use any clean sans-serif)
- Realistic content — destination names (Bali Surf, Lisbon Coast, Marrakesh Souk, Kyoto Spring), real prices ($420-$880), real dates (Oct 12-15)
- Spacing decisions — padding inside cards, gaps between rows, breathing room
- Hierarchy weight — destination name dominates each card · meta is quieter · CTA on detail is the largest interactive element

Keep monochrome. Only black, white, and gray. No color, no brand, no images. Use gray rectangles where photos will eventually go.

Goal: lock layout and hierarchy without color or style noise. The user should be able to read the screen and know what to do — even with no color cues.
Predict
How does the screen change?
The structure stays the same. What gets louder? The destination name. What gets quieter? Meta lines. What earns the eye first? The hero card title.
click "next" to reveal →
Step B · Mid-fi reveal

Type does most of the work.

Browse
Wandr
⌕ Where to next?
AllBeachMtnCity
Bali Surf3 nights · Oct 12 · from $620
LisbonCoast · $540
MarrakeshSouk · $420
HomeExploreSavedMe
Detail
← Bali Surf
Bali Surf
3 nights · Oct 12-15 · from $620
IncludesHostel + airport pickup
Best timeApril – October
DifficultyBeginner-friendly
Book this trip
HomeExploreSavedMe
Now you can read it
Headlines lead. Meta supports. CTA dominates. The structural decisions from Stage 01 are still there — now they have voice.
Still no color
If the screen reads clearly without color, it'll read brilliantly with color. The opposite — colorful screens that don't read in mono — is where slop hides.
Step C · Hi-fi prompt

Lock brand + ship-ready.

Hi-fidelity · Stage 03 
Take the mid-fi from Stage 02 and convert to hi-fi.

Brand: Wandr · solo travel app for first-time solo travelers ages 28-40.
Tone: aspirational but grounded · calm · premium without being precious · never bro-coded.

Palette:
- Navy (deep): #101C48
- Yellow: #FFD700
- Burgundy accent: #800020
- Warm stone background: #EFEAE3

Typography:
- Display: Anton (all caps, headlines)
- Body: Nunito (weights 500-800)
- Mono: Roboto Mono (captions, data, timestamps)

Components:
- Rounded cards with subtle shadows
- A 3px brand rail (navy · yellow · burgundy stripes, equal widths) at the bottom of major cards
- Featured card uses a burgundy gradient hero with yellow accents

States: add hover state for the primary CTA (lift + shadow), empty state placeholder treatment for chip filter row.

Real images: use Bali, Lisbon, Marrakesh, Kyoto placeholders (gradient-tinted rectangles in destination colors).

Goal: a polished hi-fi screen that feels like a shippable product, not a Figma file.
Predict
What is the prompt now doing that the others weren't?
Look at the prompt structure. Specific hex codes. Specific font names. Specific component rules. Specific states. This is the difference between "make it look nice" and "execute against a system."
click "next" to reveal →
Step C · Hi-fi reveal · this is what shippable looks like

Same screen. Brand-true.

Browse
Wandr.
⌕ Where to next?
AllBeachMtnCity
Featured · Solo trip
Bali Surf
3 nights · from $620
Lisbon
Coast$540
Marrakesh
Souk$420
HomeExploreSavedMe
Detail
← Bali Surf
Solo trip
Bali Surf
3 nights · Oct 12-15 · from $620
IncludesHostel + pickup
Best timeApr-Oct
DifficultyBeginner
Book this trip
HomeExploreSavedMe
From the wireframe
Same structure. Same flow. Same hierarchy. Nothing in the layout changed between stages 01 and 03.
What changed
Color · brand · personality. All of it added in a single targeted stage with a real spec. AI didn't guess — it executed.
foundation + ladder = ship.
The takeaway · screenshot this slide

Everything we covered.

Before you design
Understand first
Understand the problem Talk to real users Contextualize: who, when, why Brief AI like a junior designer
Strategic
Frame the goal
Goal-first Context-rich Minimal pathway Every element earns its place
Tactical
Make it read
Hierarchy — what reads first Contrast — make important loud Whitespace — let it breathe
Vocabulary
Name your pieces
Top nav · bottom nav Button · input · card · chip Modal · toast · avatar · badge
States
Cover the lives
Component: default · hover · active · disabled · focus Screen: empty · loading · error · success
Process
Walk the ladder
Journey → actions → screens Wireframe (structure) Mid-fi (type + hierarchy) Hi-fi (brand + states)
Taste
Observe · steal
Build a screenshot library Write one sentence per app Show AI your references
Style
Match the user
Style follows audience 12 styles in the library "Design like X" prompt pattern Use anti-prompts
screenshot · save · pin · use it next time you prompt. press P to print
One last time

Design serves the goal.

deep context = good decisions
What changed
AI gave you the tools to ship without a designer.
What didn't
The need to understand the user before you prompt.
Your edge
Foundation + taste + clear prompts = work people trust.
Q & A · the floor is yours

Now you talk.

Ask anything. Bring the AI project you're stuck on. Bring the prompt you can't get to work. Bring the design that doesn't feel right yet.

Thanks for sticking with me through 90 minutes of slides.
Workshop 30 Days of Product · founder launch program
Web 30daysofproduct.com
Find me Adrian Cole · LinkedIn · @adrianccole
Appendix · the tool belt

12 tools. Pick 2-3.

🎨 Ideation · pictures, not files
ChatGPT
Image gen. UI as pictures, mood + idea sparks.
can't edit, ship, or hand off
Claude
Artifacts. Visual + actual HTML you can interact with.
treat images as inspiration
Midjourney
Best for mood boards + concept art + visual direction.
zero design intelligence
✏️ Sketch → Screen · rapid prototyping
Uizard
Sketches + prompts → editable mockups.
template-driven without polish
Google Stitch
Free. Prompts/images/voice → hi-fi UI. Exports to Figma.
Google Labs · no long-term promise
🤖 Prompt → UI · the new wave
UX Pilot
Prompt → layouts, wireframes, hi-fi mockups.
manual brand refinement
Banani
Layout + brand adaptation. Strong responsive output.
newer · ecosystem maturing
Galileo AI
Premium "show-the-client" quality output.
less customization depth
🛠️ Design + Code · for builders
Base44
Builder platform. Front-end design for non-technical folks.
"looks done" ≠ is good
Vercel v0
Text-to-UI → clean React + Tailwind code.
developer-leaning · you'll see code
Lovable / Bolt
Full-stack AI builders. UI is one part of what they do.
scope creep · DB debugging
Figma (+ AI)
Industry standard. Real design files, components, collab.
learning curve is real
The rule of thumb · pick by where you are

How to actually choose.

Just exploring an idea?
ChatGPT · Claude · Midjourney. Mood boards, mock-ups, idea sparks. Image-first.
Need clickable mockups fast?
UX Pilot · Uizard · Stitch. Prompt → hi-fi screens you can click through.
Building something real you'll ship?
Base44 or v0 for builders. Figma for serious design work + handoff.
Already have a designer?
Figma is the answer. Hand off, collaborate, version, repeat.
The bigger point
Tools change every 90 days. The principles from this workshop don't.
pick a tool · but bring the foundation with you.
01
All slides · press ESC or click to close