All workflows

Workflow · Moderate effort

Build an app

Turn a bounded brief into a working prototype.

MainstreamHuman-Review
Open Lovable (opens in a new tab)

Opens the tool in a new tab. Sign-in or a plan may be required there. Follow the steps below and return to check your result.

Step by step

Here’s how to do it

Work through these steps in order. Your notes stay on this page until you copy them; nothing runs automatically.

What you’ll need
  • A bounded brief describing pages, users and interactions.
  • Test data and acceptance criteria.
  1. Write your brief

    1. Describe the intended user, one main task, the pages needed and the smallest useful result.
    2. Gather the notes or assets you can use. Remove private information you cannot share and confirm permission for any source material.

    Prepare your prompt for Lovable

    Add your details, then copy the prepared prompt into the tool. This helper combines your text with the task instructions.

    View prepared prompt
    Create the smallest useful app for this brief. Use fictional sample data first. Include clear labels, useful empty states and a responsive layout. Do not add paid services, live integrations or publish it.
    Start with
    The objective and proposed source material.
    You’ll have
    An approved brief and authorised inputs.
  2. Build a first version in Lovable

    1. Open Lovable’s home page or dashboard. Paste the prompt in the app-creation box and send it.
    2. Wait for the editor and preview to appear. Try the main task in the preview.
    3. Ask for one specific improvement at a time. Use the preview’s device controls to inspect a narrow mobile layout as well.
    Start with
    The approved brief and authorised inputs.
    You’ll have
    A local or private app prototype.

    Lovable’s getting-started guide (opens in a new tab) · Checked

  3. Check the finished result

    1. Try the main journey, an empty state and an invalid input. Check labels, focus, readable text and mobile spacing.
    2. Review connected services and what data would be stored. Save your work and decide separately whether to connect real data or publish.
    Start with
    A local or private app prototype.
    You’ll have
    An accepted output or a clear list of corrections.

0 of 3 step checks complete. A person has checked the output against the brief and accepted the result.

Before you share or switch it on
  • Test the required interactions and error states.
  • Check access controls before using real data.
  • Make publication a separate decision.

Logo credits

Firefox and Mozilla

Firefox and Mozilla product marks are trademarks of the Mozilla Foundation in the US and other countries. No affiliation or endorsement is implied.