#72: How to Vibe Code 101
Explanations, use cases, and tips
Author’s Note: To kick off the new year, we’re mixing it up from the usual format. Instead of writing about AI, I’m going to walk you through how I build with AI. Going forward, I plan to mix in a “building with AI” piece roughly once per month, providing a bit more variety in the content schedule. If you find this type of content interesting, helpful, or entertaining, please do reach out! Any feedback is good feedback.
When I say I’m “building an app”, I’m vibe coding. For those who are not familiar, vibe coding is essentially creating software by typing words rather than traditional code. You write out instructions in natural language prompts for a large language model (LLM) to interpret and produce an output. You can vibe code a video game, a web scraper, or even a mobile app.
Vibe coding empowers those who are either curious or creative, and willing to take action to turn their idea into reality. It lowers the barrier to entry for creating software. You guide AI on the idea, providing close guardrails on design, taste, and structure.
With that said, I view vibe coding as a process to build mock-ups or prototypes. Software created through natural language prompts is unlikely to have proper security by default (think if you need to store a user’s payment information) nor infrastructure to handle user activity on a large scale. However, it can be an excellent way to communicate your ideas to colleagues, giving them a clearer vision of what you’d like to build.
Vibe Coding Introduction
App/Website: Low-FODMAP Guide
Tech Tool: Replit
Between Christmas and New Years’s Day, I created a resource for those on the low-FODMAP diet. It’s a very restrictive diet during the elimination phase and those that adhere to it are conscious of what they eat, as well as the serving size of each food they consume.
The website I created lists over 600 of the most commonly consumed food (i.e. fruits, vegetables, grains), detailing whether they are safe to eat and their acceptable portion sizes in adherence to the low-FODMAP diet. Additionally, the app has a low-FODMAP recipe generator and a menu analysis section to let you know whether a dish you’d like to order adheres to the strict protocol.
For what it’s worth, I am not on the low-FODMAP diet. But I am aware of how restrictive it is and the sometimes-conflicting sources of information that exist. Thus, I figured I would look to build an interface that could be helpful for someone who is on this diet.
Check out the website in the link above. I’m still in the process of debugging, so you may come across errors as you play around with the functionality. But that’s part of the process of building software!
So how did I do this?
I used Replit, a popular vibe coding platform. I’ve built web scrapers, nutrition trackers, and analytics tools with Replit before. You can also use platforms like Lovable, or Claude and Gemini assistants to vibe code.
How did I start?
Before I entered a single word into the Replit prompt bar, I first outlined what I wanted to build, who I wanted it to be for, ideal user experience (UX), look and feel, and core functionalities.
This sounds like a lot of work to do before hopping into the platform, but it’s worth it. Going back and forth with the Replit (or any vibe coding platform) chatbot is time consuming and expensive (most platforms charge you by credits used). You’ll build a disjointed spider web on both the front-end (user-facing) and back-end if you don’t provide an outline of what you want. Let’s dive into the requirements document that you’ll feed to Replit initially.
Summary
This section tells AI what you’re looking to build. Be direct and to the point. Consider it your value proposition.
The low-FODMAP diet guide website will serve as a web-based application to help people observing the low-FODMAP diet. The tool will show which foods and their respective portion sizes are safe to eat, as well as which foods are unsafe to eat.
Target Audience
Specifying your target audience will educate AI on the intended user, which will help inform the first iteration’s look and design, as well as curate information in a way that appeals to this user profile.
Primary Audience: New dieters to the low-FODMAP diet. Focus on those who were recently told that they will need to start the low-FODMAP diet or those who recently began the diet.
Secondary Audience: Family members or caregivers of the person on this restricted diet.
UX & Design
Be specific on the color scheme and emotion you’d like to evoke from a user when interacting with the application. Make sure to add details around sizing for both mobile and desktop.
Minimalist, sleek aesthetic, with bright (yet soft) colors. The primary goal is to establish domain authority and trust with the user, but in a friendly way. The website should mimic the persona of your very smart, kind friend who happens to know a lot about the low-FODMAP diet and wants to get you up to speed on the diet.
Make the app fully responsive across mobile and desktop using a mobile-first approach. Ensure no text or UX elements are cut off, layouts adapt fluidly, and spacing and typography scale appropriately across screen sizes.
Core Functionalities & Pages
This is where you’ll need to put in some thought on what you tactically want to deliver to your user, as well as how they’ll interact with the functionality. See this as a first pass. You will end up iterating functionality, as well as UX after the first version is created.
Home Page
This is where the searchable food database should live. Each food should be visible in a card format that highlights the level of adherence to the low-FODMAP diet, portion size (if relevant), variety of food (if relevant, think through a type of squash or a type of bread), source of information, and date information around when the source was last updated. Choose the top ~600 most popular foods to serve as the foods in the database. Tag each food to a “category”.
Food Categories
Fruits
Vegetables
Grains
Dairy
Proteins
Nuts & Seeds
Condiments
Beverages
Food items should be searchable via a real-time search bar that filters the food item database, as well as being able to be manipulated by a Food Category filter.
Also, each food item should be classified into one of the following diet categories.
Safe
Green text
Safe to eat in regular portions
Limit
Yellow text
Can eat in small portions (specify the portion)
Avoid
Red text
Completely avoid (can’t eat)
Source of Information for Food Items
Not only is it important to tell AI what you’d like to build, but it’s also crucial to specify what it should not build. You’ll see that in the sourcing section below.
Source information and diet categorization from Monash University. If information is not available from Monash University, please source from another reputable organization in the low-FODMAP realm. Examples include the Cleveland Clinic, King’s College London, or Clinical Consensus. If the source of information does not exist amongst these four options, please disregard the food from the list.
Create a confidence scoring system that falls into either “High”, “Medium”, or “Low” based on how confident AI is in its recommendation for each food’s categorization in the low-FODMAP diet. This should reflect source strength, not medical certainty.
Important Information Rules
The website/app is not a medical professional. Always recommend consulting a dietitian for personalized advice in any open-ended response (i.e., in Recipe Helper)
Never provide specific medical advice or claim certainty about food not in the database, particularly in an open-ended response
If you’re uncertain about food categorization, say so clearly and recommend caution
Focus on general FODMAP principles, not specific diagnoses
Definitions Page
This page should have a button at the top right of the Home Page that leads to a glossary of terms related to the low-FODMAP diet. This is meant to serve as an information hub for those less familiar with the diet. Make sure to source information from medical organizations and cite the source below each term.
Provide a search bar at the top of the page for a user to look for a term in the glossary they had in mind.
Recipe Helper Page
This page will be accessible via a button on the bottom right of the Home Page. It will consist of ChatGPT-style prompt bar and nudge the user to ask for low-FODMAP recipes based on the foods they have in their kitchen. Users will receive recipes after submitting their prompt that are low-FODMAP friendly. Do not include any ingredients in these recipes that are not friendly. Consult the food item list before providing an answer.
With that said, please be creative and encouraging. Suggest flavor combinations, cooking techniques, and ways to make meals enjoyable while staying FODMAP-safe. The website/app is not a medical professional, therefore always recommend consulting a dietitian or doctor for personalized advice.
Please use OpenAI integration with Replit to be able to ideate recipes for the user (I can authenticate the OpenAI connection). Increase creativity/temperature of OpenAI’s responses, but do not sacrifice medical integrity. It is essential to not provide incorrect guidance on the low-FODMAP diet to the user.
Success Key Performance Indicators (KPIs)
It’s helpful to provide AI with how you’ll measure success, as you’re giving the AI a benchmark to check its own work against.
Average time on the website/app: > 90 seconds per session
Usage: >2 food item searches per session
Retention: >40% percentage of users returning to the website/app within 14 days
Furthermore, I added functionality around helping users when they’re thinking through whether a dish at a restaurant is diet friendly. But at this point, I think you will get the gist of how to write the product requirements.
Upload your version of product requirements to the prompt bar of a vibe coding platform and let the magic happen!
A few tips:
Whether you successfully turn your idea into reality will likely be determined by how curious and relentless you are (yes, pun intended). Oh, and patience is key too.
Vibe coding can be incredibly frustrating when you can’t get AI to create what you have in your head. Although I consider myself proficient in SQL, I am no software engineer by any stretch of the imagination. So, I need to be curious and ask many questions about how certain functionality was built to help think through fixes.
Tell AI what you want and tell it what you don’t want.
I’m repeating myself from earlier in the article for good reason. AI will make a lot of assumptions around your vision, and you need to narrow the scope by implementing constraints. You’ll go off the rails quickly in the design if you aren’t clear up front.
Ask for help.
I regularly ask Replit to explain the changes it made. When I don’t like the output I receive, I ask ChatGPT to tweak my prompt and provide feedback. Use AI to help you use AI.
There’s plenty more to share, but I’ll leave you with just one more thing. To quote Stephen Covey from The 7 Habits of Highly Effective People, “start with the end in mind.”