Vibe coding process - do we jump in or plan it out?
I'm super curious how everyone starts to vibe code? In the beginning I would simply jump into @bolt.new or @Cursor and just do a prompt and continue refining with the AI. I quickly realized this created a lot of issues as I didn't think about the structure, tech stack, and how I wanted the features to interact with each other and how the way I was building things would impact the user experience. I now do the following:
Write down a simple problem statement: "what am I trying to solve?"
Write down a simple solution statement: "what does the thing I'm building do (to solve the problem)"
Share the above with @ChatGPT by OpenAI and word vomit my thoughts, ideas, how I want the user to interact with my app, etc and ASK ChatGPT to turn everything I said and want into an easy to understand directive and instructions for an Engineer.
I then take the Engineer instructions and give it to a new chat in ChatGPT and ask it to turn those instructions into a prompt for an AI engineer and to break up the project into sections so that each time we focus on a section the app is shippable and keeps things easy to work on.
I take the output and paste it into my notes. I then give it to Cursor.
Once in Curosr, I create a new project folder and got at it!
Curious what everyone else does and if you've experience any things to avoid or must do
Replies
chatWise
I would definitely never jump into an AI development tool without having these 2 things cleared out:
What is the problem im trying to solve (clearly written down)
How I am solving this problem (clearly written down)
Jumping into vibe coding without these 2 things, you are probably rich. Cause it means you have a lot of time to waste iterating, fixing, debugging, cleaning etc. And especially when no one is watching. That's a luxury of the rich person. Only if we had infinite amount of time right?
I personally use v0.dev due to my tech knowledge being around JS/TS/NodeJS/NextJS.
I use this prompt to kick things off fast, ONCE i have the things i mentioned earlier clear.
" ๐๐ณ๐ฆ๐ข๐ต๐ฆ ๐ข ๐ท๐ฆ๐ณ๐บ ๐ค๐ญ๐ฆ๐ข๐ณ ๐ข๐ฏ๐ฅ ๐ง๐ถ๐ญ๐ญ๐บ ๐ณ๐ฆ๐ด๐ฑ๐ฐ๐ฏ๐ด๐ช๐ท๐ฆ ๐ข๐ค๐ณ๐ฐ๐ด๐ด ๐ข๐ญ๐ญ ๐ฅ๐ฆ๐ท๐ช๐ค๐ฆ๐ด ๐ข๐ฑ๐ฑ ๐ต๐ฉ๐ข๐ต ๐ฉ๐ข๐ด ๐ต๐ฉ๐ฆ ๐ง๐ฐ๐ญ๐ญ๐ฐ๐ธ๐ช๐ฏ๐จ ๐ง๐ถ๐ฏ๐ค๐ต๐ช๐ฐ๐ฏ๐ข๐ญ๐ช๐ต๐บ:
1. ๐๐ถ๐ต๐ฉ๐ฆ๐ฏ๐ต๐ช๐ค๐ข๐ต๐ช๐ฐ๐ฏ ๐ธ๐ช๐ต๐ฉ ๐๐ถ๐ฑ๐ข๐ฃ๐ข๐ด๐ฆ ๐ข๐ฏ๐ฅ ๐ข ๐ท๐ฆ๐ณ๐บ ๐ฎ๐ช๐ฏ๐ช๐ฎ๐ข๐ญ ๐๐ ๐ด๐ค๐ฉ๐ฆ๐ฎ๐ข ๐ต๐ฐ ๐ด๐ต๐ฐ๐ณ๐ฆ ๐ถ๐ด๐ฆ๐ณ ๐ช๐ฏ๐ง๐ฐ.
2. ๐ ๐ฎ๐ช๐ฏ๐ช๐ฎ๐ข๐ญ ๐ฃ๐ถ๐ต ๐ท๐ฆ๐ณ๐บ ๐ฃ๐ฆ๐ข๐ถ๐ต๐ช๐ง๐ถ๐ญ ๐๐ ๐ต๐ฉ๐ข๐ต ๐ช๐ด ๐ข๐ญ๐ช๐จ๐ฏ๐ฆ๐ฅ ๐ต๐ฐ ๐ต๐ฉ๐ฆ ๐ช๐ฎ๐ข๐จ๐ฆ ๐ ๐ข๐ฎ ๐ข๐ต๐ต๐ข๐ค๐ฉ๐ช๐ฏ๐จ (๐ฉ๐ฆ๐ณ๐ฆ ๐ช ๐ข๐ต๐ต๐ข๐ค๐ฉ ๐ข๐ฏ๐ฅ ๐ช๐ฎ๐ข๐จ๐ฆ ๐ธ๐ช๐ต๐ฉ ๐ฏ๐ข๐ฎ๐ฆ: ๐ช๐ฅ๐ฆ๐ข๐ญ๐ถ๐ช)
3. ๐๐ฉ๐ฆ ๐ข๐ฑ๐ฑ ๐ช๐ด ๐ข๐ฃ๐ฐ๐ถ๐ต___________________________ .
4. ๐๐ฉ๐ฆ ๐ค๐ฐ๐ฅ๐ฆ ๐ด๐ฉ๐ฐ๐ถ๐ญ๐ฅ ๐ฃ๐ฆ ๐ค๐ญ๐ฆ๐ข๐ฏ, ๐ธ๐ช๐ต๐ฉ ๐ข ๐ง๐ถ๐ฏ๐ค๐ต๐ช๐ฐ๐ฏ๐ข๐ญ ๐ฑ๐ณ๐ฐ๐จ๐ณ๐ข๐ฎ๐ฎ๐ช๐ฏ๐จ ๐ฑ๐ข๐ณ๐ข๐ฅ๐ช๐จ๐ฎ ๐ง๐ฐ๐ค๐ถ๐ด, ๐ข๐ฏ๐ฅ ๐ธ๐ช๐ต๐ฉ๐ฐ๐ถ๐ต ๐ถ๐ฏ๐ฏ๐ฆ๐ค๐ฆ๐ด๐ด๐ข๐ณ๐บ ๐ณ๐ฆ๐ณ๐ฆ๐ฏ๐ฅ๐ฆ๐ณ๐ด (๐ต๐ฉ๐ช๐ด ๐ช๐ด ๐ท๐ฆ๐ณ๐บ ๐๐ฆ๐ข๐ค๐ต/๐๐ฆ๐น๐ต๐๐ ๐ณ๐ฆ๐ญ๐ฆ๐ท๐ข๐ฏ๐ต) .
5. ๐๐ข๐ฌ๐ฆ ๐ด๐ถ๐ณ๐ฆ ๐ต๐ฉ๐ฆ ๐๐ ๐ฐ๐ง ๐ต๐ฉ๐ฆ ๐ข๐ฑ๐ฑ ๐ช๐ด ๐ท๐ฆ๐ณ๐บ ๐ค๐ญ๐ฆ๐ข๐ณ ๐ข๐ฏ๐ฅ ๐ต๐ฉ๐ฆ ๐ท๐ข๐ญ๐ถ๐ฆ ๐ฆ๐น๐ต๐ณ๐ข๐ค๐ต๐ฆ๐ฅ ๐ฃ๐บ ๐ต๐ฉ๐ฆ ๐ถ๐ด๐ฆ๐ณ ๐ช๐ด 100% ๐ฐ๐ฑ๐ต๐ช๐ฎ๐ช๐ป๐ฆ๐ฅ"
minimalist phone: creating folders
@cryptosymposium You described it well Tasos + I would add one point: Cybersecurity and data safety โ I have seen some people who didn't know how the code works properly and users' data "became somehow public". :D
Not a very good start. When people have these things in order, that's when I would start.
chatWise
@busmark_w_nika Definitely ! A classic case is when people (usually the non-techie) mess up the Database stuff when using AI dev tools. For example RLS is the main issue when someone is launching. If you launch without RLS, at least make sure that it is not emails or credit card info that are exposured.
minimalist phone: creating folders
@cryptosymposium or when someone can see passwords. ๐คก The bigger the company is, the bigger the faux pas.
NewOaks AI
Great points Gabe! I think curor and Bolt.new are targeting developer as audience for their daily works, especially for coding. However, business owners and UI/UX designers/PMs have different use cases. For business owners, the perfect use case is to use one prompt only to generate a working and functional website prototype instead of generating coding for a website then modify the codes. Those are totally different markets and target audience.
So far per my experience, Claude Sonnet 3.7 is much, much better than ChatGPT for code generation. So for SMBs or other non-coding background free lancers or solopreneurs, a tool can be used to generate an app with pure human language is much desired. And I think it is a bigger and incremental market than developers.
@ray_luan have you tried the latest Gemini version?
NewOaks AI
@taniabell Not yet, hope it will code better
@ray_luan it's on par and prob even better than 3.7
Like Notorious BIG (Biggie) said: I wrote a 10 step booklet for ya'll to read. https://eoncodes.substack.com/p/how-i-built-an-ai-wrapper-saas-in I can repost here on p/vibe if ya'll want? Let me know. TL;DR: I think neither dive in or plan it out. Start with something your extremely passionate about. Then adrenaline will take you from zero to one. Vibe code or no vibe code. Thats how it works for me at least. Time and space just vanish around you and before you know it, you have something working in no time. ๐ธ
Product Hunt
@sentry_co this was probably the best hook I've read lol, Immediately clicked the link. On your other note, I rely on adrenaline and "vibes" too much sometimes which is how I got to a bit more methodical to my approach!
I bounce of ideas with grok or chatGPT and come up with a plan. What features the MVP will have, etc. then start vibe coding. But I use @Replit to vibe code, not bolt or cursor.
Product Hunt
@jodylgonsalves What makes @replit work well for you?
@replit @andrew_g_stewart Hi Andrew, @Replit does it all. From creating the app from a natural language prompt to deploying in one or two clicks. I don't know about Bolt but I don't think cursor does deployment, I could be wrong.
I'm sure Bolt and Cursor are good, I just prefer replit.
Product Hunt
@jodylgonsalves curious why Replit!
@gabe Hey Gabe, I think replit is a one stop solution, from creating to deploying, it just does it.
Again as I mentioned in my other comment here, I'm sure Bolt and Cursor are good, Replit just works for me.
What's the problem?
What other solution(s) have been solved?
How is my solution different?
Bonus: WHO is my solution different and better for?
Always use an instructions.md or AI-Instructions file to dictate house style, give your AI assistant some ground rules, etc...
Product Hunt
@matt__mcdonagh ohhhh, that's actually a good one. "who will be using it" can inform a lot actually. I'm going to add that to my list!
Please don't jump in. Always plan it out.
Added benefits of planning out is that the end outcome will always be more polished and you will get to the end out come sooner rather than later.
Product Hunt
@ajinsunny I'm starting to notice this! Even something small like planning color palette and giving it to the agent has a big impact
First jump into Claude and ask it to generate a prompt for Cursor about the project.
Then jump into Cursor and ensure Agent mode is on and enter the prompt from Claude.
Measure twice, cut once as they say!
Thinking about what you're trying to do, writing it down, and then iterating on it is probably the best way to be productive, rather than using the hunt-and-peck method of coding.
Slow is fast, as they say.
What you're describing also sounds like the Reasoning step that LLMs now use to plan out their next steps โ so if it's good enough for LLMs, it should be a lesson to humans too!
Lastly, maybe give ChatPRD a try?
Product Hunt
@chrismessina very well said. I loled cause "hunt-and-peck" was definitely how I started. Maybe the LLMs influenced my process. Will def try ChatPRD! Have you used it?
@gabe Haven't had a use case yet, but it's @cvolawless's thing โ and it seems like it's gaining significant traction since I last hunted it: @ChatPRD!
usually when i vibe code i do it for work on my thesis project in python data analysis, i created an app that uses my scripts in a user friendly way, to do that i used cursor, integrating a defined and niche specific .cursorrules file and also recently i updated a new version of memory-bank-cursor repo that uses also task master for task generation and subsequent buiding. this system helps me having a very good workflow with memory of my project constantly saved in order to make the AI more context aware and make it easier for it to generate working code having accurate step b step instructions. of course this method wont create you the final app of your dreams, but for sure you will have a solid starting point or even an MVP depending on your goals and difficulty of the concept
Hope i helped you!
Hey, super agree with your points, as a backend engineer (in the past, now I'm an engineering manager), I believe every vibe coder has to understand data flow and storage at the conceptual level. You can always rewrite frontend logic or tweak the UI, but once your customers start using the product and you realise a week later that the data model isnโt right, migrating it becomes a real headache, and no AI tool can save you from that ๐.
It might sound simple, but you must understand how your project works and be able to explain the data flow to someone else.
Curious to hear your opinion, I might be biased by my backend experience
I completely agree with your approach to structure before coding. The most critical step that's often overlooked in vibe coding is defining a solid architecture before writing your first prompt.
What I've found essential is maintaining strict control over this architecture - don't let Cursor or any AI make architectural decisions on the fly. When the AI suggests structural changes, take significant time to evaluate them before implementation. The fundamental challenge with vibe coding is that its default objective is "make it work at any cost" rather than "build something scalable, maintainable, and modular."
This distinction became crystal clear when I built my document retrieval system. I've spent over a year developing an internal API that offers a fundamentally different approach to document retrieval - moving beyond traditional vector or full-text search to an AI-first methodology. While I never initially planned to release it publicly, I recently decided to test vibe coding by building an admin UI for this API.
The results were honestly astonishing - in just one week I was able to complete the entire frontend system for https://spyk.io. However, it's important to note that the AI didn't write any backend code (except adding documentation comments). The core functionality required careful human architecture and implementation.
The key takeaway: stay ahead of the AI, understand every piece of your codebase, and maintain control over why things are built a certain way. When you establish these guardrails, the speed at which you can ship becomes truly remarkable.