What I learned building my first website in a decade with vibe engineering
AI may write all the code, but you still need software engineering skills to solve problems and make real progress.
Despite having a Computer Science degree and years of hobby web development under my belt, I haven’t built any software in over 10 years.
That was until last week, when I decided to give ‘vibe engineering’ a go and create a dashboard to track my writing stats.
The platform I use for this newsletter (Ghost) has decent analytics, but they’re focused on lagging indicators like subscribers and page views which I have limited influence over. Instead, I wanted a way to track my inputs (how much I write and how consistently) as these are leading indicators I control.
Vibe coding vs vibe engineering
I suppose I could have vibe coded this by putting in a single prompt and tweaking the output, but I wanted to try a more structured and intentional approach.
Vibe coding is great for quick, throwaway prototypes, but the end result can be brittle and difficult to build on.
Vibe engineering is a slightly different approach where you treat AI as a collaborator, not a magician. You might get the LLM to write all the code for you (as I did) but you’re following more standard software engineering practices at the same time. The aim is to build something robust and extendable, rather than something that just works once.
Another benefit of taking a slower and more deliberate approach is that you’re more likely to learn something from the experience.
The tools and setup
Here’s what I used and why:
- ChatGPT Codex: A coding agent from OpenAI that you can use on the web, in the terminal or in a code editor. I chose this rather than Claude Code since it’s already included in my ChatGPT Plus plan.
- VS Code: This is the most popular editor in the world and several AI-focused editors like Cursor are actually based on it. I wanted to be able to see the code and work with Codex inside the app.
- ChatGPT Mac app: This has a couple of features which are super useful for coding:
- You can give it access to apps on your desktop so it can read and write content directly.
- It can take quickly take and share screenshots of apps, which you’ll be doing a lot of in something like this!
- GitHub: To store my code and handle version control.
- The Terminal app: I guess this is the part that scares a lot of non-technical people off. Using the command line can be a bit intimidating but ChatGPT can hold your hand and tell you what to do.
Making lots of progress... until you don’t
Jon Hickman at Ghost gave me a head start on understanding the API that the platform uses. I then gave this, plus an explanation of what I wanted to do, to ChatGPT.
I did a lot of planning with ChatGPT, going back and forth to understand the technology and tools I would need, how it would work and so on. To summarise this, I got it to create a project brief based on our discussion and output this as Markdown, so I could give it to Codex as context later.
ChatGPT helped me set up my development environment, instructing me how to install and configure all the tools I needed (git, Codex, etc.)
I then got it to produce the stats I wanted without any UI so we could check that it worked. This worked pretty much the first time, which felt like magic. Then the pain began!
I wanted to use shadcn components for the UI, but every time I tried it ended up with rendering issues and broken layouts. I spent hours and hours failing to get it to debug the issue, rolling back the code and trying again.
In the end, I started from scratch, building the UI first with no backend logic. Once I was happy with the front-end, I got it to build the code that queried the API and did the calculations separately. Only then did I get Codex to wire the two together.
Even though Codex wrote all the code, the experience was similar to writing code by hand: you make really good progress and then you hit an obstacle that takes hours (or more) to overcome, then it’s back to making progress again.
What I learned from doing this
1. You still need (to develop) a technical mindset
AI means that you don’t need to be able to write code to create software, but what you still need software engineering skills:
- Researching and planning
- Building incrementally
- Problem solving
Software is complex and fragile. It only takes one small thing for the whole system to stop working. You need to be able to work in a way that minimises problems and when they do show up, be able to work through them.
AI can do a lot but but it can run into dead ends. When it does, you need to help it get back on track.
2. Collaborate with AI, don’t delegate everything to it
I wrote about this in a previous newsletter, but it’s much more effective to treat AI as a partner rather than a tool.
In this project, I was constantly asking it to explain what it was doing and why, how things work, what alternative options are available and so on. I wanted it to feel like having a senior engineer next to me, coaching me, rather than someone to outsource the writing of code to.
This way you can learn faster, understand the ‘why’ and feel more confident in building on top of something later.
3. Learning through friction builds empathy and capability
If I had just fired off a prompt, vibe coding style, I wouldn’t have learned anything about how to build anything.
Coming up against a problem and spending hours going around in circles was annoying, but now I’ve learned how to approach my next project differently. You learn by doing and pure vibe coding doesn’t really involve much ‘doing’.
You also get a bit of empathy for developers. Even building a tiny one-page app like this has taught me more about modern web development than anything else would.
Yes, you can do this too
We’re at the start of a new era in which anyone can create software. But if you want to go beyond simple vibe coded prototypes (and cool demos) you need to get your hands dirty.
That means using the terminal, learning to use GitHub and so on. It can seem a bit scary at first if you’ve never done any coding, but there’s an opportunity to learn so much.
Even as AI coding tools get better, the value of software engineering principles and best practices are still going to hold true. Experiencing those first-hand through a few tiny side projects like this is going to be so worthwhile.
Don’t just wait until AI can do everything to a perfect production-ready level. Have a go now and remember that your favourite LLM can hold your hand through the whole process, one step at a time.
