Generating and editing landing pages with AI

Overview

Every landing-page record has an AI Edit button in the builder toolbar. Click it, describe the page you want, and SiteDetour runs an asynchronous generation job that returns editable HTML/CSS loaded back into the GrapesJS canvas.

Writing a prompt

Prompts work best when they include:

• Product/offer — what the page is selling or promoting.
• Audience — who the page is targeting.
• Key sections — hero, features, pricing, FAQ, testimonial, CTA.
• Visual direction — modern, bold, minimal, dark mode, specific brand colors.
• Call-to-action — the single action you want the visitor to take (book a demo, sign up, download, contact).

Example prompt:

A landing page for a project-management tool aimed at engineering teams. Hero with a headline, subhead, and primary CTA 'Start free trial'. Three feature cards. One testimonial quote. FAQ with four items. Modern, dark-mode aesthetic with neon-green accents.

Generation is async

When you submit a prompt, a job is queued. Statuses:

• pending — queued, not yet running.
• processing — the model is generating.
• completed — HTML/CSS has been loaded into the builder.
• failed — the job errored. Check the prompt length and retry.

You can continue working on other pages while a generation is in flight.

Iterating on the output

The AI output is normal HTML/CSS in the builder. You can:

• Drag, resize, and restyle any element visually.
• Pop into code view to edit the HTML/CSS directly.
• Replace AI-generated images with your own via the Asset Manager.
• Re-run AI Edit on the same page to rewrite sections. The previous state is preserved until you apply and save.

What AI is good and bad at

Good at: quickly producing a structured, visually coherent first draft. Laying out unfamiliar page patterns (comparison tables, FAQ accordions, feature grids). Writing rough placeholder copy.

Not good at: nuanced brand voice, exact color matching, on-brand imagery, and legal/compliance copy. Expect to substantially revise copy and swap imagery.

Plan availability

AI Edit is available on paid plans. Check Billing for the AI generation quota on your current plan.

Next steps

• Building with the drag-and-drop editor
• Hosted landing pages overview