Speed up prototyping with AI – Fast and Fun!

Testing new digital product ideas has never been easier. With AI, you can build your first web-based prototype – even if you’re not a developer. I have used Lovable.dev several months now to quickly try out new user interfaces, features, and product ideas. I'd like to share some tips on how you also can get started.

AI prototyping will be a catalyst for enabling real business agility, helping you to build the right things.

You could have your first prototype ready for user tests in 10 minutes!

What is your goal with the exercise?

If your goal is to explore and get inspired, you can use loose, creative prompts. Just try creating multiple small projects for different ideas and continue with the best one. And have fun! In that case, scroll down to the “Start Building!” section and just jump in!

But if you already have a concrete idea and want to turn it into a real MVP, you’ll need to be more structured and work in iterations. That is what article is about, providing some tips to make that journey start in the right way!

Build a Clear Goal Statement

Like any project and when collaborating with anyone, you need to explain your idea clearly so the AI understands you – and so you stay focused too. Write down your goal. What are you building? Why? For whom?

Now, continue using your favorite AI chat to break down your project and generate ideas, for example:

“Help me define features for this idea: An ‘Airbnb for tools’. People buy tools that often just sit in storage. In any neighborhood, someone already has the tool you need. ”

Simplify the result, making sure to:

• Focus on core features only, leave out any extras in the beginning as it tend to confuse the AI if too much is provided at the same time.

• Tell the AI about the structure, like “multi-page site”, “SEO-friendly”

• Remove any things not necessary for the very first version, while keeping things that add to the feeling of the site.

Take these features now features when building your prompt. You can also give the AI guidance on how your product should look and feel. You can use references to styles or the look and feel of a specific known site:

“I want the design to feel like Airbnb, clean and Nordic, with lots of images. Use Midnight Blue as primary color, Calibri font. Texts should be friendly and informal. Emphasize eco-friendliness, saving money, and good neighborly relations. Build trust with insurance and BankID verification.”

Start Building!

The process of starting prototyping is super simple:

1. Go to lovable.dev and create an account. - I recommend getting the $25/month plan – as the free version runs out fast, and it only allows public projects that anyone can see and copy.

2. Paste in your prompt (and select private) and watch it build you your first version.

A great resource for Lovable prompting is the prompt library on their own site. Here is an example of how they suggest you to do the start prompt.

I need a task management application with:

- Tech Stack: Next.js frontend, Tailwind CSS for styling, Supabase for auth and database.

- Core Features: Project and task creation, assigning tasks to users, due date reminders, and a dashboard overview.

Start by building the main dashboard page, containing:

- A header with navigation,

- A list of projects with their status,

- and a button to create a new project.

Provide dummy data for now, and ensure the design is clean and responsive.

I have not really seen a big difference in using the exactly the format they provide. The important thing seems to be to include the right things.

In their example, I like that they emphasize just building the first step, and using dummy data. They are also clear about the exact functionality you want in the first step. My experience is that the tech section is unnecessary as Lovable always seems to use React and TailwindCSS, and the only database I have seen automatically integrated is Supabase.

Example of creating a Tool Sharing App

Here is an example of a simple prompt and what Lovable generated.

I used this prompt:

A peer-to-peer platform for neighbors to borrow tools. Target audience: apartment owners and new homeowners. Many tools are used once a year – expensive and bad for the environment. Sharing saves money and builds community.

I want the service to feel like a DIY magazine – clean, light Nordic design with many images and tips. Use midnight blue as the main color and Calibri font. Text should be friendly and informal. Highlight environmental, social and economic benefits. Build trust with insurance and BankID verification.

Start without database or login.

The Lovable-generated Site

What you will notice soon is that most of the generated sites have a similar look and feel. So you would have to change that to create your own identity, but it will quickly have a good enough look to test the service concept with users.

It generated a frontpage hero section with a call-to-action. Initially blue, but I asked it to add a picture to the background. One button is still white text on white, and would have to be changed.

The list of tools gives us a good idea of what the site could be, and we get the chance to review specific ideas, like is it useful for users to immediately know when the tool is available and if it has been borrowed before.

Typically, Lovable automatically generates a few sections like how to, testimonials and other sections typical for any modern site landing page.

The tool page looks pretty nice and complet from the beginning.

The booking page looks nice, and can probably be used in the MVP.

Reality Check

Its really easy to get caught in just the fun of improving what you already got. I suggest that you after 1 hour (or perhaps 1 day) – pause and reflect:

• Does it solve the real problem? If not, try a different angle or idea.

• How’s the overall design and UX? If it feels off, start fresh with your new insights.

• Data model – critical! This is hard to fix later, so plan it early.

Don’t try to rework something that’s fundamentally wrong. It’s often easier to start over with what you’ve learned.

Remember to clean the code if you intend to keep it

Don't wait to review the code structure, ask a developer or do it yourself. The AI generated code tends to get messy if left unchecked. It might repeat itself or structure things inconsistently, and its better to enforce good design before you generate too much code. When it gets bigger and messier, the AI will have difficulties in creating new working functionality as well as finding and fixing bugs.

To help the AI write clean code and implement things predictably - when you start - consider add these statements to your prompt or Lovable project settings. It's much easier and agile to do the prototype with a pure front-end structure, and then add database support. And always modularize to keep things neat.

No login or database. Create a data layer with JSON in "/data", and service logic in "/services". Store all site configuration parameters in "/data".

Modularize aggressively.

Need help to speed up prototyping?

If you get stuck or your company needs support to get started, feel free to reach out. I also give talks on how AI is changing the way we build products and software and how to leverage it.

Johan Eliasson is an independent product and technology leader. Please feel free to reach out for any questions or opportunities for collaboration.