01. Overview
I wanted to explore how users might interact with AI
beyond the standard text prompt. Using Lovable.dev,
I prototyped a set of mobile flows that allowed users
to generate content or actions using:
• Text prompts
• Image input
• A hybrid of both
Passion Project
Mobile/Web
UX/UI Product Designer
Lovable.dev
02.
Challenge
How can we use AI tools to simplify and speed up the creation of prototypes?
Objective
To explore how designers can use AI with text, image, and hybrid inputs to build interactive prototypes faster — without sacrificing clarity or control.
Results
Improved Productivity
98%
03.
Definition
Prototyping has become a bottleneck in design. Designers spend countless hours manually creating wireframes, mockups, and interactive elements.
AI-Powered Prototyping explores how combining conversational UI with visual examples can transform the way we bring ideas to life. By describing what we want and sharing reference screenshots, designers can generate, iterate, and validate prototypes in minutes rather than days – creating interactive experiences that both developers and stakeholders can meaningfully engage with.
The following demonstrates how blending natural language and visual references could fundamentally change the prototyping process.
04. Tech Stack
Lovable
Lovable.dev is a straightforward AI prototyping tool that lets designers create interactive experiences through natural language and image inputs. Unlike traditional prototyping tools, it requires no onboarding – you simply upload images or type prompts to start creating. The tool interprets your inputs and generates interactive prototypes that maintain the aesthetic of your references.
Three primary methods for AI-powered prototyping
Screenshot-Based Prototyping: An innovative approach where designers upload existing screenshots or design references, allowing AI tools to analyze and transform these images into interactive prototypes. This method provides a direct visual starting point for design generation.
Text-to-Prompt Prototyping: Leveraging familiar AI tools like ChatGPT, Midjourney, and Claude, designers can generate interfaces by describing their vision through text prompts. This method allows rapid creation of design concepts by simply articulating design requirements.
Hybrid: You're also allowed to create a hybrid model by using a combination of photos and text.
05.
We brought our vision to life with three lo-fi design concepts, each offering a unique way to help users engage with their finances.
I started with a photo of a Braun radio and clock - picked for its clean, minimalist look that just makes sense. Lovable.dev turned these static images into working prototypes in minutes, no complex setup needed - just upload and describe what you want.
The AI transformed the Braun radio into an interactive interface. The volume dial turns smoothly to adjust sound, and the tuning dial actually changes the numbers on the digital display as you turn it - just like a real radio. Taking things further, I used a photo of a Braun analog clock to create a digital version that keeps perfect time, automatically syncing to your local timezone. Who knew turning physical objects into digital interfaces could be this straightforward?
Here are the original photos I used. The tool did a pretty good job of interpreting and recreating them.
06.
Using Images and Text to Prototype
Hybrid
When working with digital inspiration, the AI performs noticeably better. I uploaded a sales report image, and lovable.dev accurately interpreted the familiar elements of data visualization. After tweaking a few things, It converted these patterns into a steps counter prototype.
The result was nearly identical to the reference image, just repurposed for steps tracking. Titles, numerical displays, and interactive elements all translated directly from sales metrics to step counts and daily goals. Starting with the image gave me a solid foundation, but I used text prompts to refine specific elements - adjusting the color scheme, tweaking the dots for days behavior, and fine-tuning how the numbers displayed. This hybrid approach of visual reference plus text commands showed how quickly AI can adapt existing interfaces into new uses.
07.
Using Text to Create Fully Interactive Prototypes
Info
When creating text to create prototypes, the quality of results largely depends on your ability to articulate ideas clearly. Familiarity with established design systems and best practices are beneficial, such as:
Apple's Human Interface Guidelines
Google's Material Design
It's crucial to specify device dimensions in your prompts. Without this information, the AI might generate designs that fill the entire screen, resulting in non-responsive layouts
Key Factors for Effective Prompts:
Clear articulation: Describe your ideas precisely and concisely
Design system knowledge: Understanding popular guidelines helps in creating more accurate prototypes
Device specifications: Include screen dimensions to ensure responsive designs
Promp Used:
Create an interactive stock market dashboard using React and Recharts that displays historical data for AAPL, GOOGL, and MSFT in a responsive area chart. Include hoverable data points with custom tooltips showing price and volume data, clickable stock cards with performance metrics, and smooth animations. Style it using Tailwind CSS components with a modern blue/green/purple color scheme for visual distinction between stocks. Data points should be enhanced with visual indicators for up/down trends and the chart should support interactive touch/mouse events.
The results using the text prompt were surprisingly good.
08.
Conclusion
Pro Tip:
Generating Prompts from Images Instead of starting from scratch, you can upload a reference image to Claude or ChatGPT and ask it to write a detailed prompt describing that interface. A benefit of this is that it allows you add certain coding language. Take this prompt directly to Lovable.dev to recreate similar designs.
Prompt Refinement Not sure how to describe what you want? Chat with Claude or ChatGPT about your design goals. They can help craft detailed prompts that work well in Lovable.dev. This is especially useful when you have a concept in mind but struggle to break it down into specific interface elements and interactions.
Qualitative Feedback:
Personal Experience: AI tools as "game-changers" that allowed more time for creative thinking.
Design Quality: My ability to generate diverse and innovative concepts improved significantly.
Learning Curve: The process challenged me to become more precise in my communication and prompt engineering.
Lessons Learned
A hybrid approach, combining AI generation with my creative input, yielded the most innovative and practical results.
AI excels at generating initial concepts but requires human refinement for polished designs.
Text-to-prompt prototyping showed the most promise for abstract ideas, while screenshot-based methods were superior for iterating on existing designs.
Future Implications
As AI technology advances, I expect to see more nuanced understanding of design principles, leading to higher quality initial prototypes.
I anticipate AI tools will become integral to my design process, potentially reducing project timelines by up to 50% within the next year.
I’d love to build this further with real user testing and apply the hybrid model to areas like travel planning, shopping, or creative tools. I’m continuing to explore new interaction patterns that go beyond typing.
09.
Bonus
Here are a few more prototypes that were created just for fun.
Here are the original photos I used. The tool did a pretty good job of interpreting and recreating them.
