From Idea to Plan: Kickstarting Your Vibe Coding Project

Welcome back, fellow non-programmers and curious minds! I hope that you find the first article in this series fun to read. Ready to dive deeper into the world of vibe coding? In this second article of the series, we're going to chat about how I kicked off my personal website project using AI assistance. Buckle up, because we're about to turn some traditional project management ideas on their head!

Now, if you've been in the tech world as long as I have (12 years and counting!), you know there's a "proper" way to run a project. But here's a little secret: sometimes, breaking the rules can lead to amazing results. That's exactly what I did with my vibe coding adventure.

Instead of following the typical project management playbook, I decided to take a more fluid approach. Why? Because my goal wasn't just to build a website – it was a POC (proof of concept), to quickly test if vibe coding could really create something stable and useful. So, I threw caution to the wind and skipped some of the usual steps. Risky? Maybe. Exciting? Absolutely!

Here's how I got the ball rolling:

1. Defining the Goal
   First of all, I needed to nail down what I wanted to achieve. For me, it was creating a personal website that showcased my skills and experiences. But I didn't just brainstorm on my own – I brought in some AI muscle right from the start.

I fired up Claude-3-Haiku (the more budget-friendly option) and hit it with this prompt:

"I want to build a personal website from scratch, and host it on GCP. I already got a domain from Godaddy. Before start coding, I want your help to document a tech spec for the website, which can later be given to a Claude bot to generate the actual code. So please ask me the necessary questions to get all the information you need in order to document the tech spec."

Pro tip: When working with AI, be clear about your end goal. I told Claude upfront that I wanted a tech spec that another AI could use to generate code.

2. The AI-Assisted Q&A Session
   Claude came back with six main question areas, each with three bullet points, in one go. Topics included:

• Purpose and Content
• Design and Branding
• Technical Requirements
• Hosting and Domain
• Security and Maintenance
• Future Scalability and Expansion

Instead of tackling all these at once, I asked Claude to go through them one by one. Why? This is actually a handy trick to get better responses from the AI because each answer can influence the next question. It's like having a conversation with a really smart friend who adapts their advice based on what you tell them.

3. From Questions to High-Level Plan
   After our Q&A session, Claude surprised me by offering a high-level plan instead of a tech spec. At first, I was a bit miffed – that's not what I asked for! But then I realized: this is the beauty of working with AI. Sometimes it gives you what you need, not just what you ask for.
4. Diving Deeper
   Not content with just a high-level view, I pushed Claude to go deeper. We went through a few iterations:

• First, it gave me an implementation plan (still not quite a tech spec).
• Then, after some prodding, it provided a summary of business requirements.
• Finally, it produced something closer to a tech spec, including details on site structure and navigation.

Was it perfect? Nope. But it was a starting point, and in the world of vibe coding, that's gold.

5. Switching Gears (and AI Models)
   At this point, I realized I needed to level up my AI game. Enter Claude-3.7-Sonnet, the more sophisticated (and pricier) model. I presented it with my cleaned-up pseudo "tech spec" and asked for a review.

This is where things got really interesting. Sonnet didn't just nod and agree – it started poking holes in my document, asking about technology stack conflicts, multilingual support, and the nitty-gritty of my project showcase. It even delved into animations, SEO requirements, and performance expectations.

The takeaway? Don't be afraid to switch tools mid-project if you need to. Sometimes, you need a different perspective to move forward.

By the end of this planning phase, I had a solid foundation for my vibe coding project. Was it conventional? Not by a long shot. But it was tailored to my needs and infused with AI insights at every step.

Remember, the key to successful vibe coding isn't following a strict rulebook – it's about being flexible, leveraging AI assistance, and not being afraid to iterate. In our next article, we'll dive into how I turned this plan into actual code (spoiler: there's more AI involved!).

So, are you feeling inspired to start your own vibe coding project? Remember, you don't need to be a coding whiz to bring your ideas to life. With a bit of creativity, some AI assistance, and the willingness to learn, you can create something amazing.

Want to stay in the loop and get more insider tips on turning your tech dreams into reality? Don't forget to subscribe to my newsletter. I'll be sharing more ideas, tricks, and lessons learned from my vibe coding adventures. Trust me, you won't want to miss it!

Read the next article of this series: The Magic Moment: Generating Code with AI