Lovable is different from the other AI tools people use to build websites. You do not open a folder, run a terminal or install anything. You describe what you want in a chat, and Lovable creates the project, hosts it and shows you a live preview in your browser as it works.

That makes it appealing if you have never set up a development environment. It also changes how you should use Weblisy. This guide explains what fits Lovable well, what does not, and a workflow that gets good results.

First, an honest note about templates

Weblisy templates are Astro projects that you download and open as a folder. Lovable works with its own project, typically a React app that it generates and manages for you. Because of that, a downloaded Astro template is not a drop-in fit for Lovable.

That does not mean templates are useless here. They are a very good visual reference: open a template’s live preview, see how it is laid out and use it to describe the design you want. The tool that fits Lovable best is the component prompt, which describes one section in enough detail for Lovable to recreate it in its own project.

If you want to start from a full template that you can edit locally, use one of the tools that work with project folders instead, such as Claude Code or Cursor.

Step 1: Write a short brief first

Before you paste any component prompt, tell Lovable what the site is. A few sentences are enough:

I'm building a one-page website for a small online yoga studio called Stillwater. The tone is calm and friendly. Use a dark, minimal style with plenty of white space. Start with an empty page structure and a header; I will add the sections one at a time.

Two ideas matter here. You name the purpose and tone, so later sections stay consistent. And you say the sections will arrive one at a time, so Lovable does not fill the page with invented content you will have to delete.

Step 2: Pick a design from the catalog

Browse the component catalog and open the live previews. Choose the sections you want: a hero, a features block, a pricing table, a FAQ. Look at them at desktop and mobile widths, because the prompt describes both.

If you like the style of a full template, open its preview as well and take a screenshot. Lovable accepts images, so you can attach the screenshot and ask it to follow the layout.

Step 3: Paste one prompt at a time

Copy a prompt from the catalog and add context around it:

Add the section described below to my home page, after the header. Recreate it exactly as specified, but adapt the styling to this project's existing setup. Reuse my current fonts and colors, keep every link as a placeholder (#), and do not change other sections.

[Paste the component prompt here]

The line that matters most is “adapt the styling to this project’s existing setup.” Weblisy prompts describe sections with exact CSS values: spacing, sizes, easing and breakpoints. Lovable projects often use their own styling system, so you want it to recreate the visual result, not copy the CSS word for word.

One section per message is a good rule. Lovable usage is metered by plan, and large requests use more of it. A single section is also much easier to fix when something is off.

Step 4: Check every width

Use the preview to look at the page at desktop, tablet and phone sizes. Prompts include the breakpoints, so this is the place where a result most often differs from the original.

When something is wrong, quote the prompt back:

On mobile, the cards should stack in one column with 0.75rem between them, as described in the prompt. Right now they are in two columns. Fix only that.

Specific feedback gets a precise fix. A message like “it looks off on mobile” usually does not.

Step 5: Keep the brand consistent

After three or four sections, small differences start to appear: a slightly different heading size, a new shade of gray. Prevent it by repeating a short brand reminder at the start of each prompt:

Brand rules: dark background, white headings, gray body text, one accent color, rounded corners. Keep these across all sections.

If your plan offers project-level instructions, you can store the same text there once.

Step 6: Fix what is left in plain language

Once the sections are in place, finish with short, specific requests: replace the text with your real copy, swap the images with their URLs and adjust the spacing between sections. Keep each request to one change, and check the preview each time.

What to expect

  • The code can differ from the original markup. Lovable generates and edits its own project, so the result can look the same while the code is different. Treat the live preview as the source of truth.
  • A perfect copy is not guaranteed. Results get very close with detailed prompts, but you may need two or three small fixes per section.
  • Motion can need extra attention. Animations and scroll effects depend on JavaScript, so check them in the preview and ask for corrections if they do not match.

Connecting Weblisy to Lovable

Subscribers can connect Weblisy to Lovable with an access key created on the MCP page. After that, you can ask Lovable for a component by name and it reads the prompt and code itself, which removes the copy and paste step.

When to choose a different tool

Lovable is a good choice when you want to stay in the browser and see results quickly. If you want to own a local project folder, edit files directly and use a template as-is, an agent that works in your folder is a better fit. Our guide to the best AI tools for building websites compares all five options. If your results are inconsistent, writing better prompts often helps more than switching tools.

The Lovable page has a starter prompt, tips and answers to the most common questions in one place.