Prompting best practices

1. 1

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

   Clear thinking upfront helps Lovable create exactly what you envision, avoiding vague results.

2. 2

   Map out the steps a user takes through your app, from start to finishing a key action.

   This helps you think about how different parts of your app connect, not just individual screens.

3. 3

   Decide on the overall look and feel you want (e.g., 'calm and elegant' or 'bold and disruptive') and include these style words in your initial prompts.

   Setting the visual style early ensures your app looks consistent and prevents bigger design fixes later.

4. 4

   Ask Lovable to clarify what it needs to know by adding 'Ask me any questions you need in order to fully understand what I want from this feature and how I envision it.' to your prompt.

   This helps Lovable ask important questions you might not have considered, leading to better results and less rework.

5. 5

   Build your app piece by piece, like a hero section, a feature grid, or a menu bar, rather than trying to create a whole page at once.

   This gives you more control, makes it easier to fix problems, and allows you to reuse parts.

6. 6

   Use actual words and sentences for headlines, buttons, and descriptions, even if they're not final.

   Real content helps Lovable create better layouts and spacing, revealing design issues early.

7. 7

   Use specific terms for small parts of the user interface, like 'button,' 'card,' or 'modal,' instead of general terms.

   Being precise helps Lovable understand exactly what you want and build it accurately.

8. 8

   Use design buzzwords like 'minimal,' 'expressive,' or 'cinematic' to describe the visual style you want.

   These words significantly influence the typography, spacing, colors, and overall feel of your design.

9. 9

   Use structured prompt patterns for common layouts, like a 'feature section with a centered headline, followed by three horizontally aligned cards.'

   This makes your prompts clearer and more effective, leading to predictable and desired results.

10. 10

    If you have a video, include its URL in your prompt and tell Lovable where and how to display it.

    This allows you to add real visual content to your app directly through prompting.

11. 11

    When asking for a change, clearly state what to modify, where it should go, and what parts of the app should remain untouched.

    This prevents unintended changes to other working parts of your app.

12. 12

    When a small change is needed, use the preview toolbar to select the exact part of your app and describe the change directly.

    This is more precise than rewriting a full prompt and helps avoid breaking other elements.

13. 13

    Think about how your app will work with a backend, considering what happens when a user logs in or out, or when data is loaded.

    Designing with these real-world scenarios in mind helps create a functional and future-proof app.

14. 14

    Make one meaningful change at a time, and bookmark important versions of your app in the history.

    This helps you manage your progress, easily revert to a good state if needed, and build your app systematically.

I need to build a new feature. First, I'll define what it is, who it's for, and its main purpose. Then, I'll map out the user's journey. I'll decide on a visual style, like 'calm and elegant,' and include those buzzwords in my prompts. For each part of the feature, I'll ask Lovable to clarify any questions it has. I'll build it component by component, using real content and specific terms for UI elements. When making changes, I'll clearly state what to change and what to leave alone. I'll also consider how it integrates with user logins and data. I'll make sure to bookmark important versions as I go.

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'.

Glassmorphism

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

Atomic vocabulary

Using very specific, small terms for user interface parts, like 'button' or 'card', instead of general descriptions.

Backend

The part of an app that users don't see, which handles things like storing data, user accounts, and behind-the-scenes calculations.

Auth logic

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

Dynamic content

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

Edge functions

Small pieces of code that run very close to the user, making apps faster and more responsive.

• Starting to prompt without a clear idea of what you want to build.
• Trying to build an entire page at once instead of breaking it into smaller parts.
• Using placeholder text like 'lorem ipsum' instead of real content, which can lead to poor layouts.
• Not specifying the visual style or tone, resulting in a generic or inconsistent look.
• Making changes without clearly defining what should be changed and what should be left alone, leading to unintended modifications.
• Ignoring how the app will actually work with user logins or data, which can lead to designs that don't function well.