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. 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. Choose a style, primary background, voice and tone, primary color
  7. 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 change the layout and color of individual sections:

  1. Hover over the section preview
  2. Click the “Next layout” icon or “Previous layout” icon to cycle through different layouts
  3. Click the “Swap styles” icon to change the section’s colors

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 transferred between Workspaces or used to share Libraries. These limitations are due to how AI-generated sites are structured.

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

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. Click 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