Start making
THE ZLO PAGE GUIDE

Make any page in minutes.

Bring a webpage from your AI chat, or sync a folder from your computer. Two ways to get your page and its pictures into Zlo — then preview, revise and publish.

Start makingRules for AI pages

Two ways. Choose where you work.

  1. 01
    For anyone working in an AI chat

    Paste or upload a webpage

    Make your page with ChatGPT, Claude or Gemini, then bring the finished webpage into Code Studio. No local project folder needed.

    Follow this method →

  2. 02
    For people working with local files or coding tools

    Sync a local folder

    Use Claude Code, Codex, Cursor or any editor to build in a folder on your computer. Link it once and keep updating the same page as you save.

    Follow this method →

Choose a method → bring in your page → check the preview → press Flash → share the link.

What you can build

Optional: write text and place pictures manually

You can also write plain text in Create. If you want to add pictures separately, add them in Code Studio — they show as numbered tiles under Images. The 1st tile is[img01], the 2nd [img02]. Type the marker where the picture goes; drag the tiles to change which picture is which.

[img01]
The 1st picture in Images, right here. [img02] is the 2nd, and so on — drag the tiles to change the order.
[img01*2]
The same picture, bigger (*0.5 for smaller).
[slide 01-04]
Pictures 1 to 4 as a swipeable slideshow ([slide 01,03,05] picks some).
[banner: img01] Caption
A picture as a full-width banner, with a caption.
[card: https://…] Name — description
A link as a card with the page's own picture (and its price, when the shop shows one).
[banner: https://…]
A link as one big full-width card.
[vid01]
An uploaded video, playing in the page.
[3d01]
An uploaded 3D model you can turn around.
[file01]
A file — a PDF shows as pages; [file01-03] puts several in one row.
| a | b |
Tables, numbered lists, **bold**, headings (#) and links work as in any document.

Rules for pages made with AI

Asking ChatGPT, Claude or Gemini for a page? Give it these rules (Copy prompt in Code Studio does it for you) to specify the format. AI tools can also read them at /llms-full.txt.

FILE

  • For pasted HTML: ONE complete, self-contained HTML file. All CSS and JavaScript inline. No frameworks, CDNs or web fonts — use a system font stack.
  • For a ZIP upload or local folder: index.html at the top level, with its images, CSS and JavaScript included and referenced by relative paths. A ZIP contains one HTML page; keep the package under 25 MB.
  • Give the page a clear <title> and a one-sentence <meta name="description"> saying what it is. Zlo uses them for the shared link's preview and for search; the preview picture is the cover the creator picks in Zlo, so no og: tags are needed.

IMAGES

  • For ZIP uploads and folder sync, include the actual images in images/ and use relative paths such as <img src="images/hero.jpg" alt="…">. Zlo imports these pictures with the page; no separate image attachment step is needed.
  • For pasted HTML, embed the pictures in the file. If the creator explicitly wants to add pictures separately in Zlo, use numbered spots: <img src="[img01]" alt="…">, <img src="[img02]" alt="…">. In CSS: background-image: url([img01]). The following spot rules apply only to that optional workflow.
  • Write every spot out literally in the HTML/CSS — never build the name in JavaScript (no "[img" + n + "]"). A gallery of 6 lists [img01] … [img06].
  • Number the spots in the order they appear on the page, top to bottom, starting at [img01].
  • For numbered spots, do not substitute stock photos or placeholder services. The creator supplies the real pictures in Zlo. Packaged pages instead use the actual included image files.
  • Put each image in a box with a fixed shape (aspect-ratio or a set height) and object-fit: cover, so any picture — tall, wide or square — fits without breaking the layout.

INTERACTION

  • Anything the user drags, swipes or rotates (sliders, carousels, 3D objects, maps): set draggable="false" and -webkit-user-drag: none on its images and links, touch-action: none on the draggable area, and call preventDefault() in its pointerdown handler — so the browser never picks up an image instead of the gesture.
  • Links to other sites open in a new tab: target="_blank" rel="noopener".

LIMITS

  • It must work on phones and computers (responsive, no horizontal scrolling).
  • The page runs inside a frame: don't rely on localStorage, cookies or saved progress, and don't change the parent page.
  • No upload forms or file pickers — the page can't save anything.

Questions

What is zlo?

zlo puts webpages online: landing pages, courses, portfolios, product pages and more. Paste or upload a webpage from your AI chat, or sync a local folder. Preview it, then Flash it live.

Do I need to code?

No. Write in plain text with a few markers like [img01] for pictures, or let an AI write the page and paste it in.

How do my pictures get into the page?

Include pictures with the webpage: upload a ZIP containing index.html and its images, sync a local folder containing both, or embed pictures in pasted HTML. Separate Images tiles and [img01] markers are optional for manually added pictures.

Can I use ChatGPT, Claude or Gemini?

Yes. Share /rules or /llms.txt with your AI. Paste or upload the webpage it makes; use a ZIP when images are separate files. If you work with a local coding tool, sync its webpage folder instead.

How do I publish?

Press Flash. The page goes live on the Wall with its own short link you can share anywhere.

Can people pay or hand in work?

Yes. Turn on Price to show a price with a button to your payment link, or Accept submissions to collect answers with a deadline and results.

Your next page is a few minutes away.

Start making