AI Programming: How to Use Lovable Well

My best AI programming partner at the moment is Lovable cap (a poem) Cursor . bolt.new and windsurf, both great too, chose the first two because the cap was high enough.

Lovable's Web site:

https://lovable.dev/

Lovable. Probably not. bolt.new has a name and I recommend everyone to try it, especially those who don't know how to code. I just looked and I've created a total of 40 projects with lovable.

The bulk of today's post comes from X and Lovable's documentation on best practices for Lovable's Prompt, with my musings thrown in for good measure. If you want to read the original article directly, it's here:

https://x.com/lovable_dev/status/1873078129469821044

The main text begins.

Using Context

Providing more background information is necessary. Example:

We are building a project management tool that helps teams track tasks.

The tool should have the following features:

• user authentication
• Project Creation
• task sth.
• Report Generation

Now, the first task is to create the user interface created by the project.

It's kind of like .cursorrules here, to give context to what I'm trying to do. But don't forget the clarity at the end, what the first task is, which will be covered later, it's about taking it one step at a time and not letting the AI deviate too much from our expectations. Another example.

I need a CRM (Customer Relationship Management) application that integrates with Supabase and has a secure authentication process. Start by building the backend.

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

There is a contextualization of the information, and then a clarification of the specific tasks.

Breakdown of tasks

One of the requirements that many people give when they try AI programming is: develop a weather forecasting app, develop a 2048 game. This is also yes, we start with this and get stunning results.

But let's start the real work without letting the AI guess what we need.

Contrast:

Don't be like that:

Build a CRM system with all the features

like this:

1. "Setting up the backend"

2. "Add authentication process"

3. "Add export function"

This is very important, including the later "complex function planning" and "debugging process" are the decomposition of the task:

Complex Functional Planning

Break down the thinking: let's plan for certification:

1. Required components
2. user interface
3. security measure

Debugging process:

Follow this structure:

1. Describe what went wrong
2. Explaining expected behavior
3. Share Console Error

Using Images

This is an important tip, we can upload screenshots, especially for users who do not know how to program, and can not "accurately describe" when, what do you mean by "accurately describe"? For example, the layout of a web page, there is a navigation bar, a header, a footer, these are the basics, and there are more complex specialized terms.

Even better is to learn how to describe it - it's not hard. The next best thing is to give direct reference pictures, for example:

Make this Kanban board that supports drag and drop between columns. Use Pangea dnd to realize the movement of cards between columns.

Screenshots are left to your imagination. Here's a strange term: pangea dnd. it's a very professional way of presenting a requirement that not only poses a problem, but also points in the direction of a solution. Programming is a business that has accumulated a lot of best practices over the years. It doesn't matter if you don't know how to program, you can know what some of the vocabulary means. This is very helpful when programming AI.

For example, in my case, Bauhaus, Memphis, Mondrian, I have not paid attention before, after using AI to help me work, I need to give clear instructions to TA, I need to do some learning. For every specialty, there is a system of concepts that can be figured out first, by following the cat.

Another trick here is that often the AI knows more and deeper than we do, and if we don't know how to ask, we can ask the AI. the AI gives the answer, and we have a clearer direction for learning.

Effective feedback

When we made the demand.Instead of saying, "Make it better," say, "The login form works, but needs email verification and a better error message if the passwords don't match."

Essentially, it's still about how to give the AI clearer feedback. When we communicate with the model, we can be abstract to abstract, concrete to concrete. There are times when you really don't know what to ask, you can say let's make the interaction better, let's make the visual better, but at this time, it's important to once again clarify the context of what we're doing, and through the context of the keywords, the model can correlate out to at least an above average level, and presumably we know the direction.

Setting Constraints & UI Updates

Defining Clear Boundaries:"Create a to-do list application that is limited to displaying only 3 visible tasks. Include add/edit/delete functionality while maintaining our current design system."

Another example:"Only the visual design has been updated. Keep all features and API calls the same. Focus on improving the mobile layout."While emphasizing visual improvements, it is necessary to clarify what does not need to be changed. And so on.

Accessibility requirements

Specify the need:"Generate a login form with ARIA tags, keyboard navigation and proper focus management" - It can also require that we have some knowledge of this. Knowing is fine, the difference is knowing or not knowing.

In the age of AI programming, curiosity, inquisitiveness has to be a bit more important, knowing or not knowing is sometimes the difference.

Dao in the shit drowning, work with AI is simple, I originally wanted to write these abilities fancy, as if I am more than capable, but as I use more, the more I experience, I think it's good to keep it simple, present it as it is, and be helpful to everyone.

You don't have to expect Lovable to do all the work. When you've tried the above and Lovable doesn't seem to be able to improve, Cursor comes in.