I didn’t set out to build (i.e. “vibe code”) an app with ChatGPT 4.1 that logs CBD usage and yells “Right On, Man!” every time you click a button. But that’s what happened. Because it worked.
GPT-4.1 is currently the best ChatGPT model for coding, so I put it to the test.
Thanks to GPT-4.1 and about 30 minutes of my precious time (most of which was me trying to pick the right shade of green), I ended up with a working app that tracks how many milligrams of CBD I take, shows a graph of usage, and even talks back to me. Welcome to the most chill ChatGPT tutorial you’ll read this week.
Let’s break down how this thing came to life. Here’s a preview of what the final product looked like:
Step 1: Prompt ChatGPT 4.1 Like a Human With a Vision
For my AI stress test, I wanted to create a mobile app that tracks CBD intake. I told ChatGPT 4.1 to:
- Log each CBD dosage (in milligrams)
- Timestamp every entry
- Show a running history log
- Generate a graph of daily usage
- Use a dark color scheme (black, green, white)
- Make it super clean and big-buttoned for lazy thumbs
- Display a “Right On, Man!” popup every time the log button is pressed
- Flip the button background to white when clicked
- Toss in a small affiliate link to CBDistillery.com (just to show you guys how that would look)
I wrote this all out as a single big prompt (see below). You could drip-feed the requests if you want, but I wanted to test the might of GPT-4.1. GPT did not flinch.
Canvas mode popped up (this is ChatGPT’s UI preview mode), and within seconds, there it was: my cool little CBD app. Buttons. Inputs. Graph. Working like it was born to do this.
Here is the ChatGPT prompt for you to try it out as well if you’d like. Of course, you’ll want to edit this to be whatever you want, and it certainly doesn’t have to be an app that tracks anything. But this will give you an idea of what to do.
Copy/Paste Into ChatGPT:
Code me a simple mobile app that keeps track of how many MG of CBD a user takes throughout the day. They will simply log each time they take CBD, along with how many MG they take. The app will log it every time and also provide simple graphs you can view to see what your usage is trending like. Use the following colors: black, green, and white. Use dark mode. The UI needs to be big, clean, and easy to use for anyone. When you push the “Log Intake” button after taking CBD, a popup window should pop up that says, “Right On, Man!” When the button is pressed, I want the button background to turn white. With everything you code for me, be sure to represent that in the preview window for me so I don’t need to copy/paste anything. Also, when you make any changes to the code for me, be sure to provide ALL of the new code and not just the section of code that needs to be updated. Include a link under the “Log Intake” button for CBDistillery.com. Include this full text: “Need CBD? Head on over to CBDistillery.com.”
Step 2: Testing Your New AI-Created App
I ran some test data through it, and every entry showed up in the log with a timestamp.
The graph? Not beautiful, but it did the job and worked. Little green lines went up and down depending on how much CBD I claimed to take that day. Looked just like I imagined a fake medical chart would look.
And when I hit the button? The popup came through: “Right On, Man!”
Did I laugh? Yes. Some of you might think that’s stupid, but I thought it was cool, okay?
There was one small bug at the beginning, but after one sentence back to GPT, it fixed itself. I didn’t even have to explain the problem well. It just… got it. Amazing.
Step 3: Adding a Logo to Your App
Generic, simple apps feel more real with a logo. So I went into a new chat window and told ChatGPT to make one.
Copy/Paste into ChatGPT:
“Create a logo image for my app. The app’s name is: “CBD Log”. It’s an app that logs your CBD usage. Use green, white, and black in the logo. Make the logo highly legible. It should have a modern look but include some subtle gradients, shadows, and reflections. Give it a transparent background.”
I thought the initial ones it produced were kind of lame and generic, so I followed up with a couple of iterative prompts, and then it was done.
I uploaded the logo to imgur.com (a simple and free image host that doesn’t require a login) and pasted the link back into GPT with instructions: “Replace the text headline in the app with this image logo. Resize it to look good.”
Done. It looked… pretty good. But mostly, it made the whole thing feel less like a school project and more like a real app someone might pay $0.99 for and then forget about. One can dream.
Step 4: Audio Feedback Because Why Not (Optional, but Awesome)
Next, I wanted the app to say “Right On, Man!” when I logged an entry. Because if you’re gonna get weird, go all in. Remember, this is Run The Prompts. We do things differently here.
I used elevenlabs.io and found a voice called “JR Friendly and Chill.” Sounded like your uncle from California who owns too many sandals and dirty bongs.
I typed in the phrase, “Right on, Man!”, downloaded the MP3, and hosted it with Catbox (free and also no login required).
Then, I dropped it into ChatGPT 4.1 and added this prompt: “Every time the ‘Log Intake’ button is clicked, play this audio clip.”
Ten seconds later, I heard a sound. Crisp, clear, and just the right amount of dumb ‘90s stoner energy.
Step 5: Tweak the App’s Visuals & Design
I had some follow-up prompts to dial in the look I was going for. Here’s an example: “Make the button a green-to-dark-green gradient instead of solid. Add soft shadows. Add more depth.”
GPT made the changes and instantly applied them to the canvas preview. Suddenly, the app felt polished.
It still wasn’t perfect, but the important thing was this: I didn’t touch a line of code manually. It was all vibe coding. Talk to it like a designer, and it does what you mean.
Pro Tip: Know the ChatGPT Coding Nuances
There are caveats we mere mortals must know:
- Preview mode doesn’t save data between sessions. Once you close it, the entries are gone. Consider Preview Mode as a testing mode.
- ChatGPT can get slow if you keep stacking features and prompts within the same chat.
- Free hosting for images/audio is temporary. Don’t rely on imm.io or Catbox for production use. That’s not what they’re for. I used it for testing purposes. You’ll want to host your files wherever you host the code for the app.
- AI is not perfect. For most of you, this warning is not needed. For others, maybe you should just be grateful for the amount of magic intelligence in the sky…
how about a couple of weeks of gratitude for magic intelligence in the sky, and then you can have more toys soon?
— Sam Altman (@sama) September 12, 2024
In most cases, this isn’t your forever app. It’s your fast, fun prototype that you can hand off to a developer, which will save you a ton of money in the long run.
Wrapping It Up: This Is What Vibe Coding Is All About
For now, ChatGPT is great at letting you vibe code a simple app in very little time. I was amazed that my idea worked so well and so quickly.
If you need a complicated app, it may not work out so well. But in any case, you can always create the prototype with AI and then hand it off to a developer.
If you haven’t tried vibe coding yet, just imagine this picture: it’s just you, an idea, and GPT-4.1 trying to act like a real developer.
So yeah. You can build a CBD tracker app with ChatGPT that talks back to you. You can build a gratitude journal. A mood tracker. A dumb little Flappy Bird game. Anything you want, within reason.
Prefer watching? Watch the YouTube edition below for a full walk-through and even more good stuff. And be sure to subscribe to us on YouTube.
Until next time, remember to run the prompts and prompt the planet!
If you like ChatGPT, you'll love Venice. Venice is private and uncensored! Try Venice today for free or get 20% off Venice Pro for a limited time with promo code "RUNTHE20".
