Lovable is an AI builder that creates websites and web applications from descriptions you write in ordinary language. You explain what you want, it generates code and a preview, and you ask for changes in the same conversation. You can start without writing the code yourself. Lovable's product introduction describes this as building working applications through a conversational interface.
For your first attempt, build something you can inspect: one page with a few services, opening hours, and a contact link. This guide gives you an original practice prompt, one follow-up change, and a short set of checks before publishing. You will still need to read the result, try its controls, and correct anything the AI misunderstands.
What can you build with Lovable?
Common starting points include a service-business website, a landing page for an idea, or a small tool for organizing information. More involved apps can have stored data, accounts, and integrations, but each addition creates more behavior to check.
Choose a one-page website for this exercise. A visitor should be able to answer three questions: what does this business do, when is it open, and how can I contact it?
If you are still choosing a builder, see our Lovable, Replit, and Bolt comparison. If you already want to try Lovable, continue with the small project below.
What you need before you start
- A Lovable account and an available allowance for creating or editing a project. You can start on a free plan; usage is limited, and completing an exercise within a particular allowance is not guaranteed. Check current plans and allowances if you reach a limit. For balances, resets, and upgrade choices, read our Lovable pricing and credits guide.
- A business or practice idea you understand. We will use Mend Studio, a fictional device-repair business.
- An email address you control for testing the contact link. If you publish the page with this address, visitors will be able to see it.
You do not need a custom domain, payment account, or database for this exercise. Use the supplied practice details first. Before adapting the page for a real business, replace them with its actual services and hours.
1. Describe your first website
Open Lovable, sign in, and find the main request field. The official quick start calls it Ask Lovable to create…. Write the request there to start a project.
A prompt is the instruction you give the AI. A useful first prompt names the visitor, the page's content, and the action the visitor should take. “Make a beautiful website” leaves all three decisions to the AI.
In the prompt below, replace both occurrences of YOUR_EMAIL_ADDRESS with your own test address before sending it. The example page is in English so you can compare its wording with the checks in this guide.
Build a one-page English-language website for Mend Studio, a fictional device-repair business used for practice.
The visitor wants to see our services and opening hours, then contact us by email.
Include:
- A clear heading: "Device care, made simple."
- Three services: Laptop setup, Screen replacement, and Device cleaning.
- Opening hours: Monday-Friday 09:00-18:00; Saturday 09:00-13:00; Sunday closed.
- One main "Email us" link that opens mailto:YOUR_EMAIL_ADDRESS.
- The visible email address YOUR_EMAIL_ADDRESS near that link.
- A small notice: "Practice website for a fictional business."
Use a calm, readable design with a light background, dark text, and one accent color. Make the page work on phones and desktop screens.
Do not invent prices, an address, a phone number, reviews, or certifications. Do not add a booking form, accounts, payments, or a database.Wait for the first version to finish. Its layout may differ from what you imagined; that is why the prompt describes the content and behavior you can check, as well as a visual direction.
2. Inspect the first version
Lovable's editor places the conversation beside a preview of the project. Read the generated page before requesting extra features. Use these requirements to decide whether the first version answers your request:
| Check | What you should find |
|---|---|
| Purpose | The page clearly describes device-repair services |
| Services | Laptop setup, Screen replacement, and Device cleaning |
| Hours | Monday-Friday 09:00-18:00; Saturday 09:00-13:00; Sunday closed |
| Contact | An Email us link and the address you supplied |
| Scope | The practice notice is present; there are no invented claims or extra forms |
If something is missing, ask for that correction before adding anything else. For example: “Add the Sunday closed line to the opening hours. Keep the other hours and services unchanged.”
The preview is useful for checking the page, but seeing a button does not show that it opens the right destination. You will test that separately.
3. Make one specific change
Now change Saturday's hours. This is a small exercise in directing the AI: specify what should change and what should remain as it is.
Change Saturday's opening hours from 09:00-13:00 to 10:00-14:00 wherever they appear on the page.
Keep the weekday hours, Sunday closure, services, email address, contact link, and design unchanged. Do not add any new features.After Lovable finishes, read the page again. Saturday should now show 10:00-14:00, while weekdays should still show 09:00-18:00 and Sunday should remain closed. Recheck the service names and contact address too.
If Lovable also changed something you wanted to keep, name it in your next message. A useful correction describes the visible problem: “The Screen replacement service disappeared. Restore it without changing the updated Saturday hours.”
4. Check the contact link and mobile layout
Try the Email us link. It should open your configured email app or handler with the intended recipient. Opening a draft does not send a message. Check the recipient before sending a test email, if you choose to do so.
If nothing opens, your device may not have an email handler configured. Check the link destination as well as the visible address: the text can be correct while the link points somewhere else. Test again on the published page using a device with email set up.
Use the device-size control above Lovable's preview to inspect the narrow layout. Check that:
- the heading and service names fit without being cut off;
- all opening hours are readable;
- the contact link is easy to select;
- the page itself does not scroll sideways;
- the practice notice remains visible.
If something breaks, describe where and what you see. “On the phone layout, the service cards extend beyond the right edge” gives the builder a clearer problem than “fix mobile.”
5. Publish and open the visitor's version
When the content and checks are ready, use Lovable's publishing workflow:
- Select Publish in the editor's upper-right corner.
- Review the suggested
lovable.appaddress, then select Publish in the dialog. - Wait for Your website is live, then open the resulting link.
- Open that link on your phone and in a browser window where you are signed out of Lovable. Repeat the hours, contact, and layout checks.
For this exercise, the supplied address is enough. You can decide whether to connect a custom domain later. A published Free-plan site is accessible to anyone with its link, so leave the fictional-business notice in place and publish only an email address you are comfortable making public.
The editor preview and the published website are separate versions. After another edit, select Publish → Publish changes to update the live site, then check the public link again. Publishing alone does not guarantee that search engines will index the page or send it visitors.
Common first-project mistakes
| Mistake | Better next action |
|---|---|
| Asking for a website, booking system, store, and dashboard at once | Finish the single visitor journey first: services → hours → contact |
| Assuming polished text contains correct facts | Compare the page with the details you supplied |
| Requesting several unrelated fixes in one message | Make one change, then inspect its effect |
| Treating an email link as a booking or saved inquiry | Describe it accurately: it opens a message in the visitor's email app |
| Editing the preview and assuming visitors see the update | Publish the changes, then open the public URL |
What to learn after your first website
You now have a repeatable practice sequence: describe a small result → inspect it → request a specific change → test → publish. Completing the checks matters more than making the first prompt sound sophisticated.
If your next idea needs saved information, user accounts, or more complex behavior, use Vibe Coding for Beginners to understand what changes when a prototype becomes a product for real users. For the broader budget, read how much it costs to build and run an app with AI.
For structured practice, RianVibe's Build Your First Digital Product with AI course uses a Todo app to teach building, making changes, checking results, and moving toward your own product. The introduction is free; the full course is paid. Provider charges are separate from the course fee.
FAQ
Do I need to know how to code to use Lovable?
You can start by describing a page and asking for changes in ordinary language. You still need to decide what the page should do and check its behavior. Projects with accounts, sensitive data, or complex integrations require more knowledge and testing than this first-page exercise.
Is Lovable free to try?
Yes. Lovable offers a free plan with limited usage. The number of changes you can make depends on the available allowance and the work requested. Check the current plan details instead of assuming that one prompt or one finished website always costs a fixed number of credits.
Can I use my own language in the prompt?
You can ask in your preferred language and specify the language visitors should see on the website. In this exercise, the copyable prompts and example website remain in English so their wording is easy to compare. For a localized site, explicitly request its language and review the generated copy.
Does my website need to look a particular way?
No. AI-generated layouts vary. For this exercise, what matters is that the required services and opening hours are present, the contact link works, and the page is easy to read.
Do changes go live automatically?
No. After editing, publish the changes from Lovable's publishing dialog. Then open the public URL to verify what visitors actually see.
Workflow sources checked September 7, 2026: Lovable introduction, quick start, pricing, and publishing. This walkthrough follows the official documentation and uses an original practice example.