# How to build a website with AI, from brief to launch

Canonical: https://uvilno.com/guides/how-to-build-a-website-with-ai
Updated: 2026-10-27

Turn a real business brief into a useful website. Plan the pages, review the preview, make focused edits, and prepare a source export.

Written by the Uvilno team. Examples illustrate workflows; confirm service availability before launch.

## Choose the visitor's job before choosing a style

Write a one-sentence success check you can give another person: ‘Find a residential project, understand the studio's approach, and start an inquiry.’ Ask them to attempt it without explaining the interface. If they cannot identify the next step, the first improvement should address navigation or content rather than adding a visual effect. Keep this check alongside the brief for later revisions.

A useful first brief starts with a person trying to do something. A prospective architecture client wants to understand your work, decide whether your approach fits, and find a way to discuss a project. A restaurant visitor needs opening hours, a menu, and a reservation destination. Write that journey in ordinary language before asking for an aesthetic. Otherwise an impressive opening screen can consume the whole project while the important details remain missing.

Choose one primary action and a few supporting actions. For a studio, the primary action might be sending an inquiry; viewing projects helps someone decide to take it. List what belongs outside the first release, too. You can launch a useful portfolio without accounts, a dashboard, a booking system, or a payment flow. A short boundary gives the builder a coherent problem and gives you a realistic review checklist.

- Identify the audience and its most important question.
- Choose a primary action with a real destination.
- List the pages needed to support that action.
- Write down the features you are deliberately postponing.

## Collect the facts and assets you can stand behind

Prepare the business name, services, locations, contact details, and a few strong examples of the work. Separate facts you have verified from copy you want help writing. Supply real testimonials only when you have permission to publish them. If you do not have reviews, ask for an explanation of the process or useful project detail instead. Invented client logos and impressive-looking statistics make the page less trustworthy, even when the visual design is polished.

Upload photographs and a logo through the available source controls, then explain their purpose in the brief. A filename alone rarely tells the builder whether an image is a hero, a case study, or a small team portrait. For visual references, describe the qualities you want to borrow: spacing, image proportions, typography, or navigation behavior. Use material you own or are licensed to use; a public URL is a reference, not permission to reproduce another business's content.

Example brief:

Use the supplied courtyard photograph as the opening image and the kitchen photographs in the Willow Road project. Keep the studio name as plain text until I upload the approved logo. We have not supplied awards, client quotes, or completed-project counts; omit those sections.

## Write one coherent brief and review it before sending

Combine purpose, audience, content, page structure, behavior, and visual direction into a brief that another person could implement. Specificity matters more than length. Explain what happens after a visitor clicks the main button. State whether a contact section should open an email client, link to an existing booking tool, or collect a message through an enabled service. A request for a beautiful form does not define where its data goes.

In Uvilno, opening a starter brief, signing in, and naming a project do not start generation. The project name organizes your saved workspace; put the public business name in the brief separately. Read the editable text in the conversation, remove irrelevant requirements, and send when ready. Optional sources and app connections need to match the actual request. Selecting a connection prepares the next submission; it does not mean every service is already configured.

- [Write more precise prompts](https://uvilno.com/guides/ai-website-builder-prompt-engineering-guide)

## Use planning when the page structure needs thought

A one-page business site may be clear enough to build directly. For a larger project, use Plan mode to check the proposed pages, user journeys, and service needs before approving the build. Read the plan as a product decision: does every route serve a purpose, does the data belong to one visitor or many, and are payment or account features actually necessary? Revise misunderstandings while they are still sentences rather than layout and code.

An approved plan is tied to the project state. Changing the brief or restoring a version can require a new approval. Planning and prompt enhancement are real processing and count toward usage; they are not a promise of free unlimited preparation. Once you explicitly build, follow the reported progress. A saved verified result and an unfinished recoverable draft are different states. Review the result named by the workspace rather than assuming that visible draft pixels mean the build has completed.

## Review the whole visitor journey in the preview

Begin at the top of the site as a first-time visitor. Can you tell what the business offers without scrolling? Can you find evidence supporting the offer, and can you complete the primary action? Follow the navigation through every page and back again. Check that buttons perform their advertised action, not merely an animation. Read the copy aloud; this reveals vague introductions, repeated claims, and headings that look dramatic but explain very little.

Switch between desktop and phone preview widths. Look for cropped subjects, long words forcing horizontal scrolling, menus covering content, and sticky controls hiding important information. Test with a keyboard as well as a pointer. The preview is intentionally isolated because generated code is untrusted. That isolation protects the application, but it also means hosted login and payment flows may open a trusted popup rather than running inside the generated page. Test those distinct journeys deliberately.

Review what the visitor experiences

| Area | Useful question | Evidence to record |
| --- | --- | --- |
| Opening screen | Is the offer and next action clear? | A new visitor can explain both. |
| Navigation | Can each promised page be reached? | Every link opens the expected content. |
| Contact | Where does the message go? | A test arrives through the configured service. |
| Phone | Can the main task be completed comfortably? | No hidden action or horizontal overflow. |

## Revise a specific outcome and preserve what works

Useful revisions name the target, the problem, the intended result, and what should stay. Select an element when that helps identify it, then write the instruction in the same chat. Instead of asking for a premium redesign, explain that the opening headline overwhelms the photograph and should occupy two lines on a phone. For a behavioral issue, describe the starting state and the click that fails. The builder needs an observable outcome, not just a mood.

Group changes that belong to the same decision. A smaller headline, shorter introduction, and clearer inquiry label form a coherent opening-section edit. Mixing that request with a new account system and a different navigation structure makes review harder. After each completed revision, test the changed area and a nearby unaffected journey. Saved versions let you recover a direction, but they do not replace checking the final result before publishing or exporting it.

Example brief:

Keep the palette, photographs, and page order. On the home page, shorten the headline to fit two lines at phone width, reduce the introduction to two sentences, and label the main email link ‘Discuss your renovation’. Preserve the project filters and test that they still work.

## Separate the website from the services it uses

A static frontend can display content, run a calculator, keep browser-local preferences, and call a configured hosted service. It cannot safely hide a secret API key in downloaded JavaScript or provide a private database by itself. Uvilno offers opt-in managed services for supported tasks such as app login and personal records. Those services remain hosted dependencies when the frontend is exported. An export does not turn them into a separately provisioned backend you own.

Make this distinction visible in your requirements. Say whether a task board should persist on the same browser only or save private records after sign-in. Say whether a checkout is a test demonstration or an intended live business transaction. Current managed Stripe checkout is test mode until live setup and onboarding are completed. For unsupported infrastructure, choose an external service or further development and test it separately. Do not publish a decorative control that implies a capability you have not connected.

## Finish the factual, accessibility, and export checks

Before launch, verify prices, service areas, email addresses, legal names, and every claim about the business. Give each page a descriptive title and an accurate summary. Check keyboard focus, form labels, contrast, image descriptions, and reduced-motion behavior. A generated page can pass mechanical checks and still confuse a customer, so have someone unfamiliar with the project attempt the main task without coaching. Fix the point where they hesitate.

Preview access and source ownership are separate. Free includes monthly AI usage; the permanent project source unlock is $4.99, with included unlocks on paid plans. Plus is $10 per month, Pro $20, and Ultra $59. Source stays private until the project is unlocked. Download the correct saved version, keep its assets and licenses together, and test it on your chosen host. External deployment, domain setup, and future updates need their own launch checks.

- [Export and host the finished website](https://uvilno.com/guides/how-to-export-and-host-your-ai-website)
- [Review current pricing](https://uvilno.com/pricing)

## Common questions

### Does opening a guide's starter brief use AI?

No. It prepares editable text. You name or open the project, review the brief, and explicitly send it to start a build.

### Can I download source on the Free plan?

Free supports previews and included usage. Source access requires a permanent project unlock or an included paid-plan unlock. Locked project files are not exposed through a preview.

### Does every generated website include a backend?

No. Static behavior and browser-local state differ from a hosted service. Enable supported app connections deliberately and verify their data and deployment requirements.