Guide and practice for your work

Build a website or app with AI

Prepare the content and explain how it will be used. Build a version to test and edit before sharing.

What will you get?A clear description followed by a prototype you can test and edit.

Let's understand the idea

Start with a website, educational game, small tool, or dashboard. What matters is who will use it and what they should be able to do. A good description explains behavior and content, as well as colors.

Prepare text, images, and links, with a usage example from opening it to the result. If improving something existing, start with its files and references and specify the part to change.

Choose a suitable building space, such as Sites, Canvas, Artifacts, or a specialized platform, based on the function and publishing needs. Start with a version that does one task. Test it and request a specific fix for the problem you found.

A website preview still needs its links, buttons, inputs, saving, and sharing tested. If it collects data or connects services, define access, permissions, and storage before people rely on it.

Examples to expand the idea

A freelance designer wants a pricing calculator based on design count, revisions, and delivery time. They describe the idea in two lines. AI asks for details and builds it in Lovable or Gemini Canvas. They test it on a phone and fix it until it's ready with a link.

  • Your project's expenses

    What's been paid, what's outstanding, and a month-end report.

    Describe the fields to Lovable or Claude: expense type, amount, date, and client payments. It builds a page you can open on your phone to record them.

  • An interactive reference from approved content

    Choose a topic to see the explanation, steps, and source.

    Prepare content from trusted references and describe the app to Claude or Lovable: a topic list with steps and a source for each. A ready-made prompt is below.

  • An instructions page for clients or patients

    One link to send everyone.

    Write the instructions in plain language in chat. Then ask for a simple page that's comfortable on phones and publish it with a link.

  • Track work requests

    For each client: the request's stage, whether it's finished, and their account balance.

    The fields are client, work type, stage, and delivery date. Overdue items appear in red.

  • Store inventory

    Items, quantities, and alerts when something is running low.

    A system with items, quantities, and prices that alerts you when stock falls below a threshold you set.

  • A website or catalog

    Your services or products, WhatsApp orders, and possibly online payment.

    Prepare the content in chat, then describe the website to Lovable so it builds and publishes it with a link.

  • Choose the output you need

    Start with a service page, or a custom tool, or a tracking app depending on what visitors will do.

  • A dashboard or interactive report

    For metrics and filters, use the dashboard workflow. For sources and comparisons, use the interactive report workflow.

  • A game or learning website

    Try an activity that assesses a goal, or a lesson library with sources, practical tasks, and clear navigation.

Choose the method before starting

There's more than one way to do this task

Open the menu and choose what fits your inputs and desired result. The method's guide appears directly below it.

Step-by-step design

Prepare the function, content, and visual reference. Ask for a plan of interactions and pages, then a small version that performs the core task in a suitable building space.

Try it on your work: Prepare what you'll work on and start with a small part. Review the result before continuing.

Apply it to something of your own

Steps from start to delivery

Open any step by its heading. Each explains what to do, why, and what to check before continuing.

  1. 1Choose one thing the website helps withA clear function instead of a long list of ideas.Details

    A small scope lets you test real value quickly.

    What should I do?

    • Write who the user is, what they start with, and what they should get.
    • Write a complete usage example from opening it to the result.
    Tools for this part: choose one
    A guide for this stepHow do you build a website or app with AI?Open the guide →
  2. 2Prepare content and a visual referenceContent and a reference to build on.Details

    Real content reveals design needs before building.

    What should I do?

    • Gather headings, text, images, and links. Identify what's missing.
    • Attach a reference and explain what you like: layout, colors, or easy reading.
    A guide for this stepHow can examples and reference images improve your results?Open the guide →
  3. 3Explain pages and interactionsA brief for behavior and data.Details

    Appearance alone doesn't explain what a button does or where data is saved.

    What should I do?

    • Define each page, field, and button's function, including empty and invalid states.
    • If there's sign-in, saving, or sharing, define the users and required access method.
    A guide for this stepHow do you build a website or app with AI?Open the guide →
  4. 4Build a version and test one taskA version that performs the core task.Details

    Start with a working flow instead of many parts that only look complete.

    What should I do?

    • Choose the platform for your building and publishing needs. Give it the brief and content.
    • Test the core task yourself and ask for a specific fix for the problem that appears.
  5. 5Test before sharingA working link and clear user experience.Details

    A successful preview doesn't mean the link and data work for others.

    What should I do?

    • Test phones, computers, links, buttons, and invalid inputs.
    • Review publishing, access, and saving. Open the sharing link in its intended context.
Start with a suitable prompt and adapt it

Prompts for your work

Open a prompt and fill in your details. Empty fields remain visible so you don't forget them.

Start any appOpen it to copy or tailor the prompt

Write the prompt in a conversation with the suggested tool after preparing the files listed in the steps.

Ready to copy

Copy the prompt as it is, or tailor it with your details first.

Tailor the prompt to your workOptional: add your details and the prompt adjusts itself
Prompt details
View full prompt

After copying the prompt, open it in:Choose a tool that reads your files and supports the required output.
Why is the prompt written this way?

Clarifying behavior and inputs helps us build something people can use, beyond just a page's appearance.

A reference from approved contentOpen it to copy or tailor the prompt
Ready to copy

Copy the prompt as it is, or tailor it with your details first.

Tailor the prompt to your workOptional: add your details and the prompt adjusts itself
Prompt details
View full prompt

After copying the prompt, open it in:Choose a tool that reads your files and supports the required output.
An instructions page for your clientOpen it to copy or tailor the prompt
Ready to copy

Copy the prompt as it is, or tailor it with your details first.

Tailor the prompt to your workOptional: add your details and the prompt adjusts itself
Prompt details
View full prompt

After copying the prompt, open it in:Choose a tool that reads your files and supports the required output.
Review before use

Did the result serve your original goal?

Test the core function, inputs, links, and saving on phones and computers before sharing the result.

  • Did the result meet the requirements without significant gaps?
  • Were the sources and details that must stay accurate checked?
  • Did you open the file or link and test it as it will be used?

If there's a problem, name the unsuitable part, show an example, and request a specific edit.

Questions? Message us