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
"Stupid apps" are the future and vibing coding will bring the rise of *vibeware* - and its okay.
OP-ED? Recently I've been finding myself actually buying and downloading apps more than before. The common thread? They're all silly things that almost do nothing. I say almost because what they do offer is a bit of joy during my work day. Some of the recent apps I've purchased or downloaded are @Klack, Googly Eyes, @Docko, @Ball,@TabTab, and @NotchNook. Some of these do have productivity or quality of life improvements (looking at the last two) but others are simply about making the computer fun again. For example @Klack has genuinely made me more focused when I type and I've been able to zone in on work. It's like each clickity-clack is driving me closer to where I want to go and idk, the feedback just feels GOOD. The audio is also really nice, not sure how I can explain it, but feels very high-def for something that is mimicking a tactical feeling. All these apps remind me of a time where shareware and P2P ( @Limewire ) was more popular. Where you might be okay buying a CD or floppy and installing something fun on your computer, then telling (sharing) your buddy about it. And with the rise of vibe coding, I think we're going to see vibeware become a thing. Where users will create something fun, quickly, using AI tools like @Cursor, @Replit, or @bolt.new/@Lovable and then put it at a super low cost or have a free-trial (shareware). Those that don't want to pay, will create their own iteration of it and choose their own distribution method (P2P) but it won't eat at the original. It's my genuine feeling that the internet is about to become fun again (it's already started) and I'm curious if I'm the only one feeling this way and/or embracing it? What do you think? Is the era of vibeware a good thing? And if not why should we refute it? This piece was written with FKJ - Just Piano in the background.
Startup Founder 2.0
Hey everyone. My name is Talha Masood and I am a second time founder. Previously I built Remotebase[dot]com and raised $2.7 million for my startup.
I am now building an AI editor to help interviewers assess vibe coding skills in software engineers. I myself vibe code every single day, even though I have more than 10 years of experience writing code. I believe that software teams can now move 10x faster if they're using the right AI workflows and tools. Here are a few facts about me:
I have launched close to 10 times on Product Hunt
I organize a lot of IRL events in San Francisco. My latest event is happening on April 24th. Here's the link to it if you're interested - https://lu.ma/5s9vc24j
I can write code 10x faster than an average software engineer by using the right Vibe Coding tools. Please challenge me. P.S. I came up with the number 10x out of thin air lol. But I do a lot of Vibe Coding
I am also looking for a technical co-founder right now.
Excited to meet you all. Happy to help anyway I can.
Replit drove me mad!
I started using Replit about 3 weeks ago. First on a trial basis and then decided to pay the quite ok monthly fee of $25. What I didn't realize back then was that once they got my credit card info they just keep charging for use even if cancel my sub.
The thing is that Replit charges 'checkpoints' a 25 cents each no matter what it does. Implementing Google Auth with 2FA or failing over and over again to format an output i Typescript, same result. The checkpoints just runs away. When the AI fails to solve a very basic variable naming problem for the Xth time you tend to get a bit frustrated - to say the least. Tell the AI to mind the difference between CamelCase and snake_case and it remembers it for less than 5 minutes. Putting it in writing in the manifest Instructions.md makes no difference.
After about a week I decided to make a first deployment. The AI ran all sorts of test and then deployed. Successfully in its own words. Except not a single endpoint worked in deployment. Not even logging in to the Express backend as admin. So I asked the AI if it thought it was ok that code that worked in the Replit dev env did not work in their own deployment env (based on Google Cloud). It wasn't. So I sent a mail to support. Which yielded absolutely nothing but a boilerplats BS answer. You see, the support too is an AI. How clever is that!
Well I toiled on and after about two weeks and some $250 worth of checkpoints I had a working web for matching local contractors with local property owners. A hyper local matching service. Then when I'm running the last tests before my third deployment I suddenly notice that the admin password is changed back to a very unsafe password I used the first days of developing. Looking through the pages of my app (not too many in total) I realised that the AI had reverted back to several days old code. When I asked to have the code from last night back the AI happily restored a 2 weeks old backup taking me even further back. It then told me that it had not changed anything in the code, that someone else must have changed the code and that there were no newer code available. This is when I gave upp and told the AI to go F*CK itself.
#vibecoding: What are your favorite Cursor pro-tips?
Recently stumbled across this Cursor pro-tip from Ian Nuttall on X: "1. ask it to recommend a folder structure
2. ask it to actually create the folder/files based on that this makes it 10x easier for me to get started and Cursor is more accurate using codebase cos it knows where to update files."
That got me thinking, what other pro tips are people using to generate better code, ship faster, organise your space better, etc. Drop em below:
Everything I Learned Building My Landing Page and Web Application on Bolt.new
Hey p/bolt-new community,
I recently started building Couples Hub (https://coupleshub.io/) a React-based application and Next.js based landing page using Bolt.new. Couples Hub is a product of my hobby brand "MD Meets Techie" which I've run for the past four years, creating digital products specifically for couples. Given my technical background, diving into Bolt.new was kind of a fun experiment (esp given how drab and boring my day job is). I noted several challenges along the way and I thought I'll share a few tips on what I've learned thus far.
Feel free to add your insights or ask questions to make this post even more comprehensive! By no means do I claim to be an expert on anything mentioned below so I welcome critique as well :)
General Advice & Managing Your Bolt Codebase
Bolt works well initially but can struggle as your codebase grows beyond roughly 100-200 prompts. Keeping your components short (under 300 lines each) helps manage complexity and Bolt's understanding of your code.
Bolt uses the Claude Sonnet 3.7 model, which tends to be overly creative, suggesting unnecessarily complex solutions. Explicitly instruct Bolt, "I value simplicity and prefer straightforward implementations," to guide it towards simpler, practical solutions.
Giving Bolt ambiguous prompts with multiple possible implementations often results in it choosing an unnecessarily scalable (and complex) approach that it might struggle to complete. Simpler is almost always better in Bolt.
Maintaining markdown files that document your app’s current data model, product roadmap, and overall vision helps Bolt make more informed decisions—especially in the early and mid stages of development. (Once you're moving toward production, these references become less essential.)
Tactical Prompting Tips
Explicitly instruct Bolt with phrases like, "Do not make code changes," during brainstorming sessions to prevent it from immediately jumping into code. This has been helpful for me when I just want to talk through a problem.
Keeping a secondary AI assistant (like ChatGPT or Claude) available, and feeding it markdown reference files from your Bolt project, provides clearer, context-driven advice. This is especially useful in the later stages of a project when Bolt is often overwhelmed by the complexity of your codebase.
When you're stuck, using terms like "think holistically" or "weigh the pros and cons in your approach" in your prompts encourages Bolt to approach problems more broadly, and has magically helped me break through blockages about 80% of the time.
Authentication
Implement "Sign in with Google" as your primary authentication method, covering approximately 80-85% of typical user bases.
Additional authentication providers like Microsoft or Apple usually add minimal extra coverage and are rarely necessary unless specifically required by your audience.
Consider "Sign in with GitHub" for applications targeting developers or tech-savvy audiences.
UI Considerations
I often find the hero section for my landing page from https://21st.dev/ and Bolt is able to handle the implementation fairly seamlessly.
Bolt has the tendency to make landing page sections overly "Boxy". Just prompt it to give you another layout.
UX Considerations
Be prepared to iterate multiple times on UX with Bolt. Initial versions are rarely perfect but improve significantly with continuous feedback and adjustments.
Bolt often struggles with intuitive UX layouts. For instance, it's helpful to consider things like Hick’s Law (fewer choices = quicker decisions) and that users typically notice elements placed in the top-left first.
Regularly seek external feedback from friends, users, or tools like ChatGPT or Claude to brainstorm and refine your UX design.
Learning basic UX design principles significantly helps improve how intuitively your app presents information to users.
Don't blindly use the suggested landing page copy recommended by Bolt. Iterate separately with ChatGPT or Clause based on the persona you're targeting. Bolt also tends to assume your app is already in production with "millions of users" - so you might want to make double check your copy to make sure it's not not blatantly lying.
Adding a Blog to Your Landing Page
For scalable blogging on your landing page, I've experimented with solutions like Storyblok and Contentful but found them overly complex and more tailored towards marketers.
I've had success converting Markdown directly to blogs, maintaining simplicity and scalability. If you need specific steps on how to achieve this, please reach out directly.
I also figured out a hack to auto-generate and post my blog using a cron job that calls an API on a set schedule. It’s a pretty loaded topic, so I’ll share more details in a future post :)
General SEO Tips
Don't overthink this too much. Just ask Bolt to take the necessary steps to implement SEO best practices. Just make sure you're asking it to do all things step-by-step rather than everything in one go.
Custom CMS and Data Management
You can easily build a custom content management system within your Bolt application to preload and manage data in your Supabase database.
Bolt can quickly create interfaces for uploading CSV or Excel files directly into your database, a helpful feature for applications requiring initial or bulk data uploads.
Email Integration (Using SendGrid)
Bolt doesn't support native email capabilities yet. I successfully integrated SendGrid to handle user-related emails such as welcome messages and notifications.
There's a learning curve, but manageable—I learned how to do this one one productive Saturday morning. If you're struggling or need guidance, feel free to reach out directly - it's a fairly loaded topic.
Analytics & Building Your Own Admin Tools
Easily integrate Google Analytics by simply inputting your measurement ID into Bolt for basic user insights. Remember to ask it to track key events across your application.
Alternatively, build your own internal admin-only analytics dashboard for more detailed engagement tracking, such as daily and monthly active users, and specific engagement metrics.
Once your app is live, monitor feature that are getting used the most and proactively prune features that are no longer needed. This keeps your codebase clean, your UX sharper, and helps avoid a bloated app.
Performance & Security
Before implementing complex features (for example: a SendGrid integration), always explicitly ask Bolt about secure and efficient methods to do so. For example, prompt it with: "What’s a secure but simple way to implement this? Do not make code changes yet"
Bolt often defaults to generating numerous Supabase hooks, which may impact performance negatively. Clearly distinguish when to use backend APIs versus Bolt's default Supabase hooks to maintain optimal performance and security.
Hosting, Domain, and Deployment
Do not embed API secrets like OpenAI keys directly into your client-side code. Always use Supabase Edge Functions (or Netlify functions or any other API solution) to handle these securely.
Initially, I created a separate Netlify project exclusively for server-side functions before Supabase Edge Functions became available. Now, I strongly recommend using Supabase Edge Functions for backend APIs, especially to securely handle sensitive integrations like OpenAI APIs.
Supabase Edge Functions make it easier than ever to run cron jobs and call external APIs like OpenAI in a secure and maintainable way. This significantly reduces the need for workarounds like separate Netlify functions.
Use Namecheap for inexpensive domains (~$10-$15) and link them to Netlify for straightforward hosting.
Handling Roadblocks
There are two main ways to handle roadblocks with Bolt:
Export and Debug Elsewhere: Export your project to Cursor or Windsurf. Tokens on Cursor and Windsurf are significantly cheaper than Bolt, making experimentation and debugging financially feasible. These tools also allow you to target specific files that you suspect are causing issues. Once you've found the issue and a potential fix, have Cursor or Windsurf craft a detailed prompt that you can directly feed back into Bolt to implement the solution. You don’t have to re-import the full project—just use the prompt.
Rollback Approach: Bolt has built-in backups allowing you to revert to a previous stable state. Rollbacks, although frustrating, can save significant time compared to debugging complex issues when Bolt is overwhelmed. Just keep in mind that while Bolt can rollback code, it cannot rollback your Supabase database changes, so plan accordingly when deciding to fork an earlier version.** Bolt has built-in backups allowing you to revert to a previous stable state. Rollbacks, although frustrating, can save significant time compared to debugging complex issues when Bolt is overwhelmed.
While you can target specific files within Bolt, I’ve found it less effective than doing so in Cursor or Windsurf when debugging issues.
Advice for Fellow Learners (Pseudo-Technical Founders)
Bolt is excellent for users with partial technical knowledge, such as product managers, technical founders, or students. Treat it as a knowledgeable yet inexperienced junior developer; guide its decisions explicitly, especially regarding complex integrations.
Don’t expect this post (or any one guide) to teach you everything—your own intuition and learning will only sharpen as you build. Just start building.
Unfortunately, I've limited advice to give on marketing and monetization as those are things I'm still figuring out. If anyone has advice on creating social media posts via code generation, please let me know!
One final note: Bolt is shipping updates at an insane pace. Everything I've written here might become partially or completely obsolete in the next 6–8 weeks. So if you're reading this later, take all of this with a grain of salt! I'm still learning, so please feel free to share your experiences or ask directly for more specifics! :)
I hope this detailed breakdown helps those building or considering Bolt! I'm still learning, so please feel free to share your experiences or ask directly for more specifics.
Happy building!
AMA w/ CEO of Bolt - from $0 to $20M and how we almost didn't make it
Live Feb 28th, 9am PT - drop your questions!
Hi everyone, CEO of Bolt here! Super excited to open up about our journey and offer any learnings and stories I can to help other makers on their journey. Within a span of 2 months we've grown to $20M in revenue and were recently featured in NYT as paving the way for vibe coding.
Every decision can turn into a pivotal one for a start up, but you have to keep iterating and trust your gut. Feel free to AMA about bolt's journey, vibe coding, what we have in store, and how other makers can learn from bolt's past (and rapidly evolving future).
"Vibe coding" for non-coders
Recently I've worked with a group of non-corders trying to "vibe code" their apps with AI. While knowing code is clearly not a must these days, it helps to get technical. People who were familiar with basic software engineering concepts were 10x more likely to success and get better results. So, with the hope of providing value to the non-coders people, I've created a quick roadmap for the basic terms and concepts you should be familiar with.
Requirements: Building apps with AI is all about being able to clearly guide AI and express your app features and requirements. You need to be able to express those ideas and explain them as you’d explain to a human developer. Think like a Technical Product Manager.
Frontend: The face of your app. It's what your users see and interact with. It could be a website, a mobile app, or a desktop app. Most popular frontend libraries and frameworks are React, Next.js.
UIs: They are the buttons, the forms, the modals, the tooltips, etc. In React, the UI is built with components. For design & styling, Tailwind CSS is the most popular library. For animations, Framer Motion is the most popular library.
Packages & npm: Apps are not built from scratch. They are built on top of existing libraries and frameworks, like lego blocks.
The most popular package manager is npm. For example, "react-hook-form" is a famous package that helps you build forms.
Backend: The backend is the part of your app that runs on the server.
It's where you store your data, your business logic.
e.g: If you want to send an email, or process payments - this is where you'll do it.
Vibe tip: Use minimal backends with serverless functions.
Database: The database is where you store your data.
It's where you store your users, your projects, your tasks, etc. Think of it as a big spreadsheet.
I recommend using a database that is integrated with your frontend.
For example: Fine, or Supabase.
API: Real-life apps almost always need to integrate with other apps.
For example: if you want to send email, or get weather data, or integrate with AI - it's all done through APIs.
Hosting & Deployment: For your app to be accessible to the public, you need to host it.
The code is usually hosted on GitHub, and deployed to platforms like Fine, Vercel, Netlify.
Finally, being comfortable with code is helpful - even if not a must.
AI often makes minor mistakes (like importing a wrong package), and if you’re not afraid of reviewing code - you will get better results faster.
Vibe coding tips & tricks
Plan > Prototype > Production > Publish
Hey PH! 👋
After building numerous apps with AI over the past year, I wanted to share some helpful tips I've gathered along the way, to help you vibe code your next idea:
1️⃣ Follow the 4P Method: Plan > Prototype > Production > Publish. This is how I build my apps. This method helps me break down complexity and make faster progress.
2️⃣ Plan before coding. Start with a solid foundation by using AI to create a PRD and map out your features, design, and data model. If possible, add references to existing applications (e.g. “like Airbnb”) and screenshots.
3️⃣ Focus on creating a working prototype first. Save backend implementation and authentication for later to avoid unnecessary complexity early on. Once you're comfortable with the UX and design, then move forward with the backend.
4️⃣ Starting fresh > Iterate. If AI didn’t pick up on your prompt, sometimes it’s better to start fresh. For small changes, iteration makes sense. For larger issues, especially during the prototype phase, it's often more efficient to edit your initial prompt and start over.
5️⃣ Provide visual feedback. When iterating, share screenshots of your generated app with the AI. This significantly helps with resolving UI issues.
6️⃣ Name your components and versions. Thanks to @rajiv_ayyangar for this tip. Establish a shared vocabulary with the AI by asking it to enumerate, name, and describe different states of your app. This makes it easier to reference specific elements when requesting changes.
What other hacks are you using in your AI builds? Share them below! 👇