krai studio
[email protected]Games · Web · Apps
All posts
Vibe codingDesign3 min read

We rebuilt our website with vibe coding

How we turned a dark, over-promising agency site into something that actually sounds like us, with an AI pair doing a lot of the typing.

A small clay robot and a human hand building something out of colourful blocks

Our old website looked impressive. Deep navy, a space video in the background, big claims in the hero. It also said things that weren’t true: “40+ projects shipped”, “12 countries served”, a blog full of lessons from client work we hadn’t done.

So we started over. This post is about how, and about what vibe coding actually looked like while we did it.

First: delete what isn’t true

Before touching any colours, we went through the site line by line and asked one question: is this actually true? A lot didn’t survive:

  • The stats strip and the animated counters
  • “Digital product agency, working worldwide”
  • Six blog posts written as if we had years of agency experience
  • A promise to reply within 48 hours that nobody had agreed to

What was left was smaller, and honestly a bit scary to publish. We’re a small indie studio. We love games. We build websites, apps and small games, and we use AI to do it faster. That’s the whole pitch now.

Then: make it feel like us

The dark theme made everything feel serious and a little cold. We wanted the opposite: warm cream paper, deep plum ink, a coral accent and four pastels (peach, lilac, mint and butter) that the rest of the site could play with.

The illustrations are AI-generated with Runware in one consistent “soft clay” style. We wrote the prompts, generated a batch, kept the ones that fit and threw the rest away. They’re clearly illustrations, not fake photos of an office we don’t have.

A dark mode still exists, because some people just prefer it. It follows your system setting until you pick one yourself.

What “vibe coding” meant in practice

Most of the code in this redesign was written by an AI coding assistant. That sounds like the AI did the work. It didn’t, quite. The split looked more like this:

  • We decided what to say, what to cut, the colours, the tone, which logo, and when something looked wrong.
  • The AI drafted components, rewrote the copy we asked for, generated the illustrations and did the tedious parts (favicons at five sizes, anyone?).
  • We checked every page in the browser, on a phone-sized screen, in light and dark, before anything was committed.

The speed difference is real. The thinking part didn’t get shorter, though. If anything we spent more time on decisions, because we weren’t spending it typing.

What we’d tell someone trying this

Start with the content, not the code. An AI will happily build you a beautiful page that says things that aren’t true, because you asked for “a professional agency site”. Tell it what’s real, and make it cut the rest.

And look at everything yourself. The best catch in this whole project came from testing, not from generating: our contact form would have rejected every real visitor once deployed. We wrote about that one in the Astro post.