“Everyone is a builder now”. Only if you can describe it...

A real prompting guide for Vibe coding in Lovable.

Is it true that anyone can build what they want with AI? 🤔

I hear big companies saying things like “if you can describe it, you can build it”.

Well.. Most people don’t know how to describe it. That’s the real problem.

In this article, I share learnings from what we’ve seen and tested that works for Vibe coding, along with things to watch out for when you’re building with AI. Nothing here is set in stone. These are still early days, and we’re super excited about what the future holds!

That’s why we’re doubling down on Pretty Prompt. And launching a new integration with Lovable. To help you get what you want from Vibe coding, whether we know how to describe it or not.

Before I get into the content, if you want to try out the new Lovable x Pretty Prompt integration, give me a shout! It’s pretty Amazing...

Hope you enjoy this guide on how to prompt for Vibe coding ✨

---

What We’ve Seen and Why It Matters

After 100s of hours of prompting for Code, Vibe Coding, text generation, image, video, and more, we found that each medium has different needs.

It’s not the same to ask for an image as to ask for an email. It’s not the same to prompt for Vibe coding as it is to create a scene for a video.

We believe that as these models keep evolving, the differences between the models will get smaller, but the needs for the type of output will remain specific to each medium.

We’ve looked at what works and what doesn’t. But most importantly, we didn’t just rely on what others said; we based our findings on what worked for us. And we went a step further as to what it would look like behind the scenes.

“How would this task look if it were done completely in code? What would be the steps that an engineer (aka Charlie Day 🙃) would need to take if there were no “Vibe” option?”

I think this is an incredibly powerful question to ask, and one more “Vibe gurus” should ask themselves often.

Building ≠ Shipping

My biggest learning: Everyone Can Build, Not Everyone Can Ship.

Yes. Everyone can build something. Most can’t really ship it.

There are many factors here, and I think the main one is that most of us didn’t learn to think like an engineer. And don’t want to go through the hard problems that arise when building something new. Great engineers find solutions to hard problems.

It’s not just about coding... It’s about solving hard problems.

For this article, I’ll focus on the prompting part, because most people get stuck in “it’s really hard to translate what I have in my mind”.

So then, what happens?

People default to generic, lazy prompts that give generic results.

Prompts like “Doesn’t work. Fix it!” (probably more like “FIX IT!” all in caps 🤦) Or “I want a landing page for my company“ (without even adding the name of the company, the style of the website, the color palette, who it is for, etc.) produces poor results.

It sounds simple. Yet most of us dismiss it because it’s hard to explain what we want, and we are lazy by nature.

Note: Writing more doesn’t always translate to better outcomes. It’s not about size, is about quality 🤨. It’s about clarity and the context.

You may need longer prompts sometimes, and shorter prompts some other times. But I would encourage you to stop thinking about the length, and start thinking about the content of the prompts you produce, and what you actually want to get out of the AI.

Why Translating Vague Into Clear Is a Superpower

Being able to translate vague instructions into clear text is indeed a super powerful skill. This is no news today. It has always been like this.

It’s now even more important because we’re having to interact with computers (not just humans) with plain words.

And if you are lazy (when it comes to writing), or just don’t know how to explain what you want to achieve to a computer, then you’re just relying on luck. And luck doesn’t just happen...

By the way, Pretty Prompt does a pretty good job at taking simple, lack-of-context prompts, and turning them into proper ones for AI.

What We’ve Found So Far

• Good prompts and meh prompts tend to produce similar results

• Great prompts produce outstanding results

• Let’s call these the top 1% of prompts

So how do you go from a meh to a top 1% prompt?

What I’ve seen works best for Vibe coding (in tools like Lovable, Base44, etc.) is reducing ambiguity and increasing context.

Ambiguity

It’s not the same to say “make me a slick website” than saying “an Apple-inspired website with a monochromatic style, soft borders, and light grey touches”. Still not top 1% but definitely less ambiguous.

AI works great with pattern matching. So by giving examples, references, specific colors (e.g. “Deep Matte Black #111111“), or even screenshots of what you mean, it really helps direct the model towards what you have in mind.

Context

By giving more context about what you’re building, you increase the chances for AI to predict the ‘correct’ next token and go in the same direction you have in mind.

AI can only predict the next token. That’s its sole purpose. So with more context = more chances to get it right = more chances to make luck happen.

“The lesson for me: great AI starts with great context. The model is the easy part.” - Avishai Abrahami, CEO & Co-Founder Wix.

(Thanks Ofer Shayo, for sharing the quote above from this post! ⬆️)

---

Prompt “Jobs” for Vibe Coding

I like to think about different types of prompts as “Jobs” while Vibe coding. For example:

• Design something -> Job: Design

• Build x, y, z -> Job: Build

• Debug this issue -> Job: Debug

Each of these ‘Jobs’ needs a different type of prompt.

Design

1. A big problem with AI is that most products or websites end up looking the same. They follow the same pattern, use the same icons, have the same fonts, and have all over them an invisible sign saying “I was made by AI”. 🙃

2. It’s also hard to explain exactly how you intend the information to be displayed. If you’re building a landing page, you might want to have a specific style, a look and feel to the page, unique textures, or messaging based on your audience. That’s where explaining things with “big” words helps.

3. Don’t be shy. Don’t just say “minimalistic”. Go specific, go big (or small), and use “vibe” words to describe it. Some call it using “buzzwords.”

4. Use specific references to aesthetics like “Neo-Brutalism” or “Monochrome”, etc. Again, AI is good at pattern matching, so by giving references, you become the conductor of the “AI orchestra”. We need to give parameters and constraints so that the AI can be creative in that space.

For example:

A SaaS dashboard for a new tool called ‘Payflowly’ using a Bento Grid layout to organize the data charts. Use a Minimal Brutalism aesthetic with straight borders and cards, no curved corners, and a retro look using a color palette of blue (#1B73E8), red (#FF5B60), and yellow (#FFFDD4). Start with the main page of the dashboard and work your way from there, step by step. 

---

Functionality

1. This is where being clear is a must, not just a nice-to-have. Functionality is as important, if not more, than the look of what you’re building.

2. Getting the wrong integration with Stripe, might prevent you from charging your customers. 😑

3. Adding an API key in the frontend, might expose important information about your business and create headaches in the future.

4. The wrong backend will affect how users experience the product and potentially drive churn. Building products is hard. And it’s even harder when you are far from the code and rely only on words. That’s why prompting matters.

The models are getting smarter. Companies are raising a sh*t load of money to build the next coding tool, but your requests are also getting more complex. So getting your prompts right will help you a lot.

Note: When it comes to making things functional, I like to start with a separate document where I write bullet points on what I want to achieve. Once I have this brief, I then give it to Pretty Prompt to help me structure it in the best way possible (and even fill in gaps I overlooked). Only then, I give it to the AI to build.

In my experience, skipping the planning part will come back and bite you later.

If you don’t know where to start, or get stuck with your prompts, we’ve put together a list of battle-tested prompts for all types of Vibe use cases. These are inside Pretty Prompt’s Library. Best part? They are accessible right inside where you prompt.

Snapshot of Pretty Prompt’s Public Library inside Lovable.

---

Change or Add Functionality + Frontend changes

• It’s important to keep in mind that as you add new functionality, this may impact or change other code in your project. That’s why it’s good practice to clarify what you don’t want to be modified when incorporating new functionality, or what should be tested before applying anything new.

• When making visual changes, be specific about the component you are working on. Don’t just say “The top button“. Clearly say which button you want to work on, where it should go, what it should say, etc. -> Don’t leave anything in the air.

• For example: “Implement a hover state interaction using CSS transitions in the ‘Contact Us’ link element located in the footer. On hover, apply a red underline to the element. The transition duration should be brief (150ms) to feel responsive.”

• Think of your Vibe product as a “being“. Everything is interconnected.

• Keep in mind that using markdown might also help when writing your prompts for the AI.

For example:

Add a dark/light mode toggle to my app.

**Requirements**:
* UI toggle button in the navbar.
* Persist preference across all pages.
* Apply dark classes globally with Tailwind.
* Make sure you do not modify any of the current app functionality apart from the dark/light mode.

---

Debugging

This is where most of us get stuck with Vibe coding tools... In my experience, it is one of the best use cases I’ve seen for Pretty Prompt. It really helped me get out of a never-ending bug loop. Keep reading to find the real use case below.

When it comes to Vibe coding, the main areas for debugging are:

1. Something doesn’t feel right

2. I am stuck in a loop with something not working

3. Need to start from scratch again

When debugging, follow the same structure you would use with a real software engineer:

• Explain what is currently happening

• Explain what should happen

• Explain any issues or specifications to take into account

By putting this information together, you maximize your chances for the AI to “get it” and fix what’s wrong.

Think like you’re talking to an engineering friend.

Bad debugging prompt:

The button doesn’t work. Fix it so people sign up.

Better debugging prompt:

The ‘sign up’ button in the hero section is not working as expected. 

Right now when I click the button, nothing happens. 

**How it should work**:

Users should be able to click the button, and this should trigger a modal appearing in the center of the screen. The modal will contain a form to sign up with the following fields:

* Field 1:___
* Field 2:___
* Field 3:___

Do not show the form until the users have clicked on the “sign up” button. Do not touch any other functionality of the website.

Make sure the form follows the same style and identity from the rest of the website. Once we implement this, we will work on saving the form details on the backend.

Note: Sometimes you end up in a loop with a bug you can’t solve. In these cases, it’s often best to step back and start from scratch or even ask the AI to help you understand what’s happening behind the scenes. This will help tackle the real problem instead of just putting a plaster on it.

Structure

I took some of the best resources online, and tried to make them make sense.

TLDR: If you are generic, expect boring results. 🫠

It might be easy to start with AI, but it’s still hard to build something that stands out and actually works.

To get the top 1% prompts, here’s what worked well for us (please go and try it out!):

For Design prompts → The domino effect framework

1. What you want to build: “What’s the ‘thing’ you are building?” → A SaaS landing page, a design portfolio, a marketplace like Airbnb for office spaces, a boutique wine e-commerce site, etc.

2. The style of what you want to build (the vibe): “How does it look like? What’s the feel or personality of it?” → Bold bright colors in the style of Duolingo, developer-inspired command line aesthetic, Glassmorphism style, etc.

3. The layout of that style: “How is the information and style displayed and organized?” → A bento grid format, single scroll flow, split screen, a magazine or editorial layout, etc.

It’s like a “domino effect” -> One section falls into the next one:

• What’s the function/product?

• How does the product look?

• How is the style displayed?

For example:

• What: a maths learning app called Stemlingo

• Style: Claymorphism, puffy buttons, soft edges, colors inspired by Duolingo (main color: Yellow instead of Green).

• Layout: Bento-grid, to clearly display the different exercises as a menu of options for the user to complete, clearly numbered, so that each exercise unlocks progressively.

Create a mobile application interface for a maths learning app called “Stemlingo.” Use a Bento Grid layout to organize the learning modules as distinct, numbered missions that unlock progressively.

Apply a Claymorphism aesthetic with puffy, soft-edged 3D elements, using a color palette inspired by Duolingo but with a dominant, bright Yellow.

Note: When making changes to the frontend, think in “blocks”. This means the AI will build things in a ‘better’ way for making changes later. All the frontend is, is just a bunch of boxes and components put together and then styled in a specific way.

Building in blocks means you’ll have the power to make magic with these components later.

For example:

Design a **minimalist footer** component for a web application. The aesthetic must be **playful and friendly**, strongly inspired by the visual style of Notion (e.g., clean lines, ample whitespace, subtle interactivity). Add all links on the left side, and include the tagline on the right side of the footer. 

The footer must include the following elements:

1.  **Tagline**: A small, friendly sentence.
    
2.  **Navigation Links**: Explicit links for ‘Contact’ and ‘Privacy Policy’.
    
3.  **Social Media Icons**: Placeholder links for: Twitter, GitHub, LinkedIn.

Implement the following specific design requirements:
*   **Background**: Pure white (`#FFFFFF`).
*   **Iconography**: Use icons that mimic a **hand-drawn or pencil-sketch style**. Ensure they are simple outlines.
*   **Layout**: Maintain generous spacing and simplicity; avoid heavy borders or complex structures.

These are just examples. To stand out in a world where everyone has access to AI, be yourself. Bring your own personality, your vibe. Be daring to bring a style or design format you want, even if it’s something unexpected. Be that black sheep.

For Getting Started → The What, Who, Why framework

For building from scratch, it’s always great to give the AI some background about what you’re building. Explain what it is, who it is for, what it will help them do, and why it is there.

• What: What does the product do? -> Find boutique hotels in South America

• Who: Who is the product for? -> Backpackers/travellers and boutique hotels

• Why: Why is it important? -> To help find the best local experiences (travellers) + driving sales (hotels)

Talk about the flow of the user, how they’ll use the product, and what should happen at each step of the way:

The site should be optimized for travellers inspired by Airbnb’s UI/UX. Travellers should be able to search for boutique hotels by location and date through a search bar at the top, and once they click “Search”, they should be able to select from a series of filters (that work like tags), to better narrow their search. 

In addition they will have an AI option to chat with an “AI assistant”, and in return it will find the available hotels based on their queries. Either way (search + filters or AI chat), users should be able to see the display of available options based on their preferences, or start again if needed.

Don’t just focus on the “look and feel”, think about the functionality. Don’t forget that the computer can’t read your mind, so laying down the steps of what the product is supposed to do, and explaining it from a user perspective, can help a lot.

For example:

I need a **marketplace** desktop app for **boutique hotels**. It helps them **find new customers**, while helping travellers **find the most suitable local hotel** wherever they travel in South America, so that they can **have the best local experience** and hotels can *drive more sales** online.

**Product Description**: 
* *Hotelbnb*

It should have:
* Tech stack: [TECHSTACK REQUIRED]
* Including Frontend, styling, Authorization and Database.

Core features include:
* Listing of hotels by location
* Filters to search for location, number of stars, amenities, availability.
* Log in functionality for both hotel managers and travelers. Each of them with their own view...

**Design Requirements**:
* [Any specific requierements such as colors, scheme, styling, font, type of buttons, similar websites/products as examples]

* [Any specific flow the user needs to follow, that will give context to the Agent on how to build it]

---

Real Example From Pretty Prompt’s Website

2 weeks ago, I was fighting with AI to help me fix our Navbar. I tried for over 2 hours, but nothing. It was not working as expected, and every prompt I gave Cursor, made it worse…

So I went back to the drawing board and wrote what I was trying to achieve, what wasn’t working, and why. I then gave my notes to Pretty Prompt... And boom! Fixed in 10 minutes.

From now on, I’m not making the same mistake again. My new workflow is:

1. Writing down my notes in Notion

2. Improving them with Pretty Prompt into a cohesive prompt

3. Only after giving that to Cursor (or whatever AI I’m using in that moment)

It really works 👌.

My planning notes for the Navbar:

The navbar menu is not working as expected.

The dropdown options from the items in the navbar should only open when the user hovers over the actual word. And the dropdowns should close when the user moves out of it, and not require to click out for it to close.

In addition, we need to make sure that the dropdowns do not open unless the cursor of the user is actually on top of the item of the navbar, not below or besides. Otherwise they don’t work as expected. 

Revise how it is now, to find the best way to make this working as expected.

With Pretty Prompt’s magic

Refactor the navbar dropdown functionality to meet the following requirements:

Interaction:
- Dropdowns should open on hover over the specific navbar item text.
- Dropdowns should close automatically when the cursor moves out of the navbar item or the dropdown itself.
- Ensure dropdowns only trigger when the cursor is directly over the navbar item text, not adjacent areas.

Objective:
Achieve a seamless and intuitive hover based interaction for the navbar menu.

And now it works as expected!

---

Recap

So don’t be like everyone else. Be the top 1% who prompts great, and gets top 1% results.

• Focus on context, ambiguity, and clarity.

Context ⬆️ + Ambiguity ⬇️ = More clarity

• Focus on structure

A better prompt structure will not only help you clarify your request for the AI, but it will also help you understand what you’re asking and organize your thoughts better. This may even help you spot things you might have missed at first.

So better prompting = better thought structure.

• Think of building as a video game.

Building a product doesn’t happen in just one prompt, just as you don’t win a game in just one level. You learn more about the product you are building as you build the product. Though certainly you can get further, and save money with better prompting.

10 quick prompt hacks:

1. Specify the component/type of product you are talking about

2. Explain who it is for and why it helps

3. Define a visual style or aesthetic early in your prompt

4. Give references and examples

5. Add the layout you want to see

6. Combine extremes to stand out

7. Write like you are writing to an engineering partner

8. Use ‘Vibe’ words or ‘buzzwords’ for visual specifications

9. Think of your website/product as a series of blocks (just like building with Lego bricks)

10. Break down your thoughts into clear tasks to have clarity on what you are asking

Feel free to give Pretty Prompt a go! Any thoughts, hit me up on LinkedIn!

---