My Guide to Vibe Coding: How I Build Apps Without Knowing How to Code
How? Thanks to AI and a method I call "Vibe Coding." Vibe coding is simple: instead of you coding, the AI codes for you. You provide the "vibes"—the ideas, the vision, and the instructions—and the AI handles the heavy lifting. Here is my personal blueprint for how to get started.
1. Pick Your AI Partner
It honestly doesn't matter which AI you use as long as it's a top-tier model. I personally prefer Google Gemini; I've made all my apps using it.
While regular chatbots like ChatGPT work great, I recommend trying out dedicated coding agents or environments for more complex projects:
-
Google Antigravity: A program specifically built for programming with AI built-in.
-
Google AI Studio: A powerful playground to build your ideas using Gemini models.
2. Plan First, Code Later
The biggest mistake you can make is just telling an AI to "build me a Photoshop clone." It will fail. Instead, follow these steps:
-
Ask for Research: Tell the AI your idea and ask it to research the best tools, languages, and frameworks. Let the AI do the work of deciding between things like Rust, TypeScript, or React.
-
Create a Task List: Ask the AI to create a step-by-step implementation plan before it writes a single line of code.
-
The "History" File: Create a
history.mdfile in your project. This acts as a "memory" for the AI. If you switch to a different AI later, you can feed it this file so it understands the project's context immediately. Download my History Template MD file HERE
3. Design the UI First
For complex apps, you should always design the interface first. Since I don't know how to use Figma, I just ask the AI to build a "dummy UI" in HTML.
Pro Tip: Once you're happy with the HTML UI, take a screenshot and feed it to your coding agent. Tell the AI: "This is the UI for our program. Now, make every tool and button you see here actually work." This gives the AI a clear visual map to follow.
4. The Testing & Debugging Loop
AI isn't magic. It can code, but it can't always finish the app perfectly. This is where you come in:
-
Test one-by-one: Check every tool. Does the eraser work? Does the color selector open?
-
The Feedback Loop: If something is broken, tell the AI exactly what’s wrong. If there is no color selector, tell it: "There is no color selector, please implement that."
-
Refine: Keep going back and forth until the app matches your vision.
See My Projects
If you want to see what's possible with vibe coding, check out my open-source projects on GitHub. Feel free to explore the code and see how they were put together!
-
SCRCPY GUI – A graphical interface for the SCRCPy screen mirroring tool.
-
Kilobit System Monitor – A taskbar app that tracks download speeds, temperatures, and hardware usage.
Final Thoughts
Vibe coding turns you from a "coder" into a "director." As long as you have a vision and the patience to test and debug, you can build tools that make your life easier.
I’ve also made a video on this topic — you can watch it below.
Check out my other posts, I post useful tutorials and tech tips, maybe you will find something useful 😉.