Creating Landing Pages with AI

AI transforms how you build landing pages. Instead of manually coding or dragging elements, you describe your vision and the AI builds it. This guide covers how to effectively create and iterate on landing pages with AI assistance.

Getting Started

Open the Editor

1. Navigate to your campaign's landing pages
2. Create a new landing page or open an existing one
3. The AI chat panel appears alongside the preview

Your First Request

Start by describing what you want:

Create a landing page for a project management SaaS. Include:
- A hero section with headline, subheadline, and CTA
- A features section showing 4 key benefits
- A pricing section with 3 tiers
- A footer with links and social icons

The AI:

1. Analyzes your request
2. Generates the page structure
3. Writes the code
4. Builds and shows the preview
5. Explains what it created

What AI Can Build

Complete Page Structures

Request entire pages from scratch:

• Hero sections with headlines, subheadlines, CTAs
• Feature grids and lists
• Pricing tables and comparison cards
• Testimonial carousels and grids
• FAQ accordions
• Contact forms
• Navigation and footers

Section-by-Section

Build incrementally:

Start with just the hero section:
A bold headline about team collaboration,
a short description,
and a "Get Started Free" button

Then add more:

Now add a features section below the hero
with 4 cards showing our main benefits

Styling and Theming

Request specific visual styles:

• Color schemes based on brand colors
• Typography choices
• Spacing and layout adjustments
• Dark/light mode variations
• Responsive breakpoints

Iteration Workflow

Review the Preview

After AI makes changes:

1. Check the live preview on the left
2. Look for any issues or improvements
3. Note what you want to change

Request Refinements

Be specific about changes:

The hero headline is good, but:
1. Make it larger (text-5xl on mobile, text-7xl on desktop)
2. Add a gradient from blue to purple
3. Reduce the spacing below it

Use Design Mode

For precise edits:

1. Enable Design Mode with /design or click
2. Click the element you want to change
3. Describe your edit

[Hero button selected]
Change this to a gradient background matching the headline

Version Management

AI automatically manages versions of your landing page.

Automatic Saves

Every change creates a recoverable state:

• Each AI edit can be reverted
• You don't need to manually save
• Version history is maintained

Reverting Changes

Ask AI to go back:

Revert to before we added the testimonials section

Or:

Undo the last 3 changes

Comparing Versions

Ask AI what changed:

What did we change in the hero section?

Building and Preview

Real-Time Updates

The preview updates automatically when:

• AI finishes writing code
• The build completes successfully
• No errors occurred

Build Errors

If something breaks:

1. Error details appear in the chat
2. AI explains what went wrong
3. A fix is usually suggested
4. You can ask AI to implement the fix

The build failed with a syntax error. Can you fix it?

Working with Brand Data

AI automatically accesses your brand data when available:

What AI Knows

• Brand name and description — Used in headlines and copy
• Brand voice — Influences writing style
• Target audiences — Shapes messaging focus
• Colors and visual identity — Applied to styling
• Features and benefits — Incorporated into sections
• Testimonials — Added authentically

Leveraging Brand Data

Reference it explicitly:

Use our brand colors for the CTA buttons

Write the hero copy targeting our primary audience

Add 2 testimonials from our brand data

Tips for Better Results

Common Requests

Adding Sections

Add a [section type] section [location] with [specific elements]

Examples:

Add a testimonials section below features with 3 customer quotes in a card layout

Add a CTA banner above the footer with a headline and email signup

Modifying Layouts

Change the features section from 4 columns to 2x2 grid on desktop

Make the pricing cards horizontal on mobile instead of stacked

Applying Styles

Apply a subtle gradient background to the hero section

Add hover effects to all buttons — slightly darker on hover

Responsive Adjustments

On mobile, stack the hero content vertically and center everything

Hide the secondary navigation on tablets and smaller

FAQ

Related Resources

• Writing Effective Prompts
• Using Design Mode
• Generating Images
• Creating Forms