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

I ended part 1, by saying that the barrier to enter the Small but tech-savvy Web has been lowered. For me, AI (specifically LLMs) is the main reason why. 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.

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, and my exposure to design & tech gave me the vocabulary for what to ask, even if I lack the syntax to actually build it.

I see AI as a “builder”, while I become an “architect” and approver. Being familiar with design language, I can ask AI to “materialize” interfaces and interactions that would have taken me days of struggle to code. My assumption is that someone less familiar with design language would be a “client” leaving the AI too much room for interpretation when asking to build a “cool” product, for lack of better words. Let me be clear: the main obstacle to leveraging AI is about vocabulary, not intelligence.

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

First of all, 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 a few things using Claude Sonnet 4 for the most part:

Homepage#

• The “hero header” on the homepage. This hero picks a random profile picture of mine on each page refresh (more to come!). The implementation was relatively easy: Claude created the hero component itself, then we discussed the layout for text and picture together, and finally I was able to make some small changes to it myself (font size, picture size, alignment, etc.).
• The “latest blog posts / highlights” sections. At the time of writing, these sections show the latest 3 blog posts and highlights, and up to 3 “pinned” posts. Claude struggled with the implementation because of the different rules (latest vs pinned) going on. It took it several attempts to get things right, but to be honest I wasn’t clear on the rules either. Like what happens when a note is both part of the latest batch, but also pinned? Claude and I had to consider different situations together.

CV#

• This page was created from scratch, but I was inspired by the theme astro_academia. The implementation was quite easy for something created from scratch: Claude got 90% right on the first output, and I had to refine the last 10% with it (eg. the color palette for the light and dark theme).
• Claude got ahead of itself by applying a hover effect on the cards, which I found weird for an element that is not interactive. I ended up removing the effect for this page.

Blog#

• The “pinned” feature for blog posts, as a way to highlight them on the page’s list, and on the homepage. To pin a post, I have to set one of its yaml properties to “true” and voilà! Claude was pretty smart for this one design-wise, and came up with the ”📌 pinned” label design itself. The technical implementation was a bit bumpy, but who am I to judge?

• The toggle “English only” is from Anthony Fu’s website and was not originally in the Astro theme (and also relies on a yaml property). When asked whether a checkbox (Anthony Fu’s choice) or a toggle would make more sense, Claude was… undecided. So I had to step up and pick the toggle.

Highlights#

• This collection existed in the AntfuStyle theme already, but I got rid of it at first because I don’t use social media much. After a while, I thought “why wouldn’t I use my website as a bookmarking tool?” so I rebuilt it with some extra stuff of my own: highlights can either be from
  • an open platform (bluesky, linkedin, substack, or any other websites) in which case the card will display its icon, as well as an image from the article, and the author. Most of it is automatically parsed with Obsidian Web Clipper. I’ll document this workflow at some point.
  • something that I heard or read in real life or on slack. Here, the card will display a citation.

• Overall, Claude understood the assignment, because the Highlights collection reuses code from the Notes collection.

Notes#

• This is a collection that I created, for things that I want to look up quickly on my phone when I need to. It has a “category filter” feature that was implemented quite easily, which I might add to the Highlights collection at some point.

Contact#

• AntfuStyle comes with Giscus comments, but I wanted something more inclusive, so I went with a guestbook powered by Cusdis instead.

Misc#

• Lyket’s “clap 👏” feature integration. I don’t expect much from it, but I thought that it would be cool to have this interactive element for blog posts, highlights and notes 🙂 The implementation was surprisingly bumpy, because Claude went overboard and basically redesigned the feature from scratch when it should have simply followed Lyket’s documentation… I had to step in to tell that to Claude, and that the feature had to be disabled in dev mode to prevent the pageview count.
• Navigation through tags. This one is mostly because “why not do it?”. I don’t use tags that much, but I told myself that maybe one day it will click and I’ll be grateful to have this page and I will enjoy some kind of serendipity enlightenment. Maybe it will be useful to you first tho! The implementation was easy, and I don’t think I will change it anytime soon.
• See the blue shapes at the top and bottom of each page? These were the most painful thing to add to the theme… I tried ChatGPT and Claude, and both had issues implementing these clip-path the way I wanted because it had to deal with the header and footer. I ended up doing it myself.
• OG images were also super painful to implement despite the feature being present in the theme. I just wanted to change the placeholder logo with mine, but Claude couldn’t make it work. Here again, I had to step in and troubleshoot the issue myself, which made me hate working with SVGs.

So, that’s about a dozen of features that I was able to “materialize” thanks to AI, and I’d round it up to 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. A deal too good to be true, which says a lot about the AI business sustainability…

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. I see two downsides here:

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. Does this qualify as “virtue signaling”? Can virtue signaling be good by the way? I don’t know, but 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 where my craftsmanship is. The part that has to be authentic, and that the Big Web is leaving behind.

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 might remove the barrier of syntax, but it doesn’t remove the barrier of intent.
If you have no interest in the “artisanal” side of things (the tinkering, the tweaking, the ownership, etc.), 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.