Drafting a new homepage with Lovable AI

In Part 26 of my project to build the biggest online archive of the Rotis font, I have a go using a generative software tool called Lovable to build a new homepage

I decided to build on some experiments I did with v0 and Claude back in December. This time I decided to give a generative AI tool called Lovable a go. It seems to have one of the better reputations among its rivals for creating sophisticated designs and working web software using best practices.

I started off with a prompt to generate a grid of thumbnails but quickly realised I needed to give it something more concrete to go off.

After some experimenting, I landed on a desired look and feel and layout and mocked it all up in Figma to feed into the AI as a guardrail.

Mockups for the components to feed into Lovable alongside my prompt

Results were mixed! By the end of the session of several prompts, it had created a working webpage with clickable thumbnails and an incrementing “I’ve seen this!” button on the popover.

But despite my mockups and my instructions that I was going after a “Windows 95” style, it took the initiative to diverge from the brief and create its own look and feel.

What I fed into Lovable and what it created

There must have been something amiss with my prompting method. I leveraged some recommended principles but didn’t get high fidelity results as quickly as I thought I would.

I will keep experimenting to work out how to get the best results when feeding in design mockups.

Lovable was one step ahead, adding a ‘close’ button to the popover, which I hadn’t thought of doing!

Spotted something in my prompting method that I could do differently? What has worked for you? Do reach out!

Until then, have a great week ⛵