From Design to Droplet: Building This Blog with AI

Why I Built This

This blog is one of my first projects that's actually reached real users. Not a PoC rotting on localhost. Not a demo for a hiring panel that gets shelved immediately after. A real thing, live, with a domain and a server behind it — and that felt meaningful.

The goal wasn't the blog itself, though. It was to explore the full cycle — design, build, deploy — entirely steered with AI. Not just the code. The design. The content. The infrastructure. I wanted to see how far you could take it.

A couple of spare evenings. Here's honestly how it went.

The Steps, In Order

• Wrote out requirements for UX Pilot — pages, layout patterns, visual style, interaction flows
• Got three design variations back, picked one, iterated on it, exported to HTML
• Handed that HTML to Claude Code — first task was extracting a design spec: components, patterns, behaviours
• Broke the UI into standalone reusable components, grounded in what the design already established
• Set up Next.js, structured the project, rebuilt layout and pages from those components
• Imported three brain-dump articles I'd already written; kept the ideas, let Claude sharpen the language
• Opened a Grok AI free trial, generated hero images for each article, then turned each into a short looping video
• Wired up the media properly — lazy loading, fallbacks, smooth hover transitions
• Added cookie consent and a proper privacy page (not a placeholder)
• Let Claude Code connect directly to my DigitalOcean droplet, fix a few security issues, deploy the site, set up CI/CD on master

Design Before Code

I started with UX Pilot — similar concept to Lovable, different execution. You define what you want and it generates UI/UX designs. I wrote out the requirements, got three variations, picked the one that felt right, and iterated. Then exported to HTML.

That HTML became the source of truth for everything that followed. It sounds obvious when you say it out loud, but honestly — most side projects skip this step entirely and wonder why the code feels messy two weeks in.

Claude Code Takes Over

I handed those exported files to Claude Code. First task: turn them into a proper design spec. Not just "here's a card" — but what the card carries, how it behaves, where it sits in the system.

From there, we broke the UI into standalone reusable components and rebuilt everything in Next.js. Static to start. No unnecessary complexity until it was actually needed.

There were iterations. Some things needed tuning — spacing, contrast, how certain pieces felt at different viewport sizes. Normal stuff. But the foundation held because the design existed before any code did. That order matters more than people give it credit for.

The Content

I had three articles sitting in a notes app — genuine thoughts, real experiences, rough around the edges in terms of writing. I kept the ideas intact. Those were mine. Claude sharpened the sentences. Didn't change what I was saying, just made it easier to read.

One article is still plain markdown. Lean by choice.

Thumbnails and Video

Opened a Grok AI free trial. Generated hero images for each article — described the vibe I wanted and iterated until it looked right. Then took each image and turned it into a short looping video. That video now plays on hover over the article card, which ended up being one of my favourite little details on the whole site.

Went back to the UI to handle those media elements properly. Lazy loading, fallbacks, smooth transitions. Small things that compound into something that feels polished rather than thrown together.

The Compliance Side

Analytics means transparency. I added a cookie consent banner and a privacy page — not a placeholder, a real one. If you're collecting data, say so clearly. Took maybe 20 minutes total.

DevOps in an Evening

I had a pre-existing DigitalOcean droplet and pre-existing knowledge of GitHub Actions, Nginx, and deployment patterns. Then I did something that felt a little bold at the time: I let Claude Code connect directly to the server.

It identified a few security issues. We addressed them one by one — every action confirmed before execution. Swap configured. Site deployed. CI/CD wired up on master branch push.

Worth noting: the droplet had no critical projects running on it. That was an important precondition. I wouldn't do this on a machine with live customer data without a much more controlled setup. But for a fresh side project? It was fine, and honestly kind of satisfying to watch it work.

What I Actually Did

I was present for every step. Every decision went through me. Claude Code got freedom to structure the component template — that's about it. Everything else was steered: design choices, content direction, infrastructure decisions, what gets reviewed before it ships.

The outcome looks clean and professional because design came first. Having a visual spec creates constraints that help rather than hinder — the AI had something concrete to be faithful to, not just vibes.

The only thing I created entirely myself — not improved, not generated, not assisted in any way: the actual content. The ideas. The writing. That part stayed mine.

Two spare evenings, start to live.

---

I'm genuinely happy with how this turned out. What's a small project you're proud of shipping? I'm curious.