When I tried using AI to create a user flow for a new booking app, I started with ChatGPT using a prompt like: "Design a user journey for a first-time user booking a dog groomer appointment." Surprisingly, it laid out a pretty decent first draft: Welcome Screen → Sign-Up → Location Permission → Pet Profile Setup → Service Selection → Appointment Calendar → Confirmation Screen.
Thank you for reading this post, don't forget to subscribe!
But here’s the immediate limitation: the flow was too clean. It didn’t touch on edge cases where the user skips pet setup or doesn’t allow location. These friction points matter. So the trick is to follow up with a second-layer prompt, like:
“Revise the flow to include what happens if the user declines location access or exits before inputting pet info.”
This got us branching variations. Not perfect. But better than a static whiteboard sketched alone.
Downstream bug 🐞: When I copy-pasted the output into Figma’s FigJam, grouping components based on AI logic clustered some steps in ways that confused my dev counterpart. He assumed some actions happened in parallel when they were actually sequential because the language was vague (e.g., “select appointment” vs. “tap a specific date”). Figma’s vertical auto-flow layout also collapsed loops awkwardly unless I manually redirected mid-flow arrows.
How to fix:
Use visual emojis or shapes in prompts – Ask AI to add “🔁” where a step repeats or “🛑” where a user hits a hard stop. That hint helps when you import them into diagramming tools that don’t distinguish flow types inherently.
Manually annotate decision points once imported. I insert sticky notes in FigJam or Miro to clarify frontend vs backend triggers (e.g., “this triggers SMS logic” doesn’t mean user taps a button).
Table – AI User Flow Prompt Variants (Outputs Compared)
Prompt
Flow Format
Handles Edge Cases
Visual Friendly?
Realistic Steps?
“Map a basic onboarding flow”
Linear List
No
❌ (text only)
⚠️ (missing verifications)
“Design tree-structured user interaction model”
Decision Tree
Yes
✅
✅
“Simulate UX sitemap for a health app”
Hierarchical branching
Partial
✅
⚠️ (too generic)
To wrap up, don’t just prompt once and paste—iterate with cause/effect logic and flag blockers visually post-export.
Interface Ideation with Contextual AI
The moment I switched from generic prompts to super-contextual ones, interface ideas became usable. Let’s say you’re building a journaling app. If you tell ChatGPT or Claude, “Design an interface to capture and mood-tag journal entries,” you typically get something like:
Text area input
Dropdown for mood
Save/Submit button
This works only if you’re creating v0. But I tested layering the same prompt with added UX context:
“Design a journaling interface optimized for mobile users writing with one hand during a commute. Include accessibility and auto-save.”
Now we get:
Auto-scaling voice input area that transitions to type when clicked
Mood selection as swipable emoji slider (instead of dropdown)
Auto-saving on text field blur (losing focus)
ChatGPT even suggested replacing “Submit” with a persistent ✅ icon in the corner. It wasn’t perfect UI copy, but the idea direction became smartly biased toward real-world constraints.
When I tested this in Penpot (a free Figma alternative), I hit a weird breakpoint bug: swipable mood sliders broke layout hierarchy when moved into grouped components. The nested swipe areas wouldn’t maintain their visual behavior.
Here’s a valuable trick:
Replace AI layout suggestions with wireframe sketches named after user goals, not components. Ex: Name a group “1-handed_input_block” instead of “MainContainer” so it’s clear what purpose it serves when you or another designer returns later.
When implementing swipes or gestures, always include backup “tap” envelopes—for accessibility and also to prevent gesture conflicts with native scroll.
Testing impact: When I tested this mock with a couple of friends via Maze, everyone defaulted to tapping instead of swiping the emoji slider—so I introduced haptic feedback only on horizontal drag, and that nudge helped change the interaction path without tutorials.
Ultimately, contextual AI prompts shift design from theoretical screens into testable, practical mechanisms you wouldn’t brainstorm in isolation.
Prompting AI with Real User Stories
Generic prompts give you generic UI. But modeling prompts around actual user stories—like actual sentences from interviews or support tickets—changed everything for our team.
In one case, we had a user write:
“I keep forgetting where I left off when reading long articles. It’s annoying starting from the top every time.”
Feeding this into Claude with:
"Design an interface work-around based on this user pain: [insert quote]"
“Resume where you left off?” prompt after 1+ minutes of page inactivity
Why this works: AI responds better when the prompt contains not just the task, but emotional + behavioral intent from real-world phrasing. You essentially anchor design generation in user psychology.
Caveat: If the quote includes sarcasm or indirect phrasing like “I guess I’ll just memorize the scroll position myself 😑”, the AI sometimes misfires entirely, returning whimsical interfaces. In one case, it suggested a “scroll summary song.” Accurate tone parsing is still fragile.
Fix that by simplifying: Rephrase sarcasm into clarity during prep stage, like:
“This user loses their scroll position often. They feel forced to self-track.”
To sum up, designing with AI is exponentially more grounded when you hand it user reality instead of assumptions.
Testing AI-Generated UI with Prototypes
The mismatch between what AI thinks is “minimal UI” and what users expect—or notice—is drastic. I generated a music playlist editor screen via a prompt like:
“Design a touch interface to reorder playlists, rename groups, and add songs.”
The AI gave me a sleek 3-button top nav: Edit Order, Add Song, Rename Group. Amazing. Until I prototyped in ProtoPie and got feedback like:
“I thought ‘Edit Order’ was for editing tracks within a song, not lists.”
This disconnect was caused by the language AI uses—which sounds logical in GPT output—but doesn’t match mental models of real users.
Solution: Always sanity-check button labels from AI-generated designs with 3-5 unprimed people. Literally show UI image only (no background) and ask: “What do you think these do?”
Bonus Fix: Prompt AI to describe *why* certain labels work or not. Try:
"Rewrite button text for broader clarity. Explain assumptions first."
ChatGPT responded with alternative labels and actual explanations like:
“‘Reorder Lists’ clarifies scope. ‘Edit Order’ may imply sequence-level control inside items.”
This meta commentary—when coaxed properly—is priceless during mock review phases.
At the end of the day, AI can’t understand usage ambiguity unless you bring feedback loops back into your prompt cycle.
Using ChatGPT to Generate Placeholder Cop
No one talks about this, but placeholder copy wrecks your usability tests. One of the best low-effort wins was feeding GPT this:
“Generate helpful placeholder copy for a login screen, keeping humor and frustration context in mind.”
Instead of “Enter email here,” I got things like:
“Something like you@trustme.com”
“Don’t worry, we don’t spam.”
“This is how we recognize you… like your barista.”
These helped not only reduce friction, but got actual chuckles during a usability round. More importantly, it changed the tone of downstream interactions.
The issue though: AI sometimes spills into cheesy territory. If you add “humor” too high up in the prompt, it offers pun-laden or overly cheerful language. Try instead:
"Subtle friendly tone, focusing on common frustrations."
Added trick: Ask for 5 variations per placeholder label—and test which ones users recall afterward. Prompting for memorability scores can also surface UX surprises. One user actually mistook the placeholder for an entered value because it was styled too similarly.
In a nutshell, smarter prompting for microcopy turns passive placeholders into interactive cues that users reference mentally.
Real-Time Iteration Loops with AI During Design Reviews
Mid-design reviews can stall when people start saying “What if we just…?” The AI slot fills that chaotic space well. I often keep ChatGPT open next to me during Figma presentations.
When someone suggests:
“Can this dialog feel less jarring somehow?”
I ask GPT simultaneously:
“Suggest 3 modal entry/exit patterns that don’t feel disruptive.”
