Complete Lovable Programming Cue Word Design Guidelines and Best Practices

utilization Lovable Conduct a prompt design, strategy and methodology checklist.

To help you get the most out of Lovable, we've compiled a list of tip design strategies and approaches. These strategies are partially derived from our team's experience and partially shared by community members.

What is cue design? Prompt design refers to the text-based natural language input used to interact with Lovable. Think of it as a message containing instructions that you give to Lovable.

Since Lovable relies on Large Language Models (LLMs), an effective hint design strategy can significantly improve its efficiency and accuracy. Also recommended reading Analyze bolt.new system hints words, generate front-end code hints tips are here! The

basics

Prompts are the primary way to interact with Lovable applications:

1. welcome screen: Start with pre-built prompts or create your own.
2. Builder User Interface: Iterate quickly using a chat-based interface.

Prompts are at the heart of all interactions.

Cue Design Strategy

These strategies can often be used in combination, depending on your use case. Feel free to experiment with these strategies to find out what works best for you. While Lovable itself can accomplish many tasks with very basic and generic tips, using these strategies can help you get better results.

Scenario-based cue design

Providing contextual information helps Lovable understand the overall scope of your needs. Contextual information can be used to set up specific tasks before they are requested.

Setting Context

We are building a project management tool to help teams track tasks.
The tool should have the following features:
- User authentication
- Project creation
- Task assignment
- Reporting functionality
Now, the first task is to create the user interface for project creation.

Another example:

I need a CRM application with Supabase integration and secure authentication process. First setup the backend.

Another example:

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

Progressive cue design

Our experience has shown that it is more effective to make small incremental changes than to give a huge hint and expect the AI to handle it completely.

Don't do it.::

Build a CRM application with Supabase, authentication, Google Sheets export and data enhancements.

Recommended.::

1. Set up a CRM backend to connect to Supabase. 2.
2. Add a secure authentication process with user roles. 3.
3. Integrate Google Sheets for exporting records.

Another example:

1. set up the database structure for user information.
2. Develop an API endpoint for retrieving user data.

Using Image Cues

We recently added support for users to upload an image with a prompt and ask Lovable to build a solution based on the image.

There are two main methods here. The first is the simple tip method.

Simple image upload tips

You can upload an image and add the following sample tip:

Create and implement a user interface that is as similar as possible to the attached image.

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

Or, you can help the AI better understand the content of the image and the specific information attached to it.

Image prompts with detailed instructions Excellent results can be obtained by adding specific instructions to an uploaded image. While a picture is worth a thousand words, it is especially important to add some text describing the desired functionality, as interactive information is not always obvious in static images.

I would like you to create an application as similar as possible to the one in the screenshot.
It is essentially a Kanban clone.
It should have the ability to add new cards (tasks) to each column, change the order of those cards within a single column, and even move them between columns.
Drag and drop functionality can be implemented using the Pangea home dnd npm package.

Feedback integration

Review the output of the AI and provide specific feedback for improvement.

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

Avoiding ambiguity

Make sure your prompts are clear and free of ambiguity. Avoid vague terms and be as specific as possible in describing your needs.

Don't do it.::

Make this app better.

do sth. like this::

Refactor the app to clean up unused components and improve performance, but do not change the UI or functionality.

Another example:

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

Non-specific tips

Avoid non-specific and broad prompts

Create a form for user input

Adding constraints

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

Adding constraints

Create a simple to-do list app that displays up to 3 tasks at once.
Includes the ability to add, edit and delete tasks.

Optimize this code, but make sure the UI and core functionality remain the same. Document each change.

Advanced Cue Design Strategies

Emphasizing accessibility

Encourage the generation of code that conforms 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 an accessibility best practice compliant React Login form components, including appropriate ARIA labels and keyboard navigation support.

Use of predefined components and libraries

Specify the use of certain UI libraries or components to maintain project consistency and efficiency. This directs AI to use specific tools to ensure the application has compatibility and a uniform design language.

Create a responsive navigation bar using the shadcn/ui library and style it with Tailwind CSS.

Realizing Chain Thinking (CoT) Tips

For complex tasks, AI is encouraged to approach the problem in steps before providing a solution. This approach helps break down complex tasks to generate more accurate and comprehensive solutions.

Let's think step by step about how to set up a secure authentication system:
1. what are the necessary components needed?
2. how should they interact?
3. provide implementation code.

Multi-language tips

Specify the target language for code comments and documentation when working in a multilingual environment. This ensures that the generated content is accessible to team members who speak different languages and improves collaboration.

Generates a Python script that computes the Fibonacci series. Provides comments and documentation in French.

Define project structure and document management

Clarify the project structure, including file names and paths, to ensure that the generated code is well organized and easy to maintain. This provides clear guidance on where new components should be stored in the project to maintain consistent file organization.

Create a new React component called 'UserProfile' and save it as 'components/user-profile.tsx'. Make sure it includes a personal avatar, username and profile section.

Debugging and Problem Reporting

Debugging Instructions

Follow the steps below to perform systematic commissioning:

• task recognition: List and prioritize all tasks.
• internal audit: Validate your solution internally before submitting it.
• reporting: Confirmation of each completed task through clear, verifiable results.
• DOM Validation: Ensure that changes are rendered correctly in the DOM. Provide DOM tags or feedback for validation.
• clear-cut issue: Clarify any uncertainties before proceeding.
• Error handling and logging: Use robust error handling and detailed console.log.. Never delete logs before going live.
• Debugging Tool Management: Implement a global switch to disable debugging tools in the production environment.
• Breakpoint Implementation: Add breakpoints to isolate GPT-related errors.
• third-party package: Check for reusable libraries before writing new code.
• Utilization of existing systems: Build on existing functionality to ensure consistency.
• Code review: Performs detailed analysis, documents problems, and plans solutions before modifications are made.

debugging process

Systematize the debugging steps:

1. Add failed test cases.
2. Isolate problems and analyze dependencies.
3. Record findings before applying fixes.

This is the console log of the failure. Analyze test cases, investigate errors in the authentication process, and propose solutions after understanding dependencies.

Systematic feedback

When reporting an error or requesting a change:

1. descriptivecurrent behaviorand issues.
2. summarizeExpected behaviorThe
3. Add specific constraints.

Webhook integration occasionally fails. Investigate why the JWT authentication switch causes this issue and propose a solution.

Be specific when fixing problems

Problems happen, sometimes builds fail and the resulting application may be different than expected. Effective hints can help you get back on track. Again, specificity is crucial.

Avoid generic or very generalized prompts

Nothing works, fix it!

Instead, be more specific and detailed.

Make your tips more detailed and clear

Now the screen goes blank, before I was able to edit.
Can you check what happened?

Reporting Bugs Using the Developer Console

If you're more tech-savvy and have a problem, pasting the error logged in the browser console could be very helpful.

Normally, you would open the Developer Tools and navigate to the console. If any errors or notifications are visible, you can copy and paste them as tips.

Using developer tools and console logs

My app no longer works and the screen is blank.
This was copied and pasted from the developer tools console, can you fix this?
An error occurred:
TypeError: Q9() is undefined at https://example.lovable.app/assets/index-DWQbrtrQQj.js
: 435 : 39117 index-DWQbrtrQQQj.js:435:35112
onerror https://example.lovable.app/assets/index-DWQbrtrQQj.js:435

Practical debugging example

An actual debugging process in Lovable might look like this:

Step 1::

View the error log from the console. Determine the root cause in the authentication process.

Step 2::

Now isolate the failed tests and analyze which dependencies went wrong.

Step 3::

Propose a permanent solution after testing a certified fix in an isolated environment.

Lovable Prompts

To boost your productivity, we've added some cute tips dedicated to common scenarios.

Collaboration and Process Tips

For teamwork or debugging:

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

error debugging

Minor mistake:

The same error persists. Do not change the code for now - a thorough investigation is needed to find the exact root cause. Analyze the logs, processes and dependencies in depth and come up with a solution only after you fully understand the problem.

Persistence Error:

The error remains unresolved. Stop the operation and be sure to find the exact root cause with 100% certainty-don't guess or assume. Analyze every aspect of the process and dependencies in detail and ensure that no changes are made until they are fully understood.

Major mistake:

This is the last attempt to resolve this issue. Stop all changes and systematically re-examine the entire process - Authentication, Supabase, Stripe, Status Management, and Redirection - and comb through it from scratch. Find out what's wrong and why, test each part individually, and don't continue until you're absolutely sure.

Clean up the console log:

Carefully remove unnecessary console.log statements without compromising functionality or design. Examine each log to ensure it is non-critical and record logs that require alternative processing. Approach operations methodically and test thoroughly to confirm the integrity of the application.

reconstruct

Cute tips for post-request refactoring:

Refactor this file while making sure not to change the UI or functionality - everything must behave and look exactly the same. Focus only on improving code structure and maintainability. Document current functionality to ensure it is tested and step-by-step to avoid risks or regressions.

devise

UI changes:

Visual updates only - don't impact functionality or logic in any way. Fully understand how the current UI integrates with the application, ensuring that the logic, state management, and APIs remain the same. Test thoroughly to confirm that the application behavior is exactly the same as before.

Mobile Optimization:

Optimize the mobile experience of the application without changing design or functionality. Analyze layout and responsiveness to determine adjustments needed for small screens and touch interactions. Create a detailed plan and test thoroughly on a variety of devices before editing any code to ensure that the app's behavior is consistent with the current one.

Modify existing features:

Change this functionality but do not impact core functionality, other functionality or processes. Analyze its behavior and dependencies to understand the risks and communicate any concerns before proceeding. Test thoroughly to confirm there are no regressions or unintended impacts.

Sensitivity Updates:

This update is very sensitive and requires extreme precision. Thoroughly analyze all dependencies and impacts before making changes, and test in a systematic way to ensure there are no issues. Avoid shortcuts or assumptions - if unsure, pause and seek clarification.

Pre-implementation tips

before implementing major changes:

Plan the API flow for this feature. Include endpoints, parameters, and how to connect to the database.

Experimenting with Chat Mode

Chat Mode is an experimental feature that allows you to switch how you interact with Lovable. The chat modes we've introduced include:

1. Default mode: chat and edit your project.
2. Chat only mode: chat only, no editing of your project.

We may introduce more chat modes in the future, or remove them to experiment with different ways of interacting with Lovable.

reach a verdict

When you combine incremental prompts, contextual commands, and newly introduced Lovable Prompts When combined, Lovable's hints are even more powerful. Try, iterate, and utilize these practices to streamline workflows, debug efficiently, and build reliable applications.