Subscribe
Sign in
Launched on September 10th, 2024
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! 👇
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.
Recently, we made a big decision at Fine: Focus entirely on builders (and not devs).
I thought I'd share why we made this change, what's different now, and what it means to be a builder-first company.
1/ We used to think of @Fine as a devtool.
An AI agent that helps developers write code faster, something like @Devin by Cognition, Claude Code or web-based version of @Cursor.
But as we worked with more users and listened closely, we realized something important.
2/ Our users aren't looking for just another coding tool. Some are even non-technical. They're also not trying to build another tool or another product.
They're trying to build a business. 💰
3/ So we shifted our focus. Fine is now tailored for people who build and ship:
Indie hackers
Solo founders
Product-minded developers
People who want to get their idea out there and into the hands of paying users.
4/ This shift brought some clear product choices with it:
We stopped trying to handle every edge case and support legacy code.
We chose a modern, opinionated tech stack that works out of the box.
We focused on what matters most: helping you get to production, FAST.
5/ We made the decision to go all-in on being an all-in-one platform.
Not because it's trendy, but because it's necessary.
Builders shouldn't have to stitch together five tools just to get an MVP out the door.
So we put all the essentials in one place:
Backend, database, authentication
AI integration
Deployment and hosting
Everything works together, right out of the box.
6/ Of course, there are trade-offs.
Fine can no longer help with migrating large legacy codebases.
If your job is to refactor a 13-year-old project, you better use Cursor for that (or find another job).
But if you're starting fresh or testing a new idea, Fine is here to make sure you launch as fast as possible, with confidence.
7/ We're building Fine for people who care about progress more than perfection.
People who want to bring a new business into the world.
That's who we want to support. And it wasn't an easy decision - it feels the right one to be made.
8/ This is what being a builder-first company means to us. Clarity, speed, and a platform that helps you go from idea to launch—without all the friction. 9/ If you're building something, I'd love to hear about it. And if I can help, I will. If you need technical support launching your app - feel free to drop me a line.
Let's build!
