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 and AI Assistant.

Important

Webflow’s AI site builder is currently in beta. Visit our AI site builder page to get early access and explore its features. It’s coming soon for Enterprise users. Use during the beta is subject to our Beta Program Terms.

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

Generate a homepage or landing page

Before you begin

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.

By providing some basic details, you can generate a complete, responsive homepage or landing page using Webflow’s AI site builder. The site builder uses the information you provide to tailor the page to your needs and generate a theme you can adjust to your liking. 

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.

To generate a page using the AI site builder:

  1. Click New site from your Dashboard
  2. Click AI Site Builder
  3. Choose business or personal
  4. Enter a name for your site and click Next
  5. Enter a business or project description and click Next
  6. Review the proposed section structure for your page. You can add, duplicate, remove, or reorder sections, then click Next
  7. Choose a style, primary background, voice and tone, primary color
  8. Click Generate

The AI site builder will generate a preview of your page, along with options to choose and customize your site's theme.

If you'd like to change any of the information you provided to the AI site builder (e.g., site name, description, etc.), click Edit prompt. When you've made your changes, click Regenerate to generate the page again using your new information.

Note

Editing your site's details and clicking Regenerate will replace the current version of your page, along with generated themes and any customizations you've made. This action is irreversible.

You can choose different themes from the left panel — this will change:

  • colors
  • typography
  • sections
  • images
  • buttons
  • forms
  • cards
  • spacing
  • roundness (border-radius)

If you like some parts of the theme but not others, you can adjust each aspect individually. 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

Once you're happy with the design, click Start building to confirm your site information and theme and open your site.

Important

Sites built with Webflow’s AI site builder can’t be used to share Libraries.

Customize your site's theme

When you open your site in the main design experience, you can continue to customize your chosen theme by changing colors, fonts, buttons, etc. Any changes you make are reflected across your site. You can access theme settings by clicking on 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

As well as your homepage or landing page, 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 Webflow’s 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

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

Note

You’re allowed a maximum of two static pages on the free Starter plan. You can upgrade your Site plan to add more pages. The automatically generated Style guide page doesn’t count towards the static page limit.

Use the AI Assistant to customize your site

You can use the AI Assistant to customize your site further by modifying page designs, generating copy and CMS Collection items, and getting contextual help with building in Webflow.

Modify page designs

You can quickly create new section layouts 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 the AI Assistant to generate and refine contextually relevant copy for your site without leaving Webflow.

Note

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

Learn how to generate copy using the Webflow AI Assistant.

Generate CMS Collection items

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

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.

Related articles