Feature reference

The brief

What happens during generation

WebBuilder runs five stages, shown in the progress bar:

1. 1Research — AI analyses industry patterns and competitive context for your category.
2. 2SiteSpec — A structured specification is built from your brief — sections, content hierarchy, design intent.
3. 3Design — Colour palette and typography are selected based on your tone and industry.
4. 4Generation — HTML is rendered from the spec. Standard sections use the deterministic renderer for speed and consistency; custom sections use AI generation.
5. 5Quality check — The output is scored across copy, structure, imagery, and SEO readiness. Results shown alongside the preview.

Total time: 60–90 seconds.

Multi-page output

Every generated site includes separate HTML pages for Home, About, Services, and Contact. Navigation links in the header and footer connect them. All pages are deployed together when you publish.

Sites also include privacy.html and terms.html — placeholder legal pages pre-populated with GDPR-structured content and your business details. Footer links point to them automatically. Replace them with your own copy from the dashboard (Pro/Agency) or by editing the text directly in the browser.

AI-generated images

Pro and Agency tiers generate professional images via AI — a hero image and gallery images created specifically for your business. Images are stored permanently on Cloudflare R2 and reused across regenerations so you don't pay to regenerate them unnecessarily. Free and Starter tiers use CSS gradient placeholders instead.

Sites we like (reference URLs)

In the brief form, you can add up to three URLs of websites whose design you admire. WebBuilder fetches each URL before generation, extracts colour values, font choices, and layout signals, and feeds them into the design stage as directional inputs.

Reference URLs influence the aesthetic — not the copy or structure. They work best when the sites you reference are in a similar industry or have a tone you want to match. The field is labelled Sites we like in the brief form.

Section regeneration

If a section isn't right, rate it with a thumbs down in the preview. WebBuilder regenerates that section with a revised brief — the rest of the site is unchanged. You can regenerate the same section multiple times.

Section regeneration counts toward your monthly generation limit on Free and Starter tiers. Pro and Agency tiers have unlimited generations.

Wishlist prompts

Use the wishlist input to describe a feeling or direction, not a specific change. Examples that work well:

• →"Make it feel more premium"
• →"Tone it down — less salesy, more informative"
• →"Make it feel more like a boutique studio"
• →"More confident, less corporate"

Wishlist prompts mutate the SiteSpec — colour, typography, and copy direction — without changing your business information.

Style swap

The style swap applies a different colour palette and font pairing based on a tone selection. It runs in under 2 seconds with no AI call — the colours and fonts are swapped directly in the rendered HTML.

In-browser text editing

Any saved project can be edited directly in the browser — click to change copy, phone numbers, addresses, or any text without regenerating the whole site.

1. From My Sites, click Continue editing on a project to load it into the generator.
2. Click the Edit Mode toggle in the toolbar above the preview — it turns indigo when active.
3. Click on any text in the preview — a cursor appears and the text becomes editable.
4. The Save changes button activates as soon as you make a change.
5. Click Save changes — a new version is created and, if the site is published, the live site updates automatically.

Available on Starter, Pro, and Agency tiers for projects loaded from My Sites. Edit Mode is disabled on freshly generated sites until they are saved and opened from the dashboard.

Field editor panel

The field editor gives you structured access to every text field in a section — headlines, subheadings, body copy, button labels — without clicking directly into the preview.

1. From My Sites, click Continue editing on a project to load it into the generator.
2. In the right-hand Sections panel, find the section you want to edit — each row has a small grid-lines icon on the right.
3. Click the grid-lines icon — the field editor slides in from the right, listing every editable field by label.
4. Type in any field — changes appear in the live preview instantly as you type.
5. Click Save changes in the panel footer — a new version is created and, if published, the live site updates automatically.
6. Click × in the panel header to close, or click another section's icon to switch sections.

Available on Starter, Pro, and Agency tiers for projects loaded from My Sites. On a freshly generated site the Save button reads "Open from My Sites to enable saving" — save the project first, then re-open via Continue editing.

Replacing section images

When a section contains images, the field editor panel shows an Images section below the text fields — a thumbnail of each image with a dimension hint and a Replace image button.

1. Open the field editor for the section containing the image you want to replace.
2. Scroll to the Images section at the bottom of the panel — you will see a thumbnail and a hint showing the rendered size (e.g. "Best at 1200 × 600px").
3. Click Replace image and select a file from your computer.
4. The image is uploaded to Cloudflare R2 and swapped live in the preview — no page reload needed.
5. Click Save changes to persist the new image. If the site is published, the live site updates automatically.

Accepted formats: PNG, JPEG, WebP, GIF. Maximum 5 MB per image. The dimension hint shows the rendered size of the original image — uploading an image at or near those dimensions gives the best result. Images are stored permanently on Cloudflare R2 and survive all future regenerations and redeploys.

A/B variant generation

Agency tier generates two distinct visual directions from the same brief — a palette mood flip (dark ↔ light) plus a hero variant swap. Both are shown side by side in a picker. Select the stronger one; the other is kept until you explicitly dismiss it. You can switch back at any time before dismissal.

Design Rationale panel

After generating a site, click View Design Rationale in the preview toolbar to open a panel showing the AI's design decisions for that site.

Useful for explaining design decisions to clients without needing a design background. The panel is always available in the preview — no regeneration required to open it.

Stripe payment link or Gumroad embed

Enter a checkout URL — a Stripe Payment Link (buy.stripe.com/...) or a Gumroad product URL — and a button label (e.g. “Book Now”, “Buy Now”).

WebBuilder adds a “Ready to Book or Pay?” section to your site with a prominently styled button linking directly to your checkout. The hero and main CTA buttons also link to your checkout URL.

Your Stripe or Gumroad account handles the payment — WebBuilder only embeds the link. No API keys required; no PCI scope for M4siz Ltd.

Snipcart cart integration

Snipcart is a hosted shopping cart service. Enter your Snipcart public API key and add your products using the product builder:

WebBuilder generates:

• →A product catalog on shop.html with Add to Cart buttons for each product.
• →A shopping cart icon with item count badge in the navigation header.
• →Customers can add multiple items and proceed to checkout — payment is handled by your Stripe account via Snipcart.

Your Snipcart API key and Stripe account are yours — WebBuilder has no access to payments and no PCI scope. Obtain your public API key from the Snipcart dashboard after connecting your Stripe account there.

Venue menu page (bar / pub / hospitality)

If you configure Snipcart products for a bar, pub, or hospitality venue, WebBuilder automatically generates a menu.html page from your product list alongside the shop page. Navigation includes a Menu link to menu.html.

The menu page displays item names, descriptions, and prices in a styled layout without Add to Cart buttons — suitable for a drinks menu, food menu, or venue hire packages. The shop page (with cart) remains available for online orders if needed.

Getting your payment credentials — important

WebBuilder does not process payments and holds no payment credentials of its own. Every mode above embeds a link or key to an account that belongs to you (or your client). Before the ecommerce section will work on a live site, that external account must exist and be set up — WebBuilder cannot create or configure it on your behalf.

Until these steps are done on the provider’s side, the button or cart renders on your site but checkout will not complete a real payment. Test mode keys (Stripe/Snipcart) are useful for confirming the flow works before switching to live keys.