Rapid Prototyping with Lovable.ai

Discovery sprint using Lovable.ai to explore fast ideation workflows and test a visual recipe card UI.

This sprint explores how AI can accelerate early UI ideation. Using Lovable.ai, I prototyped a quick, swipeable recipe browser and then refined the generated UI to improve scannability, reachability, and accessibility. This exercise highlights where AI is helpful and where human product thinking is still essential.

Problem:

Most recipe apps feel cluttered, text-heavy, and slow to scan.
Users want to:

  • Quickly decide if a recipe fits their time available

  • See ingredient count immediately

  • Save favorites with fewer taps

  • Enjoy a clean, modern browsing experience

This project explores a lightweight solution to that gap.

My Role:

  • Prompt writing for AI-generated UI

  • Selecting and refining best UI directions

  • Adjusting interactions for clarity

  • Evaluating visual hierarchy and content density

  • Creating a cohesive micro-flow (recipe card → details)

What I Explored:

Using AI to generate quick UI directions to accelerate ideation

  1. Evaluating recipe card layouts for readability and emotional appeal

  2. Testing visual hierarchy for time, ingredients, and description

  3. Exploring favorites and dismiss interactions

  4. Assessing how visual density affects decision-making speed

  5. Observing moments where AI-generated flows break and redesigning around them

AI Prompts:

  • Add recipe filters (dietary needs, cooking time, number of ingredients)

  • Create prototype for user flow for ‘I can’t think right now’ recipe suggestion

  • Prioritized scannability because users in cooking apps often browse quickly while multitasking

1st Lovable.ai Creation:

Iterations & Refinements:

  • Adjusted the card height to ensure all essential information sits above the fold, improving scannability and reducing cognitive load for users who rely on quick visual decisions.

  • Relocated the favorite (heart) and dismiss (X) actions to the top corners of the image, creating a familiar, high-visibility interaction pattern that improves reachability and accessibility for users with limited mobility or motor control.

  • Refined icon contrast to ensure the primary actions remain visually distinct, improving the overall usability of the browsing flow.

AI Output (raw):

Accessible & Optimized Recipe Card:

What I Learned:

This was a quick exploration, focused intentionally on speed and direction rather than full UX depth. The goal was to explore how fast AI tools can support early-stage ideation. This sprint helped me refine my prompt writing, evaluate AI-generated design directions with a critical eye, and understand where human design intuition is still essential, especially in visual hierarchy, affordances, and accessibility. It also reinforced how quickly ideas can be prototyped using AI tools when combined with strong product thinking.