My First Vibe-Coded Website: From Children's Book to Live Site in Half a Day

A friend of mine recently came to me with a great problem to have. She’d just written a fantastic children’s book, "Zig Zag Save The Rainforest," and the publisher had asked about a website. She had no idea where to start.

My first instinct was to point her towards Rocketspark, a choice Kiwi company I’ve recommended before for exactly these kinds of projects. They make it easy for anyone to get a great-looking site up and running.

But then, the curious part of my brain kicked in. We love solving problems at Calo, and I started wondering, "How well would AI go at building this?" I told her I’d give it a crack and see what I could build for her.

The Developer's Dilemma: Function vs. Form

As a developer first, my biggest challenge is often the design. At Calo, we’re collaborative solution architects who build powerful operational tools for businesses. We create web and mobile applications , handle complex systems integrations , and develop custom software that needs to perform flawlessly. Our focus is on making things work seamlessly, rather than on flashy animations.

So, while I can confidently make something functional, making it look good is a whole different skill set.

Let's Get Cracking: Putting AI to the Test

This is where the idea of "vibe coding" came in. I decided to lean on AI-powered tools to handle the design and initial structure, guiding it with prompts about the book's brand and feel.

I have to say, I was blown away by the result. The website the AI generated looked fantastic and, more importantly, it perfectly matched the playful, vibrant brand of the book. The whole thing was sweet as.

It adapted the content correctly, and my job was boiled down to the final touches: swapping out placeholder images for the book's gorgeous illustrations and editing the links for where to buy it. The process was incredibly transparent and straightforward.

The Human Touch: Where "Vibe Coding" Meets Expertise

Of course, this is where a bit of experience comes in handy. While AI can get you 90% of the way there on the visuals, knowing how to actually deploy the website and build on solid foundations is key. This is the step where a lot of "vibe coders" will get stuck.

I built the site using the tools we love and trust at Calo—it’s a Nuxt 4 project hosted with Firebase App Hosting. Because we primarily use VueJS for our web applications, this was right in our wheelhouse.

What could have been a couple of days of work, including design mock-ups and development, was wrapped up in just half a day. Most of that time was spent having a good yarn with my friend to confirm the content and images. For a job well done in such a short time, you can’t help but say "ka pai."

For a look at the final product, check it out here: https://zigzagsavetherainforest.com/

This little experiment was a brilliant reminder of our core mission: to help people perform better by finding smarter ways to work. By embracing new tools, we can deliver good work more efficiently, freeing up time to focus on what really matters—solving complex challenges for our clients.