We’ve binged a ton of YouTube videos about vibe coding so you don’t have to. Here’s the basic workflow most vibe coders use, but if you don’t care about all the theory and just want an easy way to get a beautiful, working design, keep reading. We’ll give you an ultimate guide using only two tools to make your project good, fast, and free.
This is what tech bloggers usually do to build a “vibe-coded” website:
- Hunt for references on Pinterest.
- Ask an AI to generate unique images based on those references.
- If they want extra flair, they add animations and interactivity in AI tools.
- In a website builder, they describe the idea and build it step by step. Right now, Lovable and Bolt are the big names. If you already know some coding and don’t mind paying a subscription, a lot of people go with Claude Code.
- Build backend logic and webhooks without traditional programming. n8n is the trendy choice for that right now.
- Connect the website to a custom domain and publish it using a hosting service.
Sounds like a lot, right? Not very “vibe.” And imagine how much you end up paying for all those tools and subscriptions.
We’re going to save your time and your wallet, and show you how to do it in a short, fast, ultimate way using only AI and one smart tool (Skapi - as you’ve probably guessed already).
Our project concept is an online pre-sale platform for a concert, where people can sign up and join a waiting list to be the first to know when tickets go on sale, and get the earliest chance to buy them.
Even though we’re an IT company and know what we’re doing, for the sake of the experiment this project was built by our marketing manager, not a developer. If a marketing girl can do it, you can absolutely do it too.
So if you’re ready - let’s get started.
Looking for references
First things first - we want a pretty, stylish website. But let’s be honest, we’re not designers, right? So we head over to Pinterest and search for “band website”.
I literally grabbed the first one, because we don’t need any special functionality from the design. The AI will take care of that for us. And honestly, I chose this one because it’s Joy Division. Enough said.
Backend in a minute
Next, let’s go to Skapi. Create an account and start a free trial service. If you need help, you can find the full walkthrough here, but honestly, it’s straightforward even without instructions.
After clicking “Create,” you’ll land on your service page. That’s where you’ll see your backend credentials.
Download SKAPI.md file and copy the prompt. It already contains your credentials.
Give the prompt to AI
Now let’s jump into Lovable. That’s our tool of choice for this project, because it lets us visually tweak sections of the site and then download the generated code.
Here’s the prompt I’m using, and when sending it, don’t forget to attach SKAPI.md file and the reference picture:
Use the file "SKAPI.md" as a system prompt.
My Skapi service ID is: [YOUR CREDENTIALS HERE].
Build me a website for Joy Division. A PNG reference is attached.
Adapt it into an online pre-sale platform for a concert tour, where users can subscribe to a newsletter and join a waiting list to be the first to know when tickets go on sale and get early access to buy them. Send users a confirmation email using Skapi’s newsletter feature.
Here’s the functionality Lovable generated from my prompt:
- Newsletter subscription via Skapi — visitors can enter their email and instantly join the waitlist
- Email confirmation flow — users receive a confirmation email and must verify their address
- Success handling — automatic redirect after successful verification
- Tour information — clean layout with stats and pre-sale details
- Fully responsive design
- Skapi initialized in index.html using my service ID
- Uses subscribeNewsletter() with group: 'public' for public newsletter subscriptions
- Automatic confirmation email sent through Skapi
- Redirect URL for after the user verifies their email
Testing ready website
Now let’s test it. We can do everything directly from Lovable’s preview.
And yes, it works. I entered my email and immediately received the verification link.
Customize your email
You can customize all automated emails directly in your Skapi My Services Dashboard.
Here’s a quick DIY walkthrough:
- Open the Automated Emails section.
- Create a new entry, give it a name, and register it.
- Copy the generated email address (the one highlighted in red).
- Open your regular email provider - Gmail, Outlook, whatever you use.
- Write the email you want your users to receive and send it to that copied address.
That email becomes your template for the signup confirmation message. From now on, users will receive your version instead of the default one.
Deploy your website
Now, back to our Joy Division website.
The final step is deployment — and here’s the good news:
You can handle everything right inside Skapi, without hunting for third-party hosting or paying extra.
Here’s how:
- Go to Skapi and open File Hosting from the left dashboard.
- Create a new domain by choosing a name and clicking Register.
Next, head over to Lovable:
Click the GitHub button and connect your GitHub account to create a repository.
If it’s your first time, just follow Lovable’s guided steps.
Once the repo is generated, Lovable will give you a link, open it on GitHub and download the code as a ZIP file.
Inside the ZIP, locate your dist folder (you’ll need to build it through your Terminal) - that’s the production-ready build.
Go back to Skapi → File Hosting and upload all the files from the dist folder.
And that’s it - your Joy Division pre-sale site is live! You can check our version here: https://joydivision.skapi.com/
It’s honestly incredibly fast and simple. And if you want to go further, you absolutely can. You can ask the AI to build a full user dashboard showing upcoming tour details, their position in the waiting list, login/signup flows, and even an admin panel with restricted access so you can manage users and send notifications. Or you can push the design in a more complex or artistic direction.
With this setup, pretty much anything is possible.
You can also skip Lovable entirely and ask ChatGPT to generate the HTML code for you. But keep in mind that if you need visual changes later, raw code isn’t nearly as flexible if you don’t know how to code. Most AI models will regenerate the entire page, which often breaks everything you already built. That’s why a visual AI website builder is usually the more practical choice.
I hope you enjoyed this walkthrough. If you have any questions or need help while following the guide, let us know in the comments or send us an email at support@broadwayinc.com.
And remember: Skapi gives you a single, unified backend you can reuse across every AI-built project.
Whether you build in Lovable, Bolt, Claude, Cursor, or raw HTML, your backend remains stable, portable, and easy to understand.
Follow us on socials: X, YouTube, Instagram, LinkedIn. More tutorials, code drops, and dev hacks are coming soon.
Top comments (0)