Recently, the term "Vibe Coding" has been popping up everywhere on my timeline. The gist is simple: how we can build something just by relying on a "vibe" or human language instructions, without stressing over typing syntax from scratch.

Curious, I finally decided to try out a rising software called Antigravity. My goal wasn't ambitious: create a landing page for a coffee business, "Kopi Sira," and the result had to be static—just a single index.html file.

Why Antigravity?

Why not? You can use any code editor you're comfortable with, but for this vibe coding experiment, I just want to use Antigravity here. As mentioned in the title, this whole experiment is about building with Antigravity—from the initial mockup to the final polished version.

The choice is pretty straightforward: I want to see how far we can push a single tool throughout the entire workflow. Starting from generating that first HTML file, all the way to refining it into something production-ready. And yes, in the follow-up article where I'll cover polishing this mockup, we'll still be using Antigravity. It's about consistency and really understanding what one tool can do when you stick with it from start to finish.

Workflow: From Idea to Index.html

The key to getting a neat result in just one prompt is context. Don't just ask to "make a web," but include the company details too.

Here is the prompt I threw at Antigravity:

Create a static landing page (single index.html file only) for 'Kopi Sira'. Located in Jagakarsa, South Jakarta. Use Tailwind CSS via CDN to keep it simple. The vibe should be minimalist but luxurious, dominated by dark Espresso and Cream colors. Include a Hero section, a brief story about Gayo & Toraja coffee beans, a menu grid, and a footer. Oh, and make sure it's responsive and uses Lucide icons to look pretty.

The Result? Done in a Snap

In less than a minute, Antigravity instantly generated one complete HTML file. The Tailwind structure was tidy, the font choice was perfect, and most importantly: it ran immediately. I didn't need to open a terminal to run npm install or wait for a long build process.

Keep in mind that AI-generated results can vary each time you run the same prompt. The demo I'm sharing here is one specific output from my experiment—your results might look slightly different in terms of layout, styling choices, or component structure, even with the same prompt.

Try it yourself: View Demo — Want to download it? Just press CTRL-S (or CMD-S on Mac) in your browser to save the HTML file.

Reality Check: It's Still a Mockup

But remember, what is produced in one prompt is basically just a mockup or prototype. The look might already be good, but if the target is production-ready, we still have to proceed to the next steps manually.

Here are some things I usually polish after this mockup phase:

Vibe coding with Antigravity is very helpful for instantly seeing the physical form of our ideas. Once we are happy with the "vibe," only then do we move on to polishing the details until it's truly ready to launch.

In Closing

This experiment proved that tools like Antigravity can really cut down repetitive work in the early stages. For those who want to try, my tip is just one: give clear details about the company context right at the start.

If you're curious about how to add new sections or make changes to this mockup, I'll cover that in a follow-up article—showing you how to extend the landing page with additional sections and customize it to match your vision.