- Ruth Eschenheimer
- 1 day ago
- 6 min read
Ready to see what Base44 can do for you?Get started →
Writing prompts for vibe coding, is a new kind of skill. This guide is designed to help you master the art of the prompt for AI so you can build exactly what you envision in your head and maybe at the same time, something better.
Building an app or software used to mean learning a language that looked a lot like algebra. You had to worry about brackets, semicolons and memory management. But, thanks to vibe coding, this has all changed.
Vibe coding is a way of building an app where you describe the vibe—the feeling, the function, the flow of your app idea or website—and an AI app builder handles the heavy lifting of writing the code.
But there's a catch, the AI is only as smart as the instructions you give it. If you ask for a website, you’ll get a generic box. If you ask for a retro-futurist portfolio that feels like a 1980s terminal, you’ll get something much better.
What makes a good prompt for vibe coding?
Before we jump into specific prompts examples, we need to understand what makes a prompt work or the prompt engineering behind it, as its often called. When you're vibe coding, you're talking to a very literal assistant and it wants to help but it can’t read your mind.
A strong prompt usually has four main ingredients:
The identity: Tell the AI what it is building. Is it a game? A serious financial tool? A silly blog?
The audience: Who is this for? A five-year-old needs big buttons and bright colors while a stockbroker needs data density and speed.
The features: What does it actually do? Be specific about the actions.
The aesthetic: This is the vibe part. Use adjectives as much as possible to convey it effectively.
If you skip the aesthetic, you get boring default styles. If you skip the features, you get a pretty picture that doesn't work, so its important to include it all.
Prompts for vibe coding web apps
Whether you're building an app with AI for yourself or vibe coding a website for a project, specificity is your friend.
Example 1: Focus mode timer
The goal: A simple productivity timer that isn't distracting.
The vibe: Minimalist, calm, zen.
Try this prompt:
Build a Pomodoro timer web app designed for deep focus.
Functionality: A default 25-minute timer that counts down. Simple 'Start', 'Pause', and 'Reset' buttons that are outlined, not filled. When the timer hits zero, play a gentle singing bowl sound, not a harsh alarm. Include a small text area below the timer where I can type my current task, like 'Writing Chapter 1.'
Style: Keep it very clean with lots of empty space. No bright colors, just shades of grey and beige. The background should be a soft, creamy off-white. Use a thin, elegant serif font for the numbers.
Why it works: You specified the sound (singing bowl vs. alarm), the typography (serif), and the exact color palette. You also added a specific feature (the task input) that makes it more than just a generic timer.
Learn more about how to make a productivity app.
Example 2: The personal link hub
The goal: A place to house all your social links.
The vibe: Bold, loud, energetic.
Try this prompt:
Create a mobile-friendly 'link in bio' landing page for a street artist. The background should be a dark concrete texture. The buttons should look like strips of neon yellow duct tape with black jagged text.
Features: A circular profile picture at the top with a glitch effect on hover. Five buttons stacked vertically linking to Instagram, TikTok, Shop and Gallery. A 'contact me' button at the bottom that opens an email mailto link.
Animation: When I hover over a button, it should tilt slightly and glow brighter.
Why it works: You gave a specific persona (street artist) which helps the AI infer design choices. You also described specific interactive elements like the "glitch effect" and "tilt," which adds a layer of polish.
Prompts for vibe coding mobile apps
When building apps for mobile, you have to think about touch. Fingers are clumsy compared to mouse cursors and your prompts need to emphasize size, spacing and ease of use. UX and your app development needs to come into your prompts.
Example 1: The daily water tracker
The goal: A fast way to log water intake.
The vibe: Fresh, liquid, bouncy.
Try this prompt:
Make a mobile web app for tracking water intake. The main view should be a large, animated wave that fills up the screen as I drink more.
Interactions: Place a big '+' button at the bottom center that is easy to tap with a thumb. Every time I tap the button, add 250ml to the total and make the water level rise with a splashing animation. display the total amount (e.g., '1.5L') floating in the center of the water.
Colors: Use gradients of bright blue and teal because the interface should feel bubbly and responsive.
Why it works: You focused on the "thumb zone" (bottom center) and the visual feedback (filling up the screen). This makes the app feel native to a phone.
Build health and fitness apps of your own.
Example 2: The flashcard study buddy
The goal: A study aid for learning a new language.
The vibe: Academic but friendly.
Try this prompt:
Design a flashcard app for learning Spanish. The interface should look like a stack of physical index cards on a wooden desk background.Mechanics:Show one card at a time with a Spanish word.When I tap the card, it should flip over with a 3D animation to reveal the English translation.Swipe right if I know it, swipe left if I don't.Keep a score counter in the top right corner.Use a handwriting-style font for the text on the cards to make it feel handwritten.
Why it works: You described the physical metaphor (stack of cards, wooden desk) and the gesture controls (swipe left/right). This tells the AI to build a specific kind of user interface that is intuitive for mobile users.
How to make an educational app in more detail.
Prompts for vibe coding creatives tools
Vibe coding really shines when you make things that are just for fun, for example, building little online toys or art generators that would be too tedious to code by hand.
Example 1: The lo-fi beat maker
The goal: A simple grid to make relaxing music.
The vibe: Retro, cozy, night-time.
Try this prompt:
Build a simple step sequencer for making lo-fi hip hop beats. It should be a 16x4 grid of buttons.
Sound kit: Row 1: Kick drum (soft and thumpy). Row 2: Snare (crisp). Row 3: Closed Hi-hat. Row 4: A chill jazzy chord sample.Visuals:
Design: The background should be a looping GIF of a rainy window at night. The active buttons should light up purple. Add a play/stop button and a tempo slider. Keep the whole thing contained in a window that looks like Windows 95.
How to make an entertainment app in a few easy steps.
Example 2: The abstract art generator
The goal: A tool to generate random wallpapers.
The vibe: Modern art, chaotic, colorful.
Try this prompt:
Create a generative art canvas that fills the browser window. Every time I click anywhere on the screen, generate a random geometric shape (circle, triangle, or square) at that location.
Rules: The shapes should have random sizes and random pastel colors with 50% opacity so they layer over each other. The shapes should slowly drift in random directions. Add a button in the corner that says 'Save Masterpiece' which downloads the current view as an image."
How to improve your vibe coding prompts
The first result with vibe coding is almost never perfect but its okay because Vibe coding is a conversation. You don't just give one order and walk away, you shape the product as you keep prompting and talking.
When the AI gives you the first version, look at it critically. Then, follow up with some refinement prompts.
If the logic is wrong: "The timer doesn't stop when I hit pause. Fix it so the countdown freezes immediately."
If the look is off: "The text is too hard to read against the dark background. Make the font bold and bright white."
If it’s boring: "Add some confetti animation when I finish the task."
If it’s broken: "I'm seeing an error when I try to save. Debug the code and make sure it works on Chrome."