Vibecoding my blog theme from template to working site

My blog worked fine, but given the age the theme started to feel a bit limiting. Nothing was broken, yet there definitely was room for improvements and a more modern look.

Now with all the rage being AI and vibecoding I figured I could use that approach to speed up the process. I wanted to try a workflow where AI helps with the boring parts, while I stay in control of the decisions.

This blog is about the steps I took where AI helps with the scaffolding, while I stayed in control of the decisions (or so I thought).

Looking at templates first

Before touching code, I spent some time looking at templates that I liked and that had a vibe I wanted to capture. I also spend some time drafting a rough sketch of the setup I wanted, including the structure of the pages and the overall feel.

Next Up: turning those ideas into a prompt.

I asked Claude to help me craft an initial prompt by providing links to designs, a picture of my rough outline and structure the prompt to be used in v0.dev. The goal was simple: describe the structure and feel of the blog theme in plain terms that another tool can pickup for me.

It didn’t need to be perfect. Just clear enough to generate a first version.

Generating a starting template

Since I am using Hugo I only needed HTML and CSS. No need for complex JavaScript or backend code, so with that prompt, I asked v0 to generate a HTML only template. The result was exactly what I hoped for: rough, but usable. A solid starting point. But since I am using Hugo just plain HTML and CSS is not enough. I needed to integrate it into the Hugo structure.

I downloaded the template and placed it in a /temp folder inside my weblog repository.

Let the AI understand the codebase first

Next up wiring it up. But before asking the AI to do that, I wanted it to understand the codebase first, so a simple claude /init command in the root of the repository was the next step. Then a prompt to have it look at the /temp folder and analyze the structure and suggest an implementation plan.

• architecture.md – a description of how the current blog theme is structured
• plan.md – a step‑by‑step plan to integrate the new template

Reviewing the plan

Once the plan was written, I reviewed it; boring task but I wanted to make sure I was not burning tokens for something I didn’t need. So yes, I tweaked a few things. Removed two steps that felt a bit overkill and adjusted some steps for wording or additional context. Steered it a bit toward how I want the structure of the blog to evolve.

That part still matters. AI can suggest a plan, but you are still responsible for the architecture.

Executing the plan

After the plan looked good, I asked Claude Code to execute the steps and update accordingly. The most boring part as AI takes of, spends a bit of time working through the steps, and then comes back with a working version of the blog theme. Most of the heavy lifting happened there. No weird errors or things breaking. Just a working version of the blog theme.

The result

The new theme is now running in the blog; the structure still matches the repository. The layout is cleaner. And the process took much less time than doing everything manually. Next up I figured to follow up with a few more prompts to analyze the following:

• The implementation and suggest SEO improvements
• The result and suggest performance improvements

And finally a claude /insights command to learn where I can improve my prompting and how to work better with the tools #neverstoplearning.

What worked well

A few things made this process work:

• Give the AI enough context and use the right tools for the job
• Experiment with those tools and find a workflow that works for you
• Ask it to explain the architecture first so you can review and adjust before it starts working
• Work with a plan before touching code
• Review the plan before execution

In that sense, it helps to treat AI a bit like a junior colleague. Let it explore, propose a plan, then review before it starts implementing and finally review the result.

All in all a great experience and a nice way to speed up the process while still being in control of the decisions. The new theme is now live, and I am happy with the result. Looking forward to tweaking it further and maybe even sharing the template for others to use.