Vibe Coding: How I Built My Friend’s Portfolio
It’s been an exhausting week and I used roughly 4 hours to go from idea to execution of my friends’ portfolio (kofidako.com) — He’s a designer, a photographer and a minimalist.
Just like the past few months the AI hype trains continues and it doesn’t seem to die out. There’s always some new implementation or technology that reinforces (and sometimes shatters) some of these thoughts:
- It’s so over for software engineers! 👨🏾💻
- AI is going to replace developers 😐
- Anyone can code now 😕
Interestingly, Edem Kumodzi published an article this week that made me rethink all our assumptions and predictions of the future concerning AI. I love his perspective using history simply because that’s when patterns truly emerge and drowns fear and noise.
AI And Software Engineering: https://edemkumodzi.com/posts/ai-and-software-engineering-this-time-its-different-it-never-is/
The article talks about how different technologies have come up over the past seven decades and each time we heard “This is going to replace programmers” but it didn’t. It has an opposite effect: More programming jobs were created because “busy work” was eliminated and the boundaries of what we could do was only extended further — We were empowered to solve even more complex problems.
What does all this have to do with the portfolio I just built for Kofi? This isn’t my first rodeo. I had a stressful week and I wanted to wind down so I did what every software engineer does: Close your work laptop and open your personal laptop to write more code; however this time I decided to let AI do all the heavy lifting while I guide it.
I’m going to show you how I did that.
Spoiler alert — It’s not one prompt that says “Build a sleek portfolio website for an architect and a photographer having four pages: Stories, Architecture, Archive and About” or whatever variation you‘re thinking of. I’ve had one-too-many non-technical friends asking me to help debug what Lovable built for them ;)
You can explore the portfolio here: kofidako.com
Vibe Coding Process
Over at Slightly Techie, we’ve had a lot of conversations around coding with AI and fitting coding agents into our workflow to be a supercharged developer. My current process is a direct derivative of those conversations. (S/O to Abdul!). I’ve also started exploring the BMAD method.
This is the process I used to refine the concept and create technical specifications for the project. I then broke them down into prompts that can be given to any coding agent. I used Claude Code for this entire process.
The goal is to account for edge cases from the very beginning — clearly defining them and outlining how you’ll handle each one. This approach sharpens your research, helps you better define the core problem, and reduces guesswork later in the process.
(Vibe) Coding Process
NB: Each step here is a custom claude command that I invoke with /, however you can simply start your interaction with a coding agent with it as your first message.
Each step feeds into the next. At the end, you’d have a list of prompts in prompt_plan.md that you can invoke using /work. That finds the last completed task and moves on to execute the next. It’s important to note that for each prompt, I had to actively review and check what’s going on with my code editor open. I also had to fix bugs myself because that’s faster sometimes than describing what’s happening to the coding agent to fix it.
The stack for this project was NextJS and Sanity.io. I also used TailwindCSS and HeroUI for styling — I chose this because I’m used to these technologies and it would’ve been easier to correct any mistake done by the agent.
Lets go through the vibe-coding lifecycle and the prompt used at each step:
Ideation
Let’s clarify and expand on the idea before we start designing. Ask high-level questions to understand goals, users, context, constraints, and success metrics. Ask the questions one by one, using the answer from the previous questions to guide your next question so we properly ideate and tackle goals, users, context, contrains and success metrics. Help me shape the problem statement and define clear deliverables before moving into design. Once we have alignment, summarize the problem as `problem_statement.md`. This is the idea: $ARGUMENTS
The coding agent begins to ask questions and I steer it in the direction I want. Based on the conversation I remove or add to the original idea.
Design
Ask me one question at a time so we can develop a thorough, step-by-step spec for this idea. The problem has been clearly defined in `problem_statement.md` and you should analyse it. Ask additional questions and improve on this (update `problem_statement.md` if necessary). Each question should build on my previous answers, and our end goal is to have a detailed specification I can hand off to a developer. Let’s do this iteratively and dig into every relevant detail. Remember, only one question at a time. I do not want more than 15 questions. Use reasonable defaults if you need more context and present them for approval or edits. Once we are done, save the spec as `spec.md`
Architecture
Based on the spec defined in `spec.md`, propose an architecture that balances scalability, maintainability, and cost. Include: - System components and their responsibilities - Technology stack - Data flow and APIs - Programming languages - Libraries / Tools to levarage to reduce developer time - Key design patterns or trade-offs - Security considerations Summarize as `architecture.md` for implementation reference. In addition to what is above, these are choices and preferences that take precedence (if any is specified, otherwise ignore if blank): $ARGUMENTS
Generate Prompts
Using spec.md and architecture.md (and analysis.md if available), your goal is to generate prompts I can feed to an LLM to progressive help me build. Note the following: ## Step 1: Draft the Blueprint - Create a detailed, step-by-step blueprint for the entire project. - Ensure it covers architecture, implementation strategy, and integration points. ## Step 2: Break Into Chunks - Divide the blueprint into iterative chunks of work. - Each chunk should build on the previous one, forming a logical progression. ## Step 3: Refine Into Steps - For each chunk, break it down again into smaller, actionable steps. - Review carefully: - Steps should be small enough to implement safely. - Steps should be large enough to meaningfully advance the project. - Iterate until the steps are the right size. ## Step 4: Generate Prompts for an LLM - Use the refined steps to create a sequence of prompts for a code-generation LLM. - Follow these principles: 1. Prioritize best practices and incremental progress. 2. Avoid large jumps in complexity. 3. Each prompt must build on the previous one. 4. Ensure no hanging or orphaned code — everything integrates. ## Step 5: Structure the Prompts - Use Markdown formatting. - Separate each prompt into its own section. - Mark prompts as code blocks with text tags for clarity. - Provide any necessary context and rationale alongside the prompts. - Each prompt should have a checkmark or cross showing whether it’s been completed or not Output as file `prompt_plan.md`
Work
Review complete and incomplete tasks or prompts in prompt_plan.md and start from the first incomplete prompt / task in the sequence. Note the following - Focus on clean code - Comment where necessary when using tricks / code shorthand - Do not over-modularize - Do not overwhelm me with too much explanations - Always ask if everything makes sense to me and request reviews before going on to the next prompt - After working on each prompt, mark it as complete
View for a single project (truncated)
So… this feels more like “guide coding” than “vibe coding”.
This is a very small project. However you quickly see the potential when it comes to medium to large projects. You essentially have a research engineer, a developer, a product owner and a market-fit expert to help you undertake the project. You can implement faster but you can’t replace the human element needed in building software for people — You’ve seen the memes. You don’t just “Build an AWS competitor”, there’s so much more to building software than coding.
Photo by Andrea De Santis on Unsplash
Thanks for reading! I’m always trying to improve my processes and explore new ways of doing things! If you’ve got an idea or a suggestion, feel free to comment.