Creating Landing Pages

Learn how to create stunning landing pages in seconds using AI-powered generation. This guide covers everything from writing effective prompts to understanding the generation process.

Quick Start

Step 1: Navigate to Landing Pages

1. Click Landing Pages in the sidebar
2. Click the "Create Landing Page" button
3. The AI generation dialog will appear

Step 2: Write Your Prompt

Describe the landing page you want to create. Be specific about:

• Purpose: What is the page for? (product launch, lead gen, event, etc.)
• Target Audience: Who is this page for?
• Key Features: What should be highlighted?
• Tone: Professional, casual, friendly, technical, etc.

Example:

Create a landing page for a SaaS project management tool called "TaskFlow".
Target audience: small teams and startups. Highlight features like real-time
collaboration, task automation, and integrations. Include pricing tiers
(free, pro, enterprise) and customer testimonials. Professional but friendly tone.

Step 3: Watch AI Generate Your Page

The AI will work through several steps:

1. Structure Generation - Determines page sections (hero, features, pricing, etc.)
2. Component Selection - Picks appropriate component variants
3. Content Generation - Writes copy for each section (runs in parallel)
4. Naming - Creates an SEO-friendly URL slug
5. Save - Stores your new landing page

You'll see real-time progress: "Generating hero section... (2/5 complete)"

Step 4: Review and Customize

Once generated, you'll land in Preview Mode where you can:

• View your complete landing page
• Chat with AI to request changes
• Switch to Edit or Design mode for manual adjustments

Writing Effective Prompts

Basic Prompt Structure

A good prompt includes:

[Type of page] for [product/service name] - [brief description]
Target: [audience]
Highlight: [3-5 key features or points]
Include: [specific sections needed]
Tone: [voice and style]

Beginner Examples

Example 1: Simple SaaS Product

Landing page for an email marketing tool. Target small businesses.
Highlight drag-and-drop editor, automation, and analytics. Include
pricing and testimonials.

Example 2: Mobile App Launch

Launch page for a meditation app called "Mindful". Target busy
professionals. Highlight guided sessions, sleep stories, and progress
tracking. Friendly and calming tone.

Example 3: Service Business

Landing page for a web design agency. Target startups needing their
first website. Highlight portfolio, process, and packages. Include
contact form and recent client work.

Advanced Prompt Techniques

1. Include URL Context

If you have a reference or competitor website, mention it:

Create a landing page similar to [competitor.com] but for our AI writing
assistant. Focus on speed and quality. Include before/after writing examples.

The AI will crawl the URL and extract relevant context!

2. Specify Component Preferences

Landing page for a conference. Use a video hero background, feature grid
for speakers, timeline for schedule, and registration form in the hero.
Include sponsor logos.

3. Define Brand Personality

Landing page for a cybersecurity SaaS. Target: IT managers at enterprises.
Very technical and security-focused tone. Use dark colors and emphasize
compliance certifications (SOC2, GDPR, ISO).

4. Request Specific Copy Angles

Landing page for a productivity app. Use pain point approach: highlight
how users waste time with scattered tools. Position our app as the
all-in-one solution. Include ROI calculator.

Prompt Do's and Don'ts

✅ Do:

• Be specific about your target audience
• Mention 3-5 key features or benefits
• Include desired sections (pricing, testimonials, etc.)
• Specify tone and style
• Reference competitor sites for context
• Mention any must-have components (forms, videos, etc.)

❌ Don't:

• Be too vague: "Create a landing page for my product"
• Write a novel: Keep it under 200 words
• Include actual content: Let AI generate the copy
• Specify technical details: AI handles implementation
• Mix multiple unrelated purposes

Understanding the Generation Process

1. Structure Generation (5-10 seconds)

The AI analyzes your prompt and decides:

• Which sections your page needs
• The logical order of sections
• How many of each section type

Typical structure:

1. Hero (opening section)
2. Social Proof (logos or testimonials)
3. Features (product highlights)
4. Features (additional details)
5. Pricing (plans and tiers)
6. FAQ (common questions)
7. CTA (final call-to-action)
8. Footer

2. Component Selection (2-5 seconds)

For each section, AI selects the best component variant:

• Hero: Simple, Split, Video, Form, etc.
• Features: Grid, List, Tabs, Bento, etc.
• Pricing: Cards, Table, Comparison, etc.

The AI considers:

• Your prompt context
• Section purpose
• Visual variety across the page
• Conversion best practices

3. Content Generation (10-20 seconds)

AI generates content for all sections in parallel:

• Headlines and subheadlines
• Body copy
• Button text and CTAs
• Feature descriptions
• Pricing details
• FAQ questions and answers

Content follows best practices:

• Clear, benefit-driven copy
• Active voice and action verbs
• Appropriate reading level for audience
• SEO-friendly headlines
• Accessibility considerations (alt text, aria labels)

4. Naming (1-2 seconds)

AI creates an SEO-friendly URL slug:

• Based on page purpose and content
• Lowercase with hyphens
• Memorable and descriptive

Examples:

• taskflow-project-management
• mindful-meditation-app
• cybersecurity-enterprise-platform

You can change this later when publishing!

After Generation: Next Steps

Option 1: Iterate with AI (Preview Mode)

Stay in Preview Mode and chat with AI to refine:

Example requests:

• "Make the hero headline more compelling"
• "Add a testimonials section after features"
• "Change the pricing to show monthly and annual options"
• "Make the tone more casual and friendly"
• "Add a video demo section"

The AI will regenerate or modify specific sections.

Option 2: Manual Editing (Edit Mode)

Switch to Edit Mode to:

• Click any component to edit properties
• Change text, images, buttons directly
• Swap component variants
• Reorder sections with drag-and-drop

Option 3: Customize Design (Design Mode)

Switch to Design Mode to:

• Adjust brand colors
• Change fonts and typography
• Modify spacing and layout
• Add custom CSS

Tips for Success

For Best Results

1. Be Specific About Audience: "SaaS founders" is better than "businesses"
2. Mention Actual Product: Include product/company name in prompt
3. List 3-5 Key Points: Too few is vague, too many is overwhelming
4. Specify Tone: Professional, casual, technical, friendly, etc.
5. Include Desired Sections: Pricing, testimonials, FAQ, etc.

Common Use Cases

B2B SaaS

Enterprise-grade [product category] for [specific role]. Highlight ROI,
integrations with [tools], and security/compliance. Include customer logos,
case study, and enterprise pricing. Professional tone.

B2C App

Mobile app for [purpose] targeting [demographic]. Showcase [3 features],
app screenshots, and app store ratings. Include video demo and download
buttons. Friendly, energetic tone.

Lead Generation

Download our [resource type] about [topic]. Target [audience]. Highlight
what they'll learn, who it's for, and why it's valuable. Include form to
download. Authority-building tone.

Event/Webinar

Registration page for [event name] on [date]. Target [attendee type].
Highlight speakers, agenda, and key takeaways. Include registration form,
venue details, and FAQ. Exciting tone.

Troubleshooting

"The AI generated the wrong structure"

Solution: Be more specific about sections needed:

Create a landing page for [product]. Must include: hero with form,
feature comparison table, pricing cards, video testimonials, and FAQ.

"The tone doesn't match my brand"

Solution: Request a tone change in Preview Mode:

Make the entire page more [professional/casual/technical/friendly].
Adjust all copy to match [brand] personality.

"I wanted different components"

Solution: In Preview Mode, request specific components:

Replace the simple hero with a video hero. Change the feature list
to a feature grid with icons.

"Content is too generic"

Solution: Provide more context in your prompt:

• Include competitor URL for reference
• Mention specific features and benefits
• Add unique selling propositions
• Specify customer pain points

Advanced: URL Crawling

When you mention a URL in your prompt, the AI will automatically crawl it to extract:

• Page structure and sections
• Key messaging and copy style
• Feature highlights
• Visual patterns

Example:

Create a landing page similar to stripe.com/payments but for our invoice
automation software. Target: accounting teams at mid-size companies.

The AI will analyze Stripe's payments page and apply similar patterns to your page!

Powered by: Firecrawl (extracts clean content from any website)

What's Next?

Now that you've created a landing page, learn how to customize it:

• Component Library - Explore all 35+ components
• Editing Pages - Master Preview, Edit, and Design modes
• Design Systems - Customize your brand look
• Publishing - Make your page live

Quick Reference