Design Assistant

Use the Design Assistant for more efficient site building.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

You can use Design Assistant in the Designer to automate repetitive tasks and streamline your site build workflows. This is useful when building standard site pages and sections, such as navbars, footers, testimonials, hero sections, etc. The Design Assistant understands the context of your site, its styles and content, and will automatically tailor new sections to match.

How to access the Design Assistant

To access the Design Assistant, drag a section from the Add panel onto the canvas. Then, click the “Design Assistant” icon in the top right corner of the right panel.

How to use the Design Assistant

Once you’ve opened the Design 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 Design 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 Design 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 Design Assistant panel. Note that the Design 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 Design Assistant

Keep in mind that while the Design 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 Design 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 Design Assistant, it will take longer than subsequent uses since it needs to analyze your site styles. The Design Assistant can add classes and reuse existing ones, but it cannot update your existing classes.

Webflow does not train the Design Assistant on your site content.

By using the AI Design Assistant, you're agreeing to Webflow's product terms.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top