I want to generate a page with AI

You're starting from scratch (no code, no site to reproduce) and you want to create sections or complete pages for Webflow. This guide shows you how to work with Claude to get exactly what you imagine.

Prerequisites:

A Convertex account
The AI setup configured (Claude + Skills + MCP)

The two approaches

You have two ways to build a page:

Approach	Advantage	When to use
Section by section	More control over each part	When you know precisely what you want
Full page at once	Faster	When you want a first draft quickly

Approach 1: Section by section (recommended)

This is the most reliable approach. You build your page step by step, checking each section before moving on to the next.

Start a conversation with Claude

Open Claude and begin by describing the overall context:

"With Convertex, I'm going to build a landing page for a project management SaaS. Modern design, dark background, purple accents. In px, free naming, content in English."

This gives Claude context for the entire conversation. It will maintain this visual direction for every section.

Ask for the first section

"Generate a hero section with a large catchy title, an explanatory subtitle, a purple CTA button, and a placeholder illustration on the right. Responsive."

Check in Convertex

Open Convertex to see the preview. Test the breakpoints. Request adjustments if needed:

"The title is too small. Set it to 56px on desktop and 36px on mobile." "Add a second button, white outline, next to the first one."

Ask for the next section

Once you're satisfied, move on:

"Now, generate a logos section: a strip of fictional client logos in grayscale, centered horizontally."

Continue section by section

Repeat for each section of your page. Example prompts:

Features section:

"Generate a features section with 3 columns. Each column has an emoji icon, an H3 title, and a short paragraph. White background, dark text."

Testimonials section:

"Create a testimonials section with 3 cards. Each card has a quote, the person's name, and their role. Clean and elegant design."

Pricing section:

"Generate a pricing section with 3 cards (Free, Pro, Enterprise). Each card has a plan name, a price, a list of features with check marks, and a CTA button. Highlight the Pro card."

CTA section:

"Create a final CTA section with a punchy title, a subtitle, and a large button. Purple background with white text."

Footer:

"Generate a footer with 4 columns of links (Product, Resources, Company, Legal), the logo at the top, and a copyright line at the bottom."

Convert each section

For each section, go to Convertex, click Convert then Copy, and paste into Webflow.

Approach 2: Full page at once

To get a first draft quickly. Claude will automatically break the work into sections if the page is long.

Describe the entire page

"With Convertex, generate a complete landing page for a fitness app. The page contains:

A hero section with title, subtitle, and CTA button

A features section with 4 columns of icon + text

A testimonials section with 3 cards

A pricing section with 3 plans

A footer with links and copyright

Modern design, vibrant colors on a white background. Responsive. In px, free naming, content in English."

Claude generates automatically

For pages with 4 or more sections, Claude uses an optimized process: it creates each section separately then assembles them. You don't have to do anything -- it handles everything automatically.

Review and adjust

Open Convertex to see the full result. Request global or section-by-section adjustments:

"Change the accent color to blue instead of purple, across the entire page." "The footer is too busy. Simplify it by keeping only 2 columns of links."

"A hero with a centered container of 720px max, an H1 at 56px in bold, a 20px paragraph in light gray, and two buttons side by side -- one solid purple and one white outline."

Less good:

"A hero."

Name the Webflow components

If you want an interactive Webflow component, ask for it by name:

"Create a Webflow navbar with logo on the left, links in the center, and a CTA button on the right. Hamburger menu on mobile." "Create a Webflow slider with 3 slides, each containing an image and text." "Create Webflow tabs with 4 tabs."

Claude automatically generates the correct technical structure.

Describe the responsive behavior

If you have specific needs for certain screen sizes:

"The 3 columns stack vertically on tablet. The title is 36px on mobile."

Give a visual direction

"Minimalist design, lots of white space, large typography." "Dark background, neon accents, futuristic style." "Corporate style, muted colors, sans-serif font."

Think of your prompts as a creative brief. The more context and detail you provide, the closer the result will match your vision.

What's next

The editor in detail: master all the editor features
MCP workflow for daily use: advanced techniques for working with AI
Client-First: if your project follows this methodology