Skip to content
Guillaume Louvel

How this website came to be (part 2): Diary of a vibe coder

· 8 min

I ended part 1 by saying that the barrier to entering the Small but tech-savvy Web has been lowered. AI, specifically LLMs, is the main reason.
I’ve been able to “materialize” dozens of features for this website thanks to AI, and it took me about a dozen hours to get there (at the time I hit “publish” for the first time for this piece). Because those dozen hours spanned less than a month, I was able to create this website during the free trial of Copilot in VS Code. A deal too good to be true, which says a lot about the AI business sustainability… I basically got a free website.
Five years ago, this would have taken me months, if I’d managed it at all. Today, an LLM can “explain like I’m 5” the technical stuff that used to be gatekeepers, like translating a vague user intent into something concrete, or narrowing down different options that are likely to work for what you want to achieve. For this website, the first thing I asked AI was to explain how to install Astro and set up VS Code.

However, the barrier is only lowered, not removed. I consider myself a tech-savvy person: I’ve enjoyed tinkering with computers since I was a teenager, like modding games, theming mIRC, or simply going through config files using Notepad to see how things work. Lastly, being a UX Researcher brought me close to design & tech functions, allowing me to learn about their perspective and speak the language of design, although I can’t always speak the language of code.
All in all, I’m aware that I have a head-start, that I am part of a “tech niche”. My research background taught me how to ask things. My exposure to design & tech gave me the vocabulary for what to ask, even if I lack the syntax to actually build it.

My assumption is that someone less familiar with design or tech language would be leaving the AI too much room for interpretation when asking to build a cool product. To me, the main obstacle to leveraging AI is vocabulary, not intelligence. If you know what to ask, and how to ask it, you’re golden. If you don’t, you risk banging your head on your keyboard out of frustration because the AI won’t materialize your asks.

WARNING

I want to be clear: when I say “vibe-coding” is a valid way to build, I mean for low-stakes, self-contained projects like this static website. I would not rely on nor advise vibe-coding a product with complex dependencies, and certainly not for anything handling payments or sensitive user data.

So, what did I “vibe-code”?#

I started with a feature-packed Astro theme AntfuStyle made by Stephanie Lin, and inspired by Anthony Fu’s Antfu website. From there, I added several things mostly with Claude Sonnet 4.

My builds fell into three patterns, and each one maps back to the vocabulary problem.

When I knew what to ask#

The CV page, the “pinned” feature, and the Notes collection all came together smoothly. In each case, I could name precisely what I wanted.

For the CV page, I had a reference to point at: an existing theme with the layout I had in mind. I didn’t have to describe the abstract; I had a concrete example. Claude got 90% right on the first output, and I only had to refine the rest (the color palette for light and dark mode).

For the pinned feature, I knew the mechanism: a simple YAML boolean that would flag a post. I could describe how it should work, which left Claude free to be creative about how it should look, and it came up with the ”📌 pinned” label on its own.

Screenshot of pinned tag design with pin emoji and text

Thanks Claude!

For the Notes collection, I described a concrete use case: short reference content I’d want to pull up quickly on my phone. The category filter feature came out easily too. Clean ask, clean result.

When I was vague because I hadn’t thought it through#

The “latest blog posts / highlights” section on the homepage was the opposite case. I wanted to show the latest 3 posts and highlights, and up to 3 pinned posts. Simple enough, except I hadn’t actually worked out the edge cases in my own head before asking. What happens when a post is both in the latest batch and pinned? Do you show it twice? Replace one slot? Does the count change?

I didn’t know. And because I didn’t know, I couldn’t say. Claude reflected my own ambiguity back at me: every attempt surfaced a new case I hadn’t considered. We ended up working it out together over many iterations, but the bottleneck wasn’t Claude’s ability to code, it was my inability to spec. I fumbled, so Claude fumbled.

Here, I found AI to be a mirror: it can magnify the clarity, or the fuzziness, of your own thinking.

When I couldn’t name what I wanted at all#

In my experience, visual intent is where the vocabulary barrier hits its hard limit. That diagnostic gap of knowing something is wrong but not being able to name or articulate it has been my biggest issue.

See the blue shapes at the top and bottom of each page? These were the most painful thing to add to the theme. I could describe the feeling like “draw a blue shape that is like a cut rectangle that goes out of bounds at the bottom of the page”, but the AI couldn’t translate it into code, at least not as I expected. I tried both ChatGPT and Claude, and both failed to implement the clip-path the way I wanted, because I couldn’t give them the spec they needed. It was like trying to explain to someone exactly how to position an image in a Word document while the text blocks go wild and unpredictable. I ended up doing it myself.

The OG image issue was similar: clear goal (swap the placeholder logo for mine), but when Claude’s output was wrong, I couldn’t diagnose why, and it couldn’t self-diagnose as well. I lacked the vocabulary to explain precisely what was off. I ended up troubleshooting it myself, which made me hate working with SVGs.

(A footnote on Lyket’s integration: the issue there wasn’t visual, but a missing constraint: I asked for the implementation without saying “follow the docs, don’t reinvent.” Claude went rogue and rebuilt the feature from scratch. A lesson in being explicit not just about what you want, but about how you want it done. I assumed Claude would pick the most efficient route and use the documentation, but it turned out it didn’t.)

The trap of “Too easy”#

At times, I even got the feeling that using AI to build my website made things too easy, and that I had to be careful not to “feature creep” my very own product. This sounds like a rich problem, but this is why I chose the Small Web in the first place. The whole point of the artisanal approach I described in part 1 is that intent drives every decision. If I let AI’s frictionlessness do the deciding (adding features because I can, not because I want to) I’d end up with a technically polished website that has no real point of view. That’s just the industrial web, built with different tools.

Concretely, I see two risks:

  1. Bloating the website would go against the efficiency that the Small Web promotes: snappy loading times, low footprint, etc.
  2. Having a “builder” available 24/7 who tirelessly does my bidding is a great way to distract me from my main goal: actually writing stuff. It is easy to procrastinate when I can simply ask “fix this, implement that”, and I know I’ll always find something to tweak.

And even about the writing itself, AI is a slippery slope: if I can use AI to code what I want, why not use it to write for me?
To prevent myself from crossing this border (that I don’t want to cross anyway), I felt that it was important to showcase the badge from not by AI. Having this badge visible is like a reminder for myself that I am committed to not use AI for the actual writing parts. This is a personal website, and it has my name on it. That would be weird to delegate my thoughts and voice when I’ve already delegated the technical skills of web development to a machine.

Ultimately, those self-imposed constraints of patience and care may be the true filter for entering the Small Web in the age of AI. AI lowers the technical barrier for those who already have intent. But it can’t create intent. And unchecked, it can dissolve it. If you have no interest in the “artisanal” side of things (the tinkering, the tweaking, the ownership, and the design), no amount of AI will make you care about the nuances that make a website feel human. And that’s fine; the “industrial” web is great at being efficient and scalable. But if you want a digital home that feels like yours rather than a rental, you have to be willing to sweat the details.

AI can build the foundations for your home, but it can’t inhabit it.