Part 1: Scoping the Idea
Even with visual tools, scoping is crucial. Spend 5 minutes getting crystal clear on what you're building.
Answer these questions first:
- Who is the ONE person this is for? (Not 'everyone')
- What's the ONE action they need to take?
- What does success look like after they take that action?
- What can you REMOVE and still prove the concept?
Part 2: Interface & Flow Generation
Now we turn words into screens. With tools like Loveable or v0, you describe what you want and refine from there.
Interface generation prompts
Screen Description
Create a [type of page] for [your product]. It should: - Have a clear headline that explains [value prop] - Include [key elements: form, cards, list] - Use a [clean/bold/minimal] design style - Feel like [reference: Airbnb, Stripe, etc.]
User Flow
Create a [3]-screen flow where: 1. User lands on [page type] and sees [key info] 2. User clicks [action] and goes to [next page] 3. User completes [final action] and sees [confirmation]
Part 3: Making It Clickable
The difference between a mockup and a prototype is interactivity. Even fake interactivity feels real.
What to make interactive:
- Navigation between screens (buttons should go somewhere)
- Primary call-to-action (even if it just shows a success message)
- Form inputs (let people type, even if data goes nowhere)
- Hover states (small details that make it feel polished)
You don't need real data. Hardcoded examples are fine. The goal is to let someone FEEL what the experience would be like.