Use the Webflow AI Assistant to generate new page sections using your site’s existing design system.
Note
While in beta, modifying page designs using the AI Assistant is limited
to a small number of free templates and sites created with
Webflow's AI site builder.
You can use the AI Assistant to automate repetitive tasks and streamline your site build workflows when designing in Webflow. This is useful when building standard site pages and sections, such as navbars, footers, testimonials, hero sections, etc. The AI Assistant understands the context of your site, its styles and content, and will automatically tailor new sections to match.
How to access the AI Assistant
Note
If you’re on a Starter, Core, Growth, or Enterprise Lite Workspace plan, modifying page designs with the AI Assistant is enabled by default. Workspace owners and admins can disable modifying page designs with the AI Assistant under Workspace settings.
For Enterprise plan users, modifying page designs with the AI Assistant is disabled by default. Workspace owners and admins can enable modifying page designs with the AI Assistant under Workspace settings. Site managers can enable modifying page designs with the AI Assistant on specific sites under Site settings.
To access the AI Assistant, drag a section from the Add panel onto the canvas. Then, click the “AI Assistant” icon in the top right corner of the right panel.
How to use the AI Assistant
Once you’ve opened the AI Assistant, you can choose one of the listed layouts to add it to your site page or click Find a layout to choose something not listed. If you’re searching for a layout, type a description in the text box and click Find layout.
After you choose a layout, the AI Assistant will generate designs based on your choice. You can hover over these to view a larger version and choose which design to add to your canvas, or click the Show more button to request additional designs.
When you choose a design to add to your canvas, your site’s classes and variables are automatically applied to the design. The AI Assistant will create new classes for styles that haven’t been previously set on your site. You can view these by clicking the Classes created and Classes used buttons in the AI Assistant panel. Note that the AI Assistant can add classes and reuse existing ones, but it cannot update your existing classes.
To edit your design after it’s been placed on the canvas, click Continue editing and choose what you’d like to edit. Then, submit your request in the text box and click Update.
How to undo adding an AI-generated section to your site
If you want to go back a step in the AI chat, you can click the Undo button. If you want to remove the design AI generation and its corresponding classes, click Command + Z (on Mac) or Control + Z (on Windows).
Limitations of the AI Assistant
Keep in mind that while the AI Assistant is a powerful tool, it doesn't include components, images, or dynamic data in the designs, and it can't generate individual elements. It's designed to provide a first draft, so we recommend you review the generated designs and styles for accuracy. The AI Assistant understands the context of your site, its styles, and content, and will automatically tailor new sections to match. The first time you use the AI Assistant, it will take longer than subsequent uses since it needs to analyze your site styles. The AI Assistant can add classes and reuse existing ones, but it cannot update your existing classes.