To help you make the most out of Lovable, we compiled a list of prompting strategies and approaches. Some of these were collected from our team’s experience, and others were shared with us by our community members.

What is prompting? Prompting is the term for textual, natural language inputs used to interact with Lovable. You can think of it as messages containing instructions you give to Lovable.

Since Lovable relies on large language models (LLMs), effective prompting strategies can significantly improve its efficiency and accuracy.

​
Basics

Prompts are the primary way to interact with Lovable app:

  1. Welcome Screen: Start with prebuilt prompts or create your own.

  2. Builder UI: Use the chat-based interface to iterate quickly.

Prompts serve as the backbone of all interactions.

​
Prompting strategies

These strategies will often work combined, depending on your specific use cases. Feel free to experiment with them and see which ones give the best results. While Lovable on its own can do a lot even from a very basic and generic prompt, using some of these strategies can help you achieve even better results.

​
Contextual prompting

Providing context can help Lovable understand the broader scope of your requirements. Before asking for specific tasks, you can set the stage with background information.

Setting the context

We are building a project management tool that helps teams track their tasks.
This tool should have features like:
 - user authentication
 - project creation
 - task assignments
 - reporting

Now, for the first task, create the UI for project creation.

Another example:

I need a CRM app with Supabase integration and a secure auth flow. Start by setting up the backend.

Another example:

We are developing an e-commerce platform focusing on eco-friendly products. Generate a product listing page with filters for category and price.

​
Incremental prompting

Our experience has shown that making incremental, smaller changes will yield better results than dumping a huge prompt and expecting AI to handle it well.

DON’T: 

Build a CRM app with Supabase, auth, Google Sheets export, and data enrichment.

DO:


1. Set up a Supabase-connected CRM backend.

2. Add a secure auth flow with user roles.

3. Integrate Google Sheets to export records.

Another example:

1. Set up a database schema for user information.
2. Develop an API endpoint to retrieve user data.

​
Using image prompts

Recently we added support where users can upload images with their prompts and ask Lovable to build a solution based on it.

There are two main approaches here. The first one is a simple prompting approach.

Simple image upload prompting

You can upload an image and then add an example prompt like this:

Create and implement a UI that looks as similar as possible to the image attached.

This screenshot shows a layout issue on mobile. Adjust margins and padding to make it responsive while keeping the same design structure.

Or, you can help AI better understand the content of the image and some additional specifics about it.

Image prompting with detailed instructions Excellent results can be achieved by adding specific instructions to the image uploaded. While the image is worth a thousand words, adding a couple of your own to describe desired functionality can go a long way - especially since interactions cannot always be obvious from a static image.

I want you to create the app as similar as possible to the one shown in this screenshot.
It's essentially a kanban clone.
It should have the ability to add new cards (tickets) in each column, have the ability to change the order of those tickets within a single column, and even move those cards between columns.
Feel free to use the Pangea home dnd npm package for drag-and-drop functionality.

​
Feedback integration

Review the AI’s output and provide specific feedback for refinements.

The login form looks good, but please add validation for the email field to ensure it contains a valid email address.

​
Avoid ambiguity

Ensure your prompts are clear and unambiguous. Avoid vague terms and be as specific as possible about what you need.

DON’T: 

Make this app better.

DO: 

Refactor the app to clean up unused components and improve performance, without changing UI or functionality.

Another example:

Create a user registration form with fields for username, email, and password.

Unspecific prompt

Avoid unspecific and broad prompts

Create a form for user input

​
Add constraints

Sometimes, adding constraints can help focus the AI on what’s important and avoid unnecessary complexity.

Adding constraints

Create a simple to-do app with a maximum of 3 tasks visible at a time.
Include the ability to add, edit, and delete tasks.

Optimize this code, but ensure the UI and core functionality remain unchanged. Document each change you make.

​
Advanced Prompting Strategies

​
Emphasizing Accessibility

Encourage the generation of code that adheres to accessibility standards and modern best practices. This ensures that the output is not only functional but also user-friendly and compliant with accessibility guidelines.

Generate a React component for a login form that follows accessibility best practices, including appropriate ARIA labels and keyboard navigation support.

​
Predefined Components and Libraries

Specify the use of certain UI libraries or components to maintain consistency and efficiency in your project. This directs the AI to utilize specific tools, ensuring compatibility and a uniform design language across your application.

Create a responsive navigation bar using the shadcn/ui library with Tailwind CSS for styling.

​
Implementing Chain of Thought (CoT) Prompts

For complex tasks, encourage the AI to process the problem step by step before providing a solution. This methodical approach helps in breaking down intricate tasks, leading to more accurate and comprehensive solutions.

Let's think through the process of setting up a secure authentication system:
1. What are the necessary components?
2. How should they interact?
3. Provide the implementation code.

​
Multilingual Prompting

When working in a multilingual environment, specify the desired language for both code comments and documentation. This ensures that the generated content is accessible to team members who speak different languages, enhancing collaboration.

Generate a Python script that calculates the Fibonacci sequence. Provide comments and documentation in French.

​
Defining Project Structure and File Management

Clearly outline the project structure, including file names and paths, to ensure organized and maintainable code generation. This provides clarity on where new components should reside within the project, maintaining a coherent file organization.

Create a new React component named 'UserProfile' and save it as 'components/user-profile.tsx'. Ensure it includes a profile picture, username, and bio section.

​
Debugging and Issue Reporting

​
Debugging Instructions

Follow these steps for systematic debugging:

  • Task Identification: List and prioritize all tasks.

  • Internal Review: Verify your solution internally before submission.

  • Reporting: Confirm each completed task with clear, verifiable results.

  • DOM Validation: Ensure changes render in the DOM. Provide DOM tags or feedback for verification.

  • Qualifying Questions: Clarify any uncertainties before proceeding.

  • Error Handling and Logging: Use robust error handling and verbose console.log. Never remove logs until production.

  • Debug Tools Management: Implement a global switch to disable tools in production.

  • Breakpoint Implementation: Add breakpoints for isolating GPT-related bugs.

  • Third-Party Packages: Check for reusable libraries before writing new code.

  • Leveraging Existing Systems: Build on pre-existing features to ensure consistency.

  • Code Audit: Perform a detailed analysis, document issues, and plan a solution before making changes.

​
Debugging Flow

To debug systematically:

  1. Add failing test cases.

  2. Isolate the problem and analyze dependencies.

  3. Document findings before applying fixes.

Here's the failing console log. Analyze the test case, investigate the error in auth flow, and suggest a solution after understanding the dependencies.

​
Systematic Feedback

When reporting bugs or requesting changes:

  1. Describe the current behavior and issue.

  2. Outline the expected behavior.

  3. Add specific constraints.

The webhook integration fails intermittently. Investigate why JWT verification toggles cause this and propose a fix.

​
Be specific when correcting issues

Issues will happen, sometimes builds will fail and the app that was generated will not look exactly as you wanted it. Effective prompting can help you get back on track. Again, it’s important to be specific.

Avoid generic and very broad prompts

Nothing works, fix it!

Instead, be more specific.

Make your prompts more detailed and specific

Now the screen has gone blank and previously I was able to make edits.
Can you check what happened?

​
Using Dev console for reporting bugs

If you are more technical and an issue has happened, then pasting an error logged in the browser’s Console can be very helpful.

Typically, you’ll open the Dev tools and navigate to Console. If there are any errors or notifications visible, you can copy and paste them as a prompt.

Using Dev tools and console logs

My app is not working anymore and the screen is blank.
Here's the copy/paste from Dev tools console, can you fix the issue?

Error occurred:
TypeError: Q9() is undefined  at https://example.lovable.app/assets/index-DWQbrtrQQj.js
: 435 : 39117 index-DWQbrtrQQj.js:435:35112
onerror https://example.lovable.app/assets/index-DWQbrtrQQj.js:435

​
Practical Debugging Example

A real-world step-by-step debugging flow in Lovable might look like this:

Step 1: 

Review this error log from the console. Identify the root cause in the auth flow.

Step 2: 

Now isolate the failing test and analyze what dependencies are breaking.

Step 3: 

Suggest a permanent solution after testing the auth fix in isolation.

​
Lovable Prompts

To enhance your productivity, we’ve added specific Lovable Prompts for common scenarios:

​
Collaboration and Process Prompts

For working collaboratively or debugging with a team:

Review this GitHub project structure. Evaluate the flow, dependencies, and suggest improvements for scalability.

​
Error Debugging

Minor Errors:

The same error persists. Do not make any code changes yet—investigate thoroughly to find the exact root cause. Analyze logs, flow, and dependencies deeply, and propose solutions only once you fully understand the issue.

Persistent Errors:

The error is still unresolved. Stop and identify the exact root cause with 100% certainty—no guesses or assumptions. Analyze every aspect of the flow and dependencies in detail, and ensure full understanding before making any changes.

Major Errors:

This is the final attempt to fix this issue. Stop all changes and methodically re-examine the entire flow—auth, Supabase, Stripe, state management, and redirects—from the ground up. Map out what’s breaking and why, test everything in isolation, and do not proceed without absolute certainty.

Clean up Console Logs:

Carefully remove unnecessary console.log statements without affecting functionality or design. Review each log to ensure it’s non-critical, and document any that need alternative handling. Proceed methodically, testing thoroughly to confirm the app remains intact.

​
Refactoring

Refactoring After Request Made by Lovable:

Refactor this file without changing the UI or functionality—everything must behave and look exactly the same. Focus on improving code structure and maintainability only. Document the current functionality, ensure testing is in place, and proceed incrementally with no risks or regressions.

​
Design

UI Changes:

Make only visual updates—do not impact functionality or logic in any way. Fully understand how the current UI integrates with the app, ensuring logic, state management, and APIs remain untouched. Test thoroughly to confirm the app behaves exactly as before.

Optimize for Mobile:

Optimize the app for mobile without changing its design or functionality. Analyze the layout and responsiveness to identify necessary adjustments for smaller screens and touch interactions. Outline a detailed plan before editing any code, and test thoroughly across devices to ensure the app behaves exactly as it does now.

Modifying an Existing Feature:

Make changes to the feature without impacting core functionality, other features, or flows. Analyze its behavior and dependencies to understand risks, and communicate any concerns before proceeding. Test thoroughly to confirm no regressions or unintended effects.

Fragile Update:

This update is highly sensitive and demands extreme precision. Thoroughly analyze all dependencies and impacts before making changes, and test methodically to ensure nothing breaks. Avoid shortcuts or assumptions—pause and seek clarification if uncertain.

​
Pre-Implementation Prompts

Before implementing significant changes:

Plan out the API flow for this feature. Include endpoints, parameters, and how it connects with the database.

​
Experiment with chat modes

Chat modes are an experimental feature which allow you to switch how you interact with Lovable. We shipped Chat modes with:

  1. Default: Chat and make edits to your project.

  2. Chat only: Chat without making edits to your project.

We may ship extra chat modes in the future, or remove them altogether as we experiment with different ways of interacting with Lovable.

​
Conclusion

Prompting in Lovable becomes more powerful when you combine strategies like incremental prompting, contextual instructions, and the newly introduced Lovable Prompts. Experiment, iterate, and leverage these practices to streamline your workflows, debug effectively, and build robust applications.


Step-by-step tutorialDeploy and share