[ad_1]
Need to build a website for your business, event, or personal brand? You’re in luck—advancements in generative AI have made it easy for anyone to build software regardless of technical skill through a new method called vibe-coding.
For non-technical founders, this new vibe-coding phenomenon presents a big opportunity: Why pay top dollar for freelance engineers and designers when you can build your company’s website entirely on your own?
But vibe coding isn’t magic. Working with these tools can require some serious trial and error, especially for those without coding experience. That’s where we come in. I’ve been covering AI since early 2022 and have vibe-coded games and websites for personal and professional use. And I led a vibe-coding workshop at this year’s Inc. 5000 Conference.
We’re going to walk you through how to build an extremely simple website for your business using Lovable, a Sweden-based vibe-coding platform that gives users five free credits per day. Lovable has seen some major growth recently. In an interview at the Web Summit in Portugal, co-founder and CEO Anton Osika said that the company was nearing 8 million users.
Let’s dive in—more complex coding tasks use more credits, so we’ll have to be thrifty. I used roughly four credits to create the work you’ll see here.
Step 1: Get chatty with the AI
For this example, we’re going to pretend that we’re opening up a pop-up cafe in Manhattan’s Central Park, and we need to create a simple landing page website that includes the location and a short piece of text explaining what it is.
The best way to ensure a vibe-coding platform creates a website to your exact specifications is to be incredibly verbose. Offering more detail than you probably feel is necessary, especially on the first prompt, can be really helpful. This is great news if you’re chatty. Here’s the prompt I gave to Lovable, which intentionally includes a bogus date so no one gets confused:
“Create a simple landing page for a new pop-up cafe in Manhattan’s Central Park. The website should include some text explaining that the ‘Vibe Coding Cafe’ will be coming soon near Belvedere Castle over the weekend of Decembruary 7 through 9, from 7am to 4pm ET. There will be free wifi, and customers can get an extra free coffee if they vibe code a project while at the cafe. The entire website should fit on a single full-screen desktop page without scrolling.”
If you’re having trouble coming up with a long, detailed starting prompt, an initial easy step is to use Lovable’s voice dictation feature to simply talk to the platform and tell it what you want the website to be. Don’t be afraid to ramble; the more detail the better.
If you don’t feel like talking out loud, you can click the “Chat” button under Lovable’s prompting text box. This allows users to have a conversation with Lovable without it making edits to your project. This is useful when you want to know specific information about your website or want to brainstorm with Lovable to give it additional context to draw from. You could also ask the AI of your choice, like ChatGPT or Claude, to help you create a longer prompt.
Step 2: Check the result for errors
Roughly a minute after I submitted the prompt, Lovable developed a simple website including the pop-up’s name, hours and location, along with information about the wifi and bonus coffee offer.
This was a pretty good start! But there were a few glaring issues: First, the pop-up’s date was listed as December, not the fictional “Decembruary” I had requested. The page also lacked features that would allow people to register their interest in the event and find the location on a digital map.
Step 3: Tell it to try again (and then check it again)
For our next step, I gave Lovable the following prompt:
“Lets tweak the design to include a digital map and a working RSVP form where people can sign up for a mailing list to get more information. Also make sure all the buttons on the page work and that the event is set to take place in “Decembruary.”
On its next attempt, Lovable generated a redesigned website that fixed the date and added a built-in Google Maps widget and an RSVP form that can be opened with a button click.
To create the working RSVP form, Lovable suggested that I activate Lovable Cloud, a feature that gives software on the platform a cloud-based backend. That’s where we can store and export the RSVP data. After agreeing to Lovable’s plan, the platform activated the backend and created a working database that logs each RSVP submission.
With that, we have a solid website for our ultra-simple needs.
Step 4: Check for security issues
Next, I navigated to my project’s security page, and directed Lovable to scan the site for errors. I saw a notification that my new RSVP data was publicly readable—remember, vibe-coding has a reputation for not always thinking about security first—but the platform was able to quickly modify the backend’s security policies to nip this error in the bud.
Step 5: Publish the website
Finally, we’re ready to get this site hosted online. By clicking on the publish button on the top-right corner of the screen, Lovable users can either choose to have the platform host their websites for free, or use a custom domain. Since using a custom domain requires a $25 per month Lovable subscription, let’s go with the free option, which creates a URL with the extension “.lovable.app.” Check out our final website at https://vibe-cafe-launch.lovable.app/
And there you have it! A simple, working website with backend data connected. This is just a taste of what you can achieve with vibe coding. More advanced platforms and methods allow you to go even deeper, customizing and creating the software you could never create on your own. Happy coding!
The early-rate deadline for the 2026 Inc. Regionals Awards is Friday, November 14, at 11:59 p.m. PT. Apply now.
[ad_2]
Ben Sherry
Source link