Prompting best practices

1. 1

   Before you start, decide what your product or feature is, who it's for, why they'll use it, and the main action you want users to take.

   Planning helps you set a clear direction, so Lovable can give you clear and useful results instead of vague ones.

2. 2

   Map out the journey a user takes through your app, from when they first see it to when they complete a key action.

   Thinking about how users move between screens helps you design a logical flow, making your prompts much more effective.

3. 3

   Choose a visual style (like 'calm and elegant' or 'bold and disruptive') and include descriptive words about it in your initial prompts.

   Setting the look and feel early on ensures your interface functions well and also looks exactly how you want it to, avoiding bigger design fixes later.

4. 4

   Build your app by creating one small section or 'component' at a time, like a hero section or a pricing table.

   Working on smaller pieces gives you more control, makes it easier to fix things, and allows you to reuse parts across your app.

5. 5

   Use actual words and sentences for your content, even if it's just a draft, instead of placeholder text like 'lorem ipsum'.

   Real content helps Lovable create better layouts and spacing, and reveals design issues earlier that placeholder text would hide.

6. 6

   Use specific terms for small user interface parts like 'buttons', 'cards', or 'modals' in your prompts.

   Being precise about these small elements helps Lovable understand exactly what you want, leading to more accurate and detailed designs.

7. 7

   Use descriptive design words like 'minimal', 'expressive', or 'premium' in your prompts.

   These words help Lovable understand the overall mood and style you're aiming for, influencing colors, fonts, and spacing to avoid a generic look.

8. 8

   Create structured, repeatable patterns for common layouts, like a headline followed by three cards, and reuse them.

   Using consistent patterns makes your prompts easier to write and helps Lovable produce predictable and effective layouts.

9. 9

   Include links to videos or images in your prompts if you want them to appear in your layout.

   Adding real visual content makes your layout feel more complete and helps you specify exactly where and how media should be displayed.

10. 10

    When you need to change something specific, use the 'preview toolbar' to select that exact part and then describe the change.

    Pointing directly to an element ensures only that part is changed, preventing accidental alterations to other working parts of your design.

11. 11

    Think about how your app will work with a backend, considering things like user logins or dynamic content, even if the backend isn't built yet.

    Designing with future functionality in mind helps Lovable create a user interface that's ready to connect to real data and user actions, making your app more robust.

12. 12

    Make one meaningful change at a time, check the result, and then move on; bookmark important versions of your project.

    Working step-by-step and saving good versions allows you to iterate safely, experiment with changes, and easily go back if something doesn't work out.

Ask me any questions you need in order to fully understand what I want from this feature and how I envision it.

UI

User Interface; this is everything you see and interact with on a screen, like buttons, text, and images.

CTA

Call to Action; this is a button or link that tells the user what to do next, like 'Sign Up' or 'Buy Now'.

Component

A small, reusable piece of the user interface, like a button, a navigation bar, or a section showing a product.

Glassmorphism

A design style that makes elements look like frosted glass, often with a blurred background and subtle shadows.

Atomic vocabulary

Using very specific, small terms to describe individual parts of a user interface, like 'button' instead of 'user interface element'.

Backend

The part of an app that users don't see, which handles things like storing data, user accounts, and running calculations on a server.

Auth logic

The rules and processes that determine if a user is allowed to access certain parts of an app, usually involving logging in or signing up.

Dynamic content

Information that changes based on user actions, time, or data from a database, rather than being fixed.

Edge functions

Small pieces of code that run very close to the user, often at the edge of a network, to make apps faster and more responsive.

Toast

A small, temporary pop-up message that appears on the screen to give feedback, like 'Item added to cart'.

• Starting to prompt without a clear plan can lead to vague and unhelpful results.
• Trying to build an entire page at once instead of breaking it into smaller, manageable components can make changes difficult.
• Using placeholder text like 'lorem ipsum' instead of real content can hide design problems and lead to less effective layouts.
• Not being specific enough when describing UI elements can result in Lovable creating something different from your intention.
• Ignoring the visual style and buzzwords in your prompts can lead to generic-looking designs.
• Making many changes at once without checking results or bookmarking milestones can make it hard to revert to a good state if something goes wrong.