Create web pages with AI Studio
Build a landing page, one-pager, product detail page, or social preview, then test the live result and choose how people can open it.
A document can describe a landing page. An image can show one frame of it. Neither tells a reviewer what happens when the page opens, how the hierarchy feels on a phone, or whether the call to action is obvious after the first scroll.
Choose Web page when the experience itself is the draft. AI Studio builds a live preview object on the canvas, so the page can be opened, tested, reviewed beside its source material, and shared as a standalone preview when it is ready.
The short version
Open an editable canvas, choose Web page, and select the source objects the page should use. Pick a Style, write the audience, purpose, sections, and main action in the prompt, then select Submit. Open Preview, test the desktop and mobile views, and review every claim and link. The page owner can open Share preview, turn on Public link, and select Copy link when people outside the canvas should open it.
Choose a web page for a reviewable experience
AI Studio web pages are for prototypes, client reviews, campaign concepts, interactive one-pagers, and other work that needs to be opened rather than merely described.
| What you need | Choose | Why |
|---|---|---|
| Editable copy, research, or a structured brief | Doc | The words are the deliverable. |
| A comparison, tracker, or data grid | Table | Rows and columns own the logic. |
| A single key visual or static composition | Image | One frame is enough to review the idea. |
| A narrated update or story | Audio file | Listening is part of the handoff. |
| A page people should open, scroll, click, and test | Web page | Layout and interaction are part of the deliverable. |
A generated page is a preview artifact, not your production website host or content management system. Use it to settle the page's direction and collect review. Move approved copy, media, tracking, forms, legal text, and production integrations into the system that owns the final site.
Check access before you start
| Item | Details |
|---|---|
| Available on | Editable, non-embedded canvases in the web app and desktop app. |
| Who can generate | Workspace members with edit access to the canvas. |
| Who can open the canvas preview | People who can read the finished canvas object. |
| Who can create a public preview link | The owner of the generated page session. |
| What starts the work | A successful workspace AI credit check when you submit. |
| What the result becomes | A live webpage preview object on the current canvas. |
Guests, external collaborators, and people with view-only or comment-only access cannot generate a new page. They can review the finished object when their canvas access allows it.
Build the page from the canvas
- Open the canvas where the brief, references, and generated page belong.
- Select the notes, images, files, tables, or earlier results that should ground the page.
- In AI Studio, choose Web page.
- Choose a Style.
- Write the prompt. Name the audience, page goal, primary action, required sections, source constraints, and any device or platform priority.
- Attach files or paste HTTPS links when the source is not already on the canvas. Wait for uploads to finish.
- Select Submit. A webpage object shows the generation status while AI Studio researches, directs, and builds the page.
- Open Preview when the object is ready.
This walkthrough shows selected canvas material becoming a web page, then opens the finished result for review and sharing.
The result stays on the canvas as a card with its title, description, thumbnail, and preview connection. Keep it beside the brief and references during review. That makes the page's evidence visible instead of turning the preview link into an orphan.
Pick the style by page job
| Style | Use it when | Page direction |
|---|---|---|
| Auto | You know the outcome but do not need to prescribe the format. | AI Studio chooses the page treatment from the prompt and source. |
| Landing page | A new visitor should understand the offer and take one main action. | Hero, value proposition, proof or trust signals, section flow, and clear call-to-action blocks. |
| One-pager | A brief, proposal, launch summary, or executive update should fit into one compact page. | Skimmable sections, strong hierarchy, key facts, and little narrative detour. |
| Product detail | A product concept needs a purchase-oriented review. | Product media, title and price, variants, shipping and returns cues, proof, and add-to-cart or buy-now hierarchy. |
| Social preview | A campaign post needs to look like the social surface where it will appear. | A realistic, mobile-first post mockup with recognizable account, media, action, caption, and timing details. |
If the prompt names one social platform, Social preview stays focused on that platform. Ask for a cross-platform comparison only when you actually want several platform treatments in one result.
Do not choose Landing page for every polished page. A board update with five sections is usually a One-pager. A product launch with gallery, options, shipping, and purchase proof is Product detail. The distinction saves a round of removing sections the page never needed.
Give the page a real brief
The page builder can use selected canvas images, uploaded images, files, PDFs, audio or video context, tables and text objects, and accessible web links. Images become visual references; documents, transcripts, tables, and page text become source material for planning and copy.
| Input | Use it for |
|---|---|
| Selected canvas objects | Keep the generated page connected to the brief, approved copy, tables, and visual references already under review. |
| Attached images | Supply product photos, campaign assets, logos, or layout references that are not yet on the canvas. |
| Attached documents and media | Supply facts, specifications, interview material, transcripts, or an existing brief. |
| HTTPS links | Add public source pages and reference material that the service can reach. |
| Prompt | Decide the audience, page job, message order, calls to action, must-use facts, and boundaries. |
The strongest prompt reads like a small creative brief:
Build a Product detail page for the selected skincare concept. Use the selected product image as the primary visual. Audience: first-time customers with sensitive skin. Include benefits, ingredients, how to use, shipping and returns, three review placeholders, and one Add to cart action. Keep the supplied price and claims unchanged. Do not invent certifications.
That prompt separates layout decisions from factual permission. The page can make strong visual choices while staying inside the evidence you supplied.
Understand the live preview object
The generated object is not a generic pasted website link. Its Preview action opens the generated page in a dedicated viewer. The viewer keeps the page connected to its generated versions and gives you desktop, mobile, and code views for inspection.
Use the preview to answer four questions:
- Does the first screen explain the page without relying on the brief beside it?
- Does the main action remain clear after the first scroll?
- Does the mobile view preserve the hierarchy rather than merely shrink it?
- Do links, controls, media, and interactive sections behave as the copy promises?
The page can load external images, fonts, scripts, video, or other HTTPS resources. Those resources can be blocked, removed, or changed by their owner. A preview that depends on them must be tested again before a client review. Replace fragile outside resources in the production implementation.
Review the page before anyone gets the link
Open the page yourself and inspect:
| Check | What to look for |
|---|---|
| Message | The value proposition, audience, and primary action match the brief. |
| Facts | Names, prices, dates, specifications, claims, and references match the source. |
| Desktop and mobile | Sections remain legible, ordered, and usable at both widths. |
| Links and controls | Every visible action has the right destination or clearly reads as a prototype. |
| Media | Images load, crops make sense, and no private or unlicensed source slipped into the page. |
| Page metadata | Title, description, and canvas thumbnail identify the right version. |
| Sensitive content | Internal notes, customer data, legal drafts, and unsupported promises are removed. |
Use comments on the canvas object for human decisions. Use the page's AI entry point for a targeted revision or critique. A generated preview that looks finished still needs a responsible person to approve the claims.
Share the preview with the right audience
Only the page owner controls its public preview link.
- Open the generated page's preview.
- Select Share preview.
- Turn on Public link when anyone with the link should be able to open the preview.
- Select Copy link and send it only after the page passes review.
When Public link is off, only people with canvas access can open the preview. When it is on, anyone with the link can open the latest published preview. Turning public access off stops future public opening; it does not erase copies, screenshots, or information someone already received.
For reviewers who also need the source context, share the canvas instead of sending only the preview. A public preview shows the artifact. The canvas shows why it exists.
Let the build finish before you retry
Web page generation takes longer than a short Doc because it prepares sources, plans the experience, creates or selects visual assets, builds the page, and stores the preview. The processing object is the live task status.
You can leave the canvas after the request is accepted. Return to the same object rather than submitting a duplicate. Deleting the processing object cancels the canvas task, but it does not guarantee that work already performed will be uncharged. Deleting a finished page never returns credits.
Web page cost is not a fixed number shown by Style. Credit use reflects the source material and the work performed to generate the result. Check AI credit history after the run, and revise a close page instead of rebuilding it for one small copy change.
When the preview does not behave as expected
The card is still processing. Leave the original object in place and return later. Refresh the canvas once before deciding it is stuck.
Preview is missing. The generation is still pending, failed, deleted, or did not finish as a previewable result. Do not create a duplicate until you have checked the original object and credit state.
The preview works but the card has a generic title or thumbnail. Refresh the canvas. If the title, description, or thumbnail remains wrong, contact support with the canvas link, output type, and approximate completion time.
A link, image, font, or interactive section fails. Test whether the outside source still loads directly and whether it requires sign-in. Replace private or unstable resources, then save a new version or regenerate from accessible source material.
The page looks like the wrong format. Choose the exact Style and state the required anatomy in the prompt. For example, a product detail page should name gallery, variants, price, shipping, proof, and purchase action.
The public link does not open for someone outside the canvas. The page owner must turn on Public link. Copying the URL does not change its access policy.
The page makes unsupported claims. Correct the source and prompt, then edit or regenerate once. Do not send a fluent preview as proof. See When an AI result is not right.
The page remains stuck after refresh. Contact support with the workspace name, canvas link, output type, approximate submit time, prompt summary, attachment types, and whether credits were blocked or spent. Do not send passwords, private credentials, or unnecessary customer data.
Related guides
- Create content with AI Studio
- Create images with AI Studio
- Create documents with AI Studio
- Review AI output and share web pages
- Understand AI credits
- When an AI result is not right