From the desk of David Utke
Subj: The best AI site creation tool I’ve used (full video tutorial here)
No coding, no templates. I just let Webflow AI do its magic and it created a beautiful, high converting website in minutes.
Webflow I would describe as a code relief platform for people who know HTML and CSS. That means if you understand these languages, you can create a highly functional website with Webflow without having to code every single little thing.
That’s the advantage of Webflow, but this AI website creation tool that Webflow launched has really unlocks Webflow for everyone else.
What is Webflow AI?
Webflow AI is an intelligent design and development assistant built into the Webflow platform, designed to help users build websites faster using natural language prompts and automation.
It leverages generative AI to assist with layout creation, content generation, styling, and even custom code suggestions, all within Webflow’s visual canvas environment.
The AI tool is built right into the platform and works by translating natural language commands into actual HTML/CSS structure in Webflow’s Designer.
To keep it simple, you can create a website based around a broad site description and the AI will generate the appropriate elements, containers, and styles automatically.
Then when in the visual canvas, you can add additional sections and have the AI create those sections that you can then customize.
What section exactly?
You get a bunch of different layouts to add int:
Hero section, features, footer, gallery, CTA, blog body, FAQ, content hero, banner and more. The AI will generate a layout, add it into your site design and then you can simply customize from there.
How Webflow AI Works under the hood
Webflow AI allows users to describe what they want in plain English, and the AI interprets these commands to create structured layouts instantly.
For custom code embeds or CMS logic, Webflow AI can generate:
- JavaScript snippets
- HTML embeds
- CMS logic conditions
Webflow AI will also write placeholder text depending on your prompt (you’ll need to customize this obviously) for items like product descriptions, headlines, FAQs, or any marketing copy, making it useful as a template to go off of.
Design Style Assistance
When in the process of creating your website you can dictate the overall style you’re looking for. You can choose from minimalistic, modern, playful, elegant, bold or you can let the AI tool create the style based on the topic of your site.
You can also tell the AI to create a “dark” or “light” style design too.
5. CMS Integration
You can generate CMS structures by prompting something like “create a blog collection with title, author, body, and publish date,” and the AI will set up the entire structure for you.
You can also add in the “content hero” section which is functionally your blog post presented in a well designed masonry grid layout.
WEBFLOW
A professional visual website builder that lets you create custom, responsive websites without writing code.
Get access to their powerful AI site builder tool as well.
Account Setup and Pricing
Webflow has site plans and workspace plans. Workspace plans are for teams that are developing websites on Webflow’s staging domain (webflow.io).
When these sites are ready then they’re moved over to a site plan. The site plans are as follows:
- Free – Test out Webflow, create a homepage and one additional page, no custom domain.
- Basic -150 static pages. Great for a business website.
- CMS – 150 pages and 2000 blog posts under the CMS
- Business – CMS but with more resources.
The CMS plan is $23 a month with a yearly purchase, while the basic plan is $14 a month with a yearly purchase.
The biggest difference is access to the content management system. If you need to blog and organize your sites content then the CMS plan is what you need. If you’re building a static website and are fine building out bunch of pages, then the Basic plan is enough.
Launching the AI Tool
Once you’re in your Webflow dashboard, click on “new site” to launch the AI website creation tool. You can select a way to get started – you can start with a template, a blank site, or the AI site builder. Launch the AI site builder by clicking on it.
The AI will first ask you what you are building – either a personal project or a business. Then it wants you to provide the name of your business and share some details about your site. You can write out a description yourself or use generative AI like ChatGPT to create a site description.
Customizing Your AI-Generated Website
Once you’ve provided your site details, you can define your style. The AI offers several style options:
- Professional
- Natural
- Minimalistic
- Futuristic
- Elegant
- Playful
- Bold
- Colorful
- Sophisticated
- Bright
You can also choose your primary background (light or dark), brand tone and voice, and primary color. The great thing is you can always go back and regenerate the site if you’re not happy with how it came out.
Theme and Typography Customization
After the AI generates your site, you have extensive customization options:
Theme Selection: You can choose your theme and cycle through different colors. You get a bunch of different options, both light and dark themes, with various color schemes.
Typography: The AI pairs body text with appropriate headers because certain header text and body text go together and some don’t. Right out of the box, it’s picking a style that makes sense and looks great. You can choose from different font packs including sand, surf, mixed, mono, and creative fonts.
Sections: You can switch around different section styles and colors. For example, you can make the footer inverse (black), choose all primary sections, or alternate between primary and secondary styles.
Buttons: Choose your button style, color, and roundness. You can make buttons really round, a little bit round, simple, bold, or extra bold.
Cards: Cards are objects on the web page, and you can customize their drop shadows, designs, colors, and styles.
Adding New Sections
The AI tool allows you to add new sections while you’re still in the AI process. You can add:
- Hero
- Features
- Pricing sections
- Call to action
- Testimonials
- Content feeds (useful if you have the CMS plan)
- Blog posts
- FAQ sections
- Contact forms
- Team sections
- Navigation bars
- Footers
Each section type comes with multiple design options that you can cycle through and choose from.
Editing in Webflow design canvas
When you’re finished with the AI tool, click on “start building” to import your site into Webflow’s design editor. This is where you can make more detailed customizations.
The design editor has a right-hand sidebar with all your technical details for whatever block you’re editing. When you click on an element, you can see if it’s an H1 heading, adjust style settings, change settings, custom attributes, and search engine indexing details.
Editing Content and Images
To change the copy of any block you see on your site, just double-click it and start typing whatever copy you want. For images, click on the little gear icon and then click on “replace image.”
Remember, if you make a mistake, press Ctrl+Z to undo anything since there’s no reverse button.
Working with “components”
Components in Webflow are block elements that will appear on all the pages of your website like your header and footer block. This allows for consistent design and efficient editing process.
Updating Your Logo
I recommend creating a graphic yourself with your favorite design tool, the size should be 200-300 px by 50-100 px. I generally use 200 x 50 for my logos within Webflow.
- Double-click on the existing logo and backspace to remove it
- Click on the box so it’s highlighted with a blue outline
- Drag and drop your new logo into place
- Adjust the size as needed
Navigation and Button Customization
The menu items at the top (gallery, about, blog, etc.) are simple to customize. You can change the text by literally just typing in and changing the text as needed.
To change where a specific link is linking to, you need to click on the navigator, find the menu list, then the nav link, and update the URL.
For the main button in your navigation, navigate to the button group in the navigator, find the button text, and update the URL where it says “URL.” If you’re linking externally, make sure to set it to open in a new tab.
Footer Customization
Editing the footer is simple – just double-click into any text box to change the copy. You can update any type of link using the same two-step process as the menu items.
If you want to add more items to the footer, the simplest way is to right-click on an existing item like LinkedIn and click on “duplicate.” Then you can update the links as needed.
If you’re not happy with the footer at all, you can regenerate it with the AI. Click on the star icon, accept, then click on “footer” and it’ll generate a new footer with different design options.
Creating Additional Pages
Adding pages to your Webflow website is very easy and you’ll need to add pages as the AI create links in your menu to things like your “about” page as well as “contact” page.
The only issue is these pages don’t exist so you’ll need to create them and any other additional pages your design needs.
For that you have two options:
AI-Generated Pages
The AI can autogenerate specific pages like an about page. When you select this option, the AI creates a well-designed page that you can then customize to your liking.
The performance is outstanding, and you get a professional-looking page that matches your site’s design, just customize it as needed.
Building from Scratch
If you want to build a page from scratch, you start with a blank canvas and add components like your navigation and footer.
Then you can add different “elements” (from the left-hand menu where it says elements) using the plus button on the left-hand side, or use the AI to generate layouts by clicking the “generate layout” button that you then customize.
Variables
On the left-hand side, you have something called “variables.” This is where you can change everything broadly across your site.
Under the design system defaults, you can change:
- Accent colors across the site
- Typography
- Background colors
- Text colors
- Border colors
- Radius settings
- Spacing and gaps
- Base typography
This gives you really detailed granular technical options on the back end. While you can edit individual blocks, using variables lets you control the site design broadly speaking.
Who Should Use Webflow AI?
Once you understand your way around Webflow, the AI site builder really unlocks the creative design and power of this platform, particularly for non-coders.
With that said, here are some ideal users of Webflow.
Designers
Build and iterate faster without needing developers for basic layout logic. The AI handles the heavy lifting for design and layout while you focus on customization and refinement.
Marketers
Quickly generate and revise landing page copy, SEO sections, and other marketing content. The AI can write product descriptions, headlines, FAQs, and any marketing copy you need.
Developers
Use AI to scaffold code or get quick custom solutions without context switching. The AI can generate JavaScript snippets, HTML embeds, and CMS logic conditions.
Agencies and Freelancers
Save time on mockups, boilerplate designs, and client-specific builds. The AI tool allows you to create professional websites quickly and then customize them for each client.
Non-Technical Users
The AI significantly lowers the learning curve. You can describe what you want, and Webflow AI builds it, making the platform accessible to those who don’t know HTML or CSS.
Limitations and Considerations
While Webflow AI is powerful, it’s not a full replacement for manual design. AI-generated layouts may need refinement, and content accuracy or tone can vary, so human editing is still important.
Custom interactions and complex CMS logic may require manual tweaks and editing aspects of the AI design like a mega menu can be quite confusing and frustrating.
For complete beginners who are new to Webflow, there is going to be a learning curve, but if you apply yourself and take the time to understand this platform you’re going to love how beautiful and creative of a website you can make.
Final thoughts on the AI Site Builder from Webflow
The combination of AI-powered generation and Webflow’s robust design capabilities makes this one of the most compelling AI website builders available today.
Whether you’re building a simple business website or a complex content-driven site, Webflow AI provides the tools and flexibility to create something truly professional and unique.
Webflow AI now empowers both beginners and pros to accelerate website creation with natural language, reducing the need for constant context switching between design, development, and copywriting tools.
Any questions? Let me know, I’m here to help.
WEBFLOW
A professional visual website builder that lets you create custom, responsive websites without writing code.
Get access to their powerful AI site builder tool as well.
How I can help you. You're here, let's do this:
1. Website Review Your website may be clear and specific to you, but it may be really confusing to anyone who visits. That's where I come it, I'll give you actionalbe feedback to improve your site with my highly rated gig.2. My YouTube channel Helpful video tutorials showing you how to launch, grow and monetize your audience.
