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.
Replies
Fine
Great introduction. Even though it feels like you're talking to a human, talking to the "developer" in the model with "developer language" sure helps get better results. Just like when working with humans - it's all about communicating your needs correctly!
Trickle
Thanks for sharing! I think it will be really useful for people new to vibe coding. 👍
Since Andrej Karpathy introduced the term "Vibe Coding," thanks to YC for bringing it to the mainstream through YouTube.
The points you mentioned are exactly what set @Trickle apart from no-code tools like Bolt and Lovable.
For example, Trickle comes with a built-in database, so users don’t need to integrate a backend themselves.
It also has AI functionality built-in, eliminating the need for users to configure external APIs or keys when creating AI apps.
Plus, Trickle supports one-click deployment. This makes it much more beginner-friendly and ideal for those with no coding experience at all. Hope you get a chance to try it out! 😊
Product Hunt
Yeah, this is a good point. Just like being an actual product manager or an actual designer, the more you know about code and how your particular app is built, the easier it will be to collaborate with an engineer or an AI.
One hack I've found while coding on with @Replit is to ask the assistant to enumerate, name, and describe the different states of the app so I can give feedback in more precise terminology that the assistant understands. basically I'm trying to figure out what the assistant calls the different components and states of the app.
Fine
@rajiv_ayyangar That's great idea actually. It gives me the idea to "Tag" to generated components (in Fine) and renders component names so users can reference them in the AI chat. Thanks!
Fine
@rajiv_ayyangar @dan_leshem I've found the results working with AI to revise code are 10X better when I'm looking at the code as I prompt. I'm not a coder but still it's not hard to understand from the file tree and when a page starts with Import <ComponentName> to understand what I want to refer to.
minimalist phone: creating folders
Great overview. If any newbie wants to start from scratch, this is a good first stepping stone.
When I started with something like coding or so, I had a hard time understanding the difference between UX/UI.
✅ Note: Many people can understand coding from MEMEs. :D
Fine
As a non-coder vibe coding using Fine has really opened me up to a world of capabilities. It requires a certain type of person who has the patience and gets the "bug", who is excited by potential even though there's a learning curve.
I've found the more built-in capabilities the better and good integrations also help.
Personally I like being able to make manual edits - things like copy, which I don't want to delegate or waste credits on, so I liked that Fine has a built-in edit option and that I can also easily commit directlly.
Hold on, someone can't be both a non-coder and being comfortable enough with code to do code review that is meaningful, i.e. actually debug the code, at least in this context. You can certainly do it in the reverse-engineering context, but that's because most reverse engineering work are black box and you have the file for dynamic analysis already anyway. Here, you don't have a reference copy that already runs, so how do you debug if you don't write code in the first place and it throws exceptions or runs poorly? It wouldn't be obvious whether if it's a problem on your end or the code even, never mind how to fix it.
I'll give you an example. In Python the official Google api client still uses httplib2 underneath the abstraction for the calls, but it is ancient and lacks pretty much features in most use cases unless you are specifically trying to make the world's slowest Google Drive client. The docs aren't even particularly helpful, but if you look at the abstracted code, you can probably write your own oauth2 client from scratch or hey, why not make it async, and even give options for the transport by using anyio? Because the Google Drive v3 api will just dump every object you have access to, paginated, and you have to figure out a way to make it connect if you do write a client from scratch, so it would make some sense to use, say, trio and httpx to do the whole flow. If you know how to do this, you can literally write a modern, efficient, and flexible client that will get you auth-ed and have your file tree built in around 15-20 minutes, and you can reuse that.
But if you don't know how to write code, you'll wonder why this thing is so slow. And then you have to read up about threading v concurrency, and probably gevent/greenlets somewhere before getting to asyncio and aiohttp. If you got that far and it's not moon language, you basically know how to code. If it sounds like moon language, well, then you would have no idea where to even start. Of course, that's just Google Drive, which is connected to your Google Docs/Sheets. Unless you're before the GFW, you probably have used this and so you can probably benefit, except you know, a bad first impression is hard to fix. I write code pretty much every day and still have moments where the vibes run dangerously close to "tossing-my-phone-at-the-wall". I never took a class that's not related to the humanities after 11th grade so I can't tell you if it's taught that a lot of production code is abstracting away janky design choices that aged extremely poorly, but that is absolutely how a ton of pretty commonly used libraries are. I mean, web3.py went 5 versions with basically a fake websocket client. Feel free to dig up the voluminous discussions on github about workarounds to this, except now that it's no longer a fake socket, all that easy MEV you could have made that was basically free money for years pretty much no longer exists for you to get. It's all use-case dependent, but I rarely find copilot or iwhatever AI du jour to really be helpful, mostly because if the AI knows how to do it properly, then I'm already late to the game. Then again, I also don't code with other people, for the same reason. The value you provide should not be supervisory, it should consist of things no AI can come up with, period.
Interestingly this also applies to code as in the administrative code, or regulations. Try asking the AI how to stage a self-coup in the US without breaking the law when you're the president. There is actually a very short answer to this because you can get to the answer via a few different ways but I've tried it out on every single model trained with the relevant material and it has yet to come up with the correct answer. How do I know the correct answer? Because the conditions that would allow it to happen happens every day and the government keeps stats on those that they realize they 'screwed up' on. As the saying goes, meaning is not in things but in between things and it's the absence of what obviously exists in the record that gets you the right answer. Once an LLM can correctly apply critical queer theory, then we're in real trouble, but your code would debug itself.
@dan_leshem goldmine of a roadmap for non-coders diving into app development (my journey to dev was through AI). Understanding the basics—like front-end frameworks (React, Next.js) and UI components—is crucial. And yes, embracing code, even a little, can make a world of difference... still getting there myself.
As a cheeky postscript, it's my first PH launch today for Raven, a sadist productivity app for writers.
Great Suggestion! Even if you don't know how to write code, it's important to understand the essential terms related to development. Without knowing these terms, it's difficult to collaborate.
Awesome tips, Dan! Totally agree—having at least a basic grasp of software engineering concepts makes a huge difference when you're vibe coding with AI.
As a non-technical founder myself, I've noticed firsthand that knowing how to clearly describe your app's requirements in "developer speak" can save you a ton of headaches and speed up development. Your breakdown of frontend, backend, and APIs is spot-on and helps tackle a lot of common roadblocks.
I’ve found platforms like Vercel and Supabase to be fantastic for quickly spinning up scalable projects without diving deep into coding.
As excited as I was when I discovered tools like Replit Agent, it's also important to be realistic. I found many frustrating issues or even "hallucination" problems, especially when dealing with Typescript or structured data. Setting clear expectations and understanding the limitations of current AI tools is crucial to avoid unnecessary frustration and spending extra money going round in circles trying to fix avoidable issues.
Your suggestion to clearly define app structures and components upfront is gold—it really can help prevent wasting time and money if you're using something like Replit.
I developed a CopyWeb UI tool, suitable for people who just contact or have not contacted coding, you can generate front-end code through ui design screenshots, you can experience it, I hope it will be helpful to you.https://copywebui.com
Product Hunt
Yeah, I think there's a broad misunderstanding of what the work of being a programmer actually is. Turning broad, high-level, strategic, or just vague ideas into something actionable. The stuff that people think of as the work from outside, and which until recently was in fact a big part of the job, is syntax issues, library incompatibility, accidental complexity. That is what's going away (replaced somewhat with hallucinations, but that's getting better and better).
You've laid out a clear roadmap for non-coders, Dan, which I find quite practical. However, I think we can push the envelope a bit further on a couple of aspects. Firstly, while understanding the basics of software architecture-frontend, backend, APIs-is undoubtedly beneficial, the real challenge often lies in the integration of these components in a seamless and secure manner. Many non-coders struggle not just with the lack of coding skills but with understanding how these different components work together in a real-world setting.
For example, serverless architectures are fantastic for scalability and cost-efficiency, but they introduce complexities around state management and application flow that require a deeper understanding. Perhaps a section on common pitfalls or architectural patterns could help bridge this gap.
Additionally, while tools like npm simplify adding functionality, they also increase the risk of dependency issues and bloated projects. A brief discussion on managing dependencies effectively, choosing reliable packages, and understanding their impact on application performance could be immensely valuable.
Despite my suggestions on diving a bit deeper into integration challenges and dependency management, I genuinely appreciate the clarity and accessibility of your roadmap. It serves as a robust starting point for anyone looking to navigate the tech landscape without a traditional coding background. I find it particularly engaging and a great conversation starter for more nuanced discussions in tech development. Thanks for sharing such a thoughtful piece-it’s discussions like these that push us all to think more critically and inclusively about tech education.