Build a site with Webflow’s AI site builder

Updated

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

Good to know

This feature does not consume Webflow AI credits. Learn more about Webflow AI credits.

Webflow's AI site builder helps you create a professional, multi-page website in minutes, even if you have limited or no experience with web design. Just describe your site, including its purpose, pages (e.g., Home, About, Services, Blog, Contact), and the audience you're building for, and the AI site builder generates a complete site structure, content, and a theme you can adjust to your liking.

Before you get started

Webflow's AI site builder can only be used when creating a brand-new site or editing an existing AI-generated site — it can't be applied to an existing site that wasn't originally built with the AI site builder.

Without a paid Workspace or Site plan, your site's limited to two pages total. With either type of plan, the AI site builder generates up to five pages initially, and you can add more once your site's generated.

Note

To use AI-powered features in Webflow, make sure Webflow AI is enabled for your Workspace. You can enable or disable Webflow AI in Workspace settings > General.

How to generate a website

This is an overview of the process. Each part of this flow is covered in more detail below.

To generate a site with the AI site builder:

  1. In your Webflow Dashboard, click New site
  2. Choose AI Site Builder
  3. Describe what you want your site to be (e.g., colors, fonts, purpose, etc.), then click Generate
  4. Add/remove pages and refine each page's layout, then click Generate site
  5. (Optional) Click any page to edit it or change your theme, then click Back to all pages
  6. Click Continue building twice to open your site in Webflow

Generating the site structure

This is a starting point for your site structure. With a paid plan, you can add more pages after the site is generated.

Describe your desired site

Using the provided prompt, describe how you want your site to look and feel. For example:

  • Describe your preferred colors, fonts, style, and vibe (e.g., fun, minimal, upscale)
  • Describe what you do and what you want to highlight on your site
  • Describe your website's goal (e.g., ebook downloads, product sales, or sales inquiries)

When you describe your site, the AI site builder generates a proposed site structure — pages and sections — that you can refine. If you name specific colors, hex codes, or fonts in your description, or reference a brand you'd like your site to feel inspired by, the AI site builder maps those details to Webflow's theme system rather than copying them exactly.

If you want to change your site description, you can click Edit prompt 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 the site structure

You can add up to five pages at this stage. You can add more after the site's been created. If you're already at the limit, you can remove a page to add another.

To generate a new page:

  1. Click the Plus icon under "New page"
  2. Describe the page you want to generate
  3. Click Generate

Remove pages from the site structure

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

To remove a page:

  1. Click the Delete icon to the right of a page name

Manage page sections

You can reorder, delete, duplicate, change, or add sections for each of the generated pages.

  • Reorder sections — drag a section up or down in the structure. The navigation and footer sections can't be reordered.
  • Delete a section — click the Options icon on a section > Delete
  • Duplicate a section — click the Options icon on a section > Duplicate
  • Change a section — click the Options icon on a section > Change section > choose a section type
  • Add a new section — hover over a section > click the Add icon > choose a section type to add

Generating your theme and pages

Once you're happy with your site structure, click Generate site. The AI site builder creates full page designs for each of your pages along with contextually relevant content. You can preview all of your pages side-by-side, 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). These changes also apply across all generated pages.

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

When you're done, click Back to all pages, then Generate site.

Editing your site

After your design generates, the site opens in Webflow. For AI-generated sites, you're assigned the Marketer role by default, which lets you edit your site in a simplified building experience focused on moving sections around, editing copy, swapping images, and tweaking your theme. If you want to edit the site with full permissions, you can always switch back to your assigned role.

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.

Note

If you change your theme's image pack, existing images won't be affected. The new image pack is only applied to newly generated pages and sections.

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

Good to know

Sites generated with the AI site builder use the Flowkit CSS Framework — a structured collection of reusable utility classes, component patterns, and design tokens that streamline layout, styling, and interactions across your entire site.

Generate additional pages

If you don't have a paid Site plan or paid Workspace plan, your site is limited to two static pages (excluding the automatically generated Style guide page). For sites with a paid plan, 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 page with AI
  4. Choose the page type you'd like to generate

Customize your site with Webflow AI

You can use Webflow AI to customize the site further — for example, to design sections, generate or refine copy, create CMS Collection items, or get contextual help while building in Webflow.

Note

You must have a paid Workspace or Site plan to generate and edit copy using Webflow AI.

Previewing your site

You can preview your site to see how it'll look to visitors before you publish. Just click the Preview button at the top right.

Webflow AI site builder limitations

Webflow's AI site builder has some limitations to be aware of:

  • The 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
  • Sites created with the AI site builder before October 8, 2025 can't be transferred between Workspaces. Sites created on or after this date can.
  • You can't share Libraries from a site created with Webflow's AI site builder
  • Re-theming after your site's been generated doesn't apply to sections that have already been converted to components