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 Cursor, 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
UXDesigner.top
Hey Gabe, I really resonated with this, especially the part about jumping into tools like Cursor or Bolt and figuring things out as you go. I was doing exactly the same, and I often ended up rewriting entire flows or realizing too late that my feature ideas didnโt quite connect.
Thatโs actually what led me to build a little side project: lovableprompts.app. Itโs super simple, just helps you generate a first optimized prompt to kick off your project in Lovable, Cursor, or wherever youโre working. You describe your idea in plain text, and it gives you back a structured prompt that includes the problem, the user flow, the ideal UX, and even some suggestions for how to break it down into features or milestones.
I originally made it just for myself, but I started sharing it with friends who were also vibe coding and itโs been surprisingly helpful to others too. It doesnโt try to do too muchโit just gives you a really solid starting point so you donโt have to stare at a blank input field.
Would love for you to try it and let me know what you thinkโany feedback is super welcome!
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.
@cryptosymposiumย That โluxury of timeโ line hit way too close, just a few days into a 30-day build (zero coding experience, AI all the way), and Iโve already seen how crucial it is to lock in the problem + solution upfront. Thanks for the prompt, definitely keeping that in my toolkit.
Back in my coding days, we used to get a Software Requirements Specification (SRS) document from a software analyst. That doc had everything we were supposed to code, from the user-facing stuff to the hardcore implementation details.
In vibe-coding, we're essentially the software analysts, and the AI is the developer. Why not send SRS-prompts?
Functional requirements (what the software should do)
Non-functional requirements (performance, security, database, etc.)
Use cases or user stories
Constraints and assumptions
Glossary of terms
Business logic
User flows and interactions
@captain_vistaย THIS
Product Hunt
@captain_vistaย first time I'm hearing of SRS but it makes SOOO much sense. Might try this with the User Journeys to see if I get better immediate output.
@captain_vistaย This indeed, I agree! I like to keep these documents in markdown files, checked into the repository, not just including it in prompts. Cursor allows to reference these documents easily to get them into the context for any prompt. Additionally it can also help to create the documents in the first place or refine them, this approach works very well for me, not just to make the Agent work better, but also to my own benefit on understanding better where I'm heading with a project.
This systematic approach is exactly what we teach in Enlighter!
As nervous first-time launchers, seeing you break down gives us much hope that we're actually solving a problem real people have.
@gabe, what's one thing you'd tell us to improve before our launch?
Coming soon page: https://www.producthunt.com/products/enlighter
Thanks for the gold! ๐
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
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!
DiffSense
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!
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
Jo
As a PM, I've found that mimic-ing how IRL product teams build products is what seems to strangely also work best for vibe coding. After much iteration I've landed on:
A 'PM agent' that kicks off things by asking me 3 things - what's the problem i'm looking to solve, who's the user i want to solve for, and what are the initial features I'd like to start from.
Agent's output is a PRD, and a set of User Stories with acceptance criteria.
Use these User Stories as input, and ask to start coding from a small subset of these for the initial version.
Finesse by talking with LLM until I get this right.
Iteration: Inputs are entire set of User Stories again + code + instructions on which story to build next.
I must add I build prototypes primarily, so don't care at all about backend/ security etc as goal is to validate concepts with users fast. Throwaway code is perfect for prototyping.
Product Hunt
@ragsontherocksย I really like the idea of using a PRD with user stories. That's really clever. Have you tested building the same tool or app with and without user stories to see how much that impacts the output?
I have a feeling User Stories actually play a big part and getting close to the PM's vision.
Jo
@gabeย Yeah, does play a huge part in my experience, especially for iterative development. One example: I was trying to build a pet health tracker for my pets and wanted it to be multi-page and support pet profiles, vaccine records, pet visits, insurance info etc. I can start with a comprehensive prompt and v0/lovable will give me a nice scaffold with placeholders and some base functionality. But I've found that degrades quickly as I start to build on top of it and fill in functionality, and I inevitably hit points where existing functionality is re-done/dropped etc as complexity increases.
User stories seem to help guide what to build next in logical chunks that are self-contained and if written well also indicate end-state desired not just features required. Sonnet has been pretty great at following these.
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ย Correct, cursor doesn't do deployments. I am going to have to try @replit sometime!
Product Hunt
@jodylgonsalvesย @replitย @andrew_g_stewartย yeah, Cursor you have to deploy it yourself...I actually prefer this as I have a very nice method that I use using @Cloudflare Pages and @GitHub but....I should try Replit. I'm curious how the experience will compare.
@jodylgonsalves are you able to import code into Replit and continue?
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.