.png)
6 hours ago
1
Starting Point
So there I was, 11 PM on a Friday night, probably should have been watching Netflix or doing literally anything else, but instead I’m sitting here thinking “I really need a new website.” Not just some basic one-pager either. I wanted the whole package: dark mode, filters, search, fancy GitHub cards, the works.
Here’s the thing though. I suck at web design and fronend development.
Getting the Foundation Right
Naturally, I did what any reasonable developer does these days. I asked an AI for help. ChatGPT pointed me toward Astro (which, honestly, solid recommendation), and since my domain was already sitting with Cloudflare, it suggested I just host the thing on Cloudflare Pages.
Ten minutes later, I had a basic website running on my actual domain. Not bad for a Friday night.
Creating the Design
I knew I wanted something that looked aesthetically pleasing, but my design skills are ahem… lets call them “developer aesthetic”. So I went to Claude Artifacts and basically said, “Hey, can you whip up a mockup for my personal blog?”
What came back was actually pretty impressive. Clean, professional, but still had some personality. Way better than anything I could have designed myself.
I fired up Claude Code in my terminal (because apparently I was about to build an entire website without ever opening VS Code, which seems weird but stick with me), grabbed some screenshots of those mockups, and fed them to Claude Code.
First attempt? Decent enough. It got the layout right but clicking things didn’t do much. Pretty, but not exactly functional.
Prompt Engineering It
Instead of just throwing screenshots at Claude Code and hoping for the best, I figured out this approach that worked way better. I’d go back to Claude Artifacts and say: “Pretend you’re writing detailed instructions for a UI engineer. This person is going to get both your description AND these screenshots. Write a comprehensive description.”
Then I’d take that description to Claude Code along with the screenshots.
The difference was significant. Claude Code would actually one-shot functional pages with filters, navigation, all the interactive bits working properly
Time and Cost
The entire website you’re currently reading this on took me:
14 hours of actual work and $80 in API credits.
That’s it. This whole thing. Responsive design, dark mode, filterable everything, search functionality, GitHub cards, proper tests, mobile optimization. All of it.
Without AI I’m looking at 2-3 weeks minimum. Probably more, because let’s be honest, I would have gotten stuck on the CSS and given up.
Vibe Coding is… hard.
I’ve been using all sorts of AI tools for backend projects for a while now, Claude Code, Cursor, Windsurf, you name it. But this project was fundamentally different. In backend work, even when AI writes a lot of the code, I’m still intimately familiar with the codebase as well as the architecture and can guide it effectively.
This was my first real vibe coding project. I treated most of the code as a black box. Tell Claude what I want, it builds it, I test it in the browser, screenshot anything broken, feed it back to Claude. Repeat until it works. It was honestly pretty liberating and a bit nerve-wracking.
It wasn’t all smooth sailing though. As the codebase got bigger, AI would just get really lost implementing even basic things. It’d try to fix a simple CSS issue by rewriting half the application.
I had to learn some tricks to work with Claude’s quirks. Sometimes the best solution was to literally blow up the context and start fresh from a known stable commit. Claude would suddenly remember how to do things properly again.
Another useful technique was forcing Claude to debug issues instead of immediately trying to fix them. I’d say “debug this issue first” instead of “fix this.” Claude would either add a bunch of debug statements that I could feed back from the console, or it would build a much better understanding of the problem before attempting a solution.
The weirdest thing about working with Claude was how it would completely forget what it had written. Makes sense technically, but feels deeply inhuman when you’re collaborating. I started asking Claude to document important architectural decisions and patterns in a README file. This helped it stay consistent and remember its own design choices across sessions.
I also realized the architecture was getting messy with a the UI elements like filters, tags, copy text hardcoded through out the code. Moving configuration into a central location and separating concerns make the components repeatable and the whole thing easier to maintain.
The Wildest Part (for me, at-least)
I never opened the IDE during this entire project. Not VS Code, nothing. Everything happened in the terminal through Claude Code.
My workflow was surprisingly simple:
- “Hey Claude, build me X”
- Claude builds X
- Open localhost, see what’s broken
- Screenshot the broken thing
- “Hey Claude, this is broken, fix it”
- Repeat until it works
Final Thoughts
Vibe coding is a remarkable evolution in programming. The speed is amazing, but the lack of code familiarity makes debugging painful when AI gets confused. It’s also mentally exhausting in a different way than traditional development. You’re constantly context-switching between high-level direction and low level feedback rather than reasoning about code.
I don’t think I would’ve ever moved on from my clunky old website built on wordpress to something like this, if it weren’t for AI. With it, my comfort zone has expanded by a mile. As a developer, I am able to deliver a lot more things 0 -> 1 with just basic programming frameworks.
