Build a site with Webflow’s AI site builder

Learn how to quickly build and launch an entire site with Webflow’s AI site builder.

Use Webflow’s AI site builder to quickly create professional, responsive websites, even if you have limited or no experience with web design.

Generate a website

By providing some basic details, you can generate a complete, responsive multi-page site (e.g., Home, About, Services, Blog, Contact) using Webflow’s AI site builder. The site builder uses the information you provide to generate a site structure, content, and a theme you can adjust to your liking.

To get started with the AI site builder:

1. In your Webflow Dashboard, click New site

2. Choose AI Site Builder

Generate and refine your site structure

When you describe your site, the AI site builder generates a proposed site structure — pages and sections — that you can refine. The AI site builder can generate up to five pages based on your prompt.

To generate your initial site structure using the AI site builder:

1. Describe your site (e.g., what you do, where you’re based, and the goal of your website)

2. Click Generate site structure

Once your site structure’s been generated, you can refine it to suit your needs by adding and removing pages, or by adding, removing, reordering, and changing sections.

If you want to change your site description, you can click Edit prompt in the left panel to update it and regenerate your site structure. Regenerating replaces your current site structure and removes any page or section edits you’ve made.

Add pages to your site structure

You can add pages to your site structure in two ways:

• Duplicate an existing page

• Generate a new page

Duplicate an existing page

To duplicate an existing page:

1. Click the “three dots” icon next to the page name

2. Click Duplicate

The new page is added to the right of the page you duplicated and shares the same page name. You can edit the page name in the Pages panel once your site’s been generated.

Generate a new page

To generate a new page:

1. Hover next to the page name where you want to add a new page

2. Click the “add” icon

3. Describe the page you want to generate

4. Click Generate

The AI site builder adds the page with a name based on your prompt. You can edit the page name in the Pages panel once your site’s been generated.

Remove pages from your site structure

You can remove any page from your site structure, except the homepage. To remove a page:

1. Click the “three dots” icon next to the page name

2. Click Delete

Add sections to a page

You can add sections to a page in your site structure in two ways:

• Duplicate an existing section

• Add a new section

Duplicate an existing section

To duplicate an existing section:

1. Click the “three dots” icon next to the section name

2. Click Duplicate

The new section is added below the section you duplicated and shares the same section name. You can reorder the duplicated section by dragging it up or down.

Add a new section

To add a new section:

1. Hover above or below the section where you want to add a new section

2. Click the “add” icon

3. Click the section type you want to add

The new section is added where you clicked the “add” icon and shares the same section name. You can reorder the new section by dragging it up or down.

Remove sections from a page

You can remove any section from a page, except the Navigation and Footer components. To remove a section:

1. Click the “three dots” icon next to the section name

2. Click Delete

Reorder sections

You can reorder any of your page sections, except the Navigation and Footer components. Note that you can’t move sections between pages.

To reorder a section:

1. Hover over the section you want to move

2. Click and drag the section to its new position

3. Release your trackpad or mouse button to confirm

Change sections

You can change page sections to a different layout — for example, if a page includes a Logo section that you don’t need, but doesn’t include a Gallery section that you do. You can change any of your page sections, except the Navigation and Footer components.

To change a section:

1. Click the “three dots” icon next to the section name

2. Click Change section

3. Choose the section type you want to change the section to

Generate your design and customize your theme

Once you’re happy with your site structure, click Generate design. The AI site builder will create full page designs for each of your pages, along with contextually relevant content. You can preview all of your pages side-by-side in the All pages view, or click an individual page to view it full screen.

When viewing an individual page, you can adjust your site’s theme from the left panel. Choosing a different theme at the top of the panel updates your entire site design, including:

• colors

• animations

• typography

• sections

• images

• buttons

• forms

• cards

• spacing

• roundness (border-radius)

If you like some parts of a theme but not others, you can fine-tune the options below the theme picker (e.g., colors, typography, animations). Those changes also apply across all generated pages, not just the page you’re previewing.

You can also add, customize, reorder, and remove individual sections in the canvas preview — hover over a section:

• Click the “Add section” icon to insert a new section

• Click the “Replace section” icon to browse available layouts and select a new section

• Click the “Move section up” or “Move section down” icons to reorder the section

• Click the “Swap styles” icon to change the section’s colors

• Click the “Delete section” icon to remove the section from your page

Upgrade your Site plan or select pages to continue building

Sites on the free Starter Site plan in a Starter Workspace are limited to two static pages. If your site has more than two pages and you’re generating it in a free Starter Workspace, you'll need to upgrade to a paid Site plan, or select two pages to continue building. Note that the homepage is selected by default and can’t be unselected.

Upgrade your site plan to continue building with all pages

To upgrade your Site plan and continue building with all pages:

1. Click Continue building from the All pages view, or Select pages from an individual page preview

2. Select all of your site’s generated pages in the Select pages modal

3. Click Upgrade plan

4. Choose a Site plan

5. Choose a billing frequency (annual or monthly)

6. Complete your purchase

You can then continue building your site in Webflow with all of your generated pages. You can also add more pages to your site if needed.

Select pages to continue building with two pages

To select pages and continue building with two pages:

1. Click Continue building from the All pages view, or Select pages from an individual page preview

2. Select one page in addition to your homepage (which is selected by default and can’t be unselected)

3. Deselect all other pages

4. Click Continue building

Note that unselected pages are permanently deleted. You can then continue building your site in Webflow with your two selected pages. You won’t be able to add more pages until you upgrade your Site plan.

Continue building your site in Webflow

Once your site opens in Webflow, you can continue to refine your theme, use the Style guide page to adjust global styles, generate additional pages, and use Webflow AI to further customize your site.

Customize your site's theme

You can continue to customize your site’s theme by changing colors, fonts, buttons, etc. Any changes you make are reflected across your site. You can access theme settings by clicking the "Theme" icon in the left toolbar.

Style guide page

In addition to your selected pages, the AI site builder also automatically generates a style guide page, where you can view and customize your site’s styles, elements, layouts, and effects (e.g., colors, typography, cards, sliders, spacing, gradients, etc.).

To open the Style guide page:

1. Open the Pages panel from the left toolbar

2. Click Style guide under Static pages

Generate additional pages

You can use Webflow’s AI site builder to quickly generate additional pages for your site (e.g., About, Contact, Team, etc.). To generate a new page:

1. Open the Pages panel from the left toolbar

2. Click the “Create New Page” icon

3. Click Generate new page with AI

4. Choose the page type you’d like to generate

Use Webflow AI to customize your site

After generating your site with Webflow’s AI site builder, you can use Webflow AI to customize it further — for example, to design sections, generate or refine copy, create CMS Collection items, or get contextual help while building in Webflow.

Design sections

You can quickly create new sections with your site’s styles and classes using the AI Assistant. Learn how to modify page designs using the Webflow AI Assistant.

Generate copy

You can use Webflow AI to generate and refine contextually relevant copy for your site without leaving Webflow.

Learn how to generate copy using Webflow AI.

Generate CMS items

If you decide to leverage the Webflow CMS, you can quickly generate new Collection items with Webflow AI. Learn how to generate new Collection items using Webflow AI.

Get contextual help

Get help using Webflow in a conversational format with the AI Assistant. Learn how to get contextual help using the Webflow AI Assistant.

Limitations of Webflow’s AI site builder

Webflow’s AI site builder is in beta, and there are a few important limitations to be aware of:

• Webflow’s AI site builder is only available when creating a brand-new site or editing an existing AI-generated site — you can’t apply it to an existing site that wasn’t originally built with the AI site builder.

• You can’t share Libraries from a site created with Webflow’s AI site builder.