How I vibecode to build more sideprojects faster
Aron Schüler Published
I was on vacation recently. Two weeks of just sun, beach, and ping pong. I didn’t even bring my laptop. But playing a lot of ping pong, we needed a scoreboard. So I thought, why not build a quick web app for it?
Using lovable for the prototype and Cluade Code for adaptions, I built a fully functional web app in just a few hours. All from my phone. You can check it out over at TTTracker :D
I gave a talk about this at CologneJS, about how the last months using LLMs and AI changed my approach to web development, what my expecations are and what I learnt. This post will summarize this a bit.
But first: What is Vibecoding?
I would summarize Vibecoding as the art of building products rapidly using Large Language Models (LLMs). We generate the majority of your codebase. Others would say its solely vibe-based spitting out code and never looking at it again. But that break very very fast and will be super frustrating sooner or later - so I would define it differently. Think of it as architectural delegation: you maintain ownership of the system design and user experience (or not even this, if you want to), while AI handles the heavy lifting of code generation.
The key principle is something like: “Does this change pass the vibe check?” You don’t need to control every line of code, but you’re definitely controlling the direction, quality, and architectural decisions.
My Vibecoding Toolkit
To start vibecoding effectively, you need few things. Basically, only:
- An AI agent with codebase access I use Claude Code. I used Cursor before.
- A clear project or idea or at least a feature you want to try
- A broad expectation for output to check generated results against
- Time for experimentation and iteration
The beauty lies in the simplicity – you can literally SSH into a server from your phone and use Claude Code to build a whole app while lounging in France on vacation. See How to vibecode on your iPhone for more on this.
But it needs some considerations that I’ll talk about next.
What is important when vibecoding?
1. Maintain Your Mental Model
The most critical skill in vibecoding is understanding your codebase and thereby knowing when to accept or reject AI-generated changes. Base these decisions on:
- Architecture alignment - Does this fit your system design?
- Bug source intuition - Could this introduce issues elsewhere?
- Gut feeling - Sometimes experience trumps algorithmic suggestions
2. Vague vs Specific Prompting
Vague prompts make the AI decide everything. Specific prompts give you control. Compare these approaches:
Vague:
Create a User Deletion function that must be confirmed in a modal.
Specific:
Create a repository like `@src/repositories/document.ts`
that handles user CRUD operations and create a modal using
`@src/base/BaseModal.tsx` to confirm the deletion operation.
The specific version references existing patterns, ensuring consistency with your codebase architecture. But the vague prompt leaves freedom for design, possible new libraries and so on. Think about what you need here.
3. Use Layered Prompting for Complex Features
Instead of one massive prompt, break complex tasks into layers:
- “Investigate our repository pattern for database access. Summarize it.”
- “How could a user repository look like in a YAGNI way? Do not change code.”
- “Write the proposed implementation into USER_REPOSITORY.md”
- “Implement the task @USER_REPOSITORY.md”
This approach ensures the AI understands your context before making changes.
4. Embrace Re-evaluation
When tackling complex implementations, let the AI ask questions:
“I want to build an edit modal for existing production records. Ask 10 questions about the implementation and its integration.”
This prevents assumptions and surfaces edge cases you might miss.
What Vibecoding Is Good At
The approach shines when you need to:
- Add complex features fast, in a more or less broken way
- Implement all your PR feedback in minutes instead of hours using MCPs
- Refactor large components into smaller, more manageable pieces
- Resolve dozens of TypeScript errors while you grab coffee - but you have to double-check if it didn’t just reconfigure your TypeScript setup ;-)
- Make UI improvements quickly based on user feedback or inspiration from other sites (it can understand images, too!)
Common Pitfalls and How to Avoid Them
The Confidence Trap
Always assume your assumptions might be wrong. The biggest mistake is being too confident that your initial approach is correct. Ask if you are unsure, you have an assistant at hand. Also stay open to the AI suggesting better patterns or catching edge cases.
The Debug Loop
Sometimes you’ll hit weird output that creates debugging loops. When this happens:
- Step back and re-examine your prompt
- Check if you’re providing enough context
- Restore changes
- Consider breaking the task into smaller pieces
Library Integration Issues
AI sometimes struggles with specific library implementations. Mitigate this by:
- Linking to relevant documentation in your prompts
- Providing examples of existing library usage in your codebase
- Starting with simpler implementations and building complexity
- Providing an interface you want it to develop against by hand (yes I know, typing is hard)
Keeping Your Codebase Vibecode-Ready
Maintain Living Documentation
Keep your README files and architectural documentation up to date. These become crucial context for AI agents understanding your system. When something is out of date, my go to is to remove the whole section and let AI add it again. Be sure to double check this!
Refactor Into Logical Chunks
Structure your code in clear, logical components. Well-organized code makes it easier for AI to understand patterns and maintain consistency. Huge components means your context gets eaten up very quickly, leaving no room for custom rules or your input. The bigger the context (everything the model keeps in mind) gets, the worse the answers.
Establish Clear Patterns
Create consistent patterns in your codebase that AI can follow and replicate across different features. Describe these patterns in your Living Documentation.
Why should I vibecode?
Of course, vibecoding is fast and its nice to sit back and create whole projects in minutes. But vibecoding isn’t just about speed – it’s also about leverage! You can:
- Build and maintain personal projects without the usual time constraints
- Create niche side projects that might even generate income
- Work on multiple ideas simultaneously
- Automate implementations of user feedback
A lot of people dread that this is the end of programming. Everyone that has ever tried to vibecode in a larger or older codebase knows that this is not the case (yet). Instead, its just a faster way of starting features, prototypes, ideas etc. It is a nice template, and it even talks back when you have ideas to throw at it.
Looking Forward
I’ve worked a fair share with AI tools in the last few months and it made me realize that what’s changed isn’t actually that much. We still need to focus on the same points as we usually did when building products:
- Product vision and user understanding
- System architecture and design decisions
- Quality assurance and testing
- User experience refinement
The development speed is just less of a bottleneck now. But I am missing a few things still. The critical feedback to ideas and prompts is not what I want it to be. I find it hard to get LLMs to disagree with me occasionally - if we set rules that it should disagree, it will agree with the rule and always challenge everything. If you have a solution for this, let me know below!
Your Next Steps
If you want to dive into vibecoding, go for it! Begin with a small, well-defined feature in an existing project. This will give you both upsides and downsides, so you know its limitations. Focus on writing specific prompts and maintaining your mental model of your architecture.
Share what you found out before and your tips and tricks, I’m happy to learn more!