From AI draft to working website
A practical route from an AI-generated prototype to a website with clear content, working journeys, and a handover you can trust.
A generated homepage can look finished before the website is useful. The headings are bold, the buttons move, and the preview is persuasive. Then someone tries to send an enquiry, share a page, or open the menu on a phone. Those are the moments that decide whether the project is ready.
As of October 2026, tools such as Figma Make and v0 can help you explore and build interfaces. The useful question is what you must establish around the draft: purpose, content, behaviour, and ownership.
1. Write the job before the prompt
Decide what a visitor should understand and do. “A modern website” gives the tool little to work with. “A five-page site for a small architecture practice, with project evidence and a qualified enquiry form” gives you something to evaluate.
For an illustrative studio brief, write these answers before generating anything:
- Audience: a business owner choosing a creative partner.
- Primary action: send a useful project brief.
- Evidence: selected work, a clear process, and contact details.
- Constraint: the site must remain readable and usable on a phone.
That short brief is also your review checklist. A page that looks impressive but obscures the contact route has missed its job.
2. Give the tool actual material
Provide approved copy, brand assets, page structure, and a reference for the visual direction. Ask for a specific first page or journey. Review that before multiplying it into a whole site.
Figma’s documentation describes attaching designs and bringing design context into a functional prototype. These inputs reduce guesswork; they do not replace checking the result. Treat missing testimonials, client logos, and outcome figures as missing content. Do not let a convincing layout turn invented copy into published proof.
3. Review the journey, not just the screen
Take one realistic visitor from arrival to completion. Can they find relevant work, understand the offer, and make contact? Then repeat on a narrow screen and with the keyboard.
For the illustrative studio site, try a short enquiry and a valid enquiry. Check that errors explain what to fix, success appears only after a successful response, and the message reaches the intended inbox. A button animation tells you nothing about delivery.
- Check the menu, tabs, links, and back navigation.
- Open each public page directly, rather than only through the homepage.
- Test the form’s loading, failure, and success states.
- Inspect focus visibility and whether labels identify the fields.
4. Make the content travel well
Visitors will also arrive from search results and shared links. Give each page a clear title, description, and canonical URL. Choose a usable share image. Keep old URLs redirecting to their replacements instead of dropping a visitor onto a dead end.
Use appropriately sized images and load later media when it is needed. Check real mobile performance rather than trusting a desktop preview. Keep decorative motion pausable and respect reduced-motion preferences.
5. Hand over the working system
The deliverable includes the source, hosting access, domain setup, content locations, and a short explanation of how updates reach production. The owner should know which folder and project are authoritative, how to make a preview, and how to return to the last working deployment.
A small static site can be maintained with straightforward files. A team that edits content frequently may need a CMS. Choose that workflow around the people doing the updates, rather than adding it by default.
The draft creates momentum. The checks turn that momentum into something someone else can use.
Start with one complete journey. Finish its content, interactions, delivery, and handover before calling the site done.
Sources and further reading
Product documentation checked on 2 October 2026: creating a Figma Make prototype and v0. The studio brief above is illustrative, not a client case study.