AI is everywhere. You can't spend five minutes on the internet without reading about how some company is creating a new AI feature for their brand. Every company from Apple to Figma is creating their own AI tools.
While a lot of these new products are over hyped, some of them are not. Webflow is one company that offers a range of actually useful AI tools for its platform.
Webflow's AI tools cover a wide variety of tasks, including:
- Building a website
- Modifying page designs
- Generating copy
- Getting contextual help
- Automatic optimization
- Localization and translation
In this guide, we'll talk about what these tools do, and how you can get the most out of them.
Best Practices for AI Tools
AI has been around for a while now. Although the generative AI hype cycle began in 2022 with ChatGPT, marketers and web developers had been using AI tools for years before that.
As a result, there's been plenty of time for people to figure out some general best practices for using AI. These apply to all of Webflow's AI tools, and should be applicable to most other AI programs on the market.
Use AI for simple and generic tasks. By default, AI models are not really tailored to your brand, although it is possible to make them a little better by gradually feeding them relevant training data.
Generative AI works best for simple, common, boilerplate level tasks that are fairly boring and require low levels of creativity.
Avoid using AI for anything sensitive or high-impact. Using an external program always introduces security risks. You should avoid sharing important information unless you absolutely have to. You should also not rely on LLM outputs for high-risk information, such as legal agreements or medical advice.
Rely on human experts for novel, high-risk, or idiosyncratic tasks. Your core features—what you really offer to the world—will seldom be the output of an AI program, or else someone else would have built them already. Anything that makes your application or website truly special will likely be more complicated than anything an AI can build on its own.
Experiment optimistically. All AI programs are random. You can't totally predict what they will do from one minute to the next. For that reason, it's good to experiment and play with them, always seeking new possibilities, so long as you keep some safety guardrails in place.
Train AI tools for long-term use. Ideally, you can upload existing content, web pages, style guides, and more, so that any and all generative AI models you use will become accustomed to your brand over time.
Prompt Engineering for Better Results
Webflow's AI tools are powerful—but like all generative AI, the quality of the output depends on how you phrase your input. That’s where prompt engineering comes in.
Think of prompts as instructions to a very eager assistant. Vague or overly broad prompts will get you generic results. But well-structured, specific prompts guide the AI to deliver output that aligns with your goals, tone, and brand.
Whether you're generating web copy, page layouts, or CMS items, investing a little time into better prompts pays off. Good prompts save time, improve quality, and reduce frustration. Treat them as part of your creative toolkit, not just a throwaway input.
Basic Prompt Tips
Here are some general guidelines for writing better prompts in Webflow:
- Be specific. Include the type of content, its purpose, and the desired tone.
- Mention your audience. Clarify who you're targeting (e.g., freelancers, enterprise clients, restaurant-goers).
- Include format guidance. Say if you want a list, paragraph, or headline.
- Use examples. Reference real websites or include model text if available.
- Save your best prompts. Once you find prompts that work, document and reuse them. This is especially useful if you're working in a team or producing lots of similar content.
Prompt Examples
Web Copy Generation
Bad Prompt:
- “Write homepage copy for a business.”
Better Prompt:
- “Write a homepage hero section for a productivity app aimed at remote teams. The tone should be friendly and modern. Highlight features like task management, time tracking, and Slack integration.”
Layout Suggestions
Bad Prompt:
- “Add a pricing section.”
Better Prompt:
- “Add a pricing section for a SaaS tool with three tiers: Free, Pro, and Enterprise. Use a clean, card-based layout and include a CTA under each tier.”
CMS Item Creation
Bad Prompt:
- “Generate blog post ideas.”
Better Prompt:
- “Generate 5 blog post titles for a Webflow agency that helps small businesses build better websites. Focus on SEO, design, and content strategy.”
Iterating and Refining
Don’t hesitate to regenerate content a few times or adjust your prompt wording. AI tools often get better results after a couple of iterations—especially if you:
- Add more context
- Break a large task into smaller prompts
- Give sample outputs for inspiration
Webflow AI Assistant
Several of Webflow's AI tools fall under the umbrella of their AI Assistant. This service provides in-context help and ideas while you build on the Webflow platform. This can take the form of:
- Web copy
- New or modified pages
- Help and suggestions
- Generating CMS Collection Items
Webflow's AI Assistant is currently in beta mode, and is only available for Workspace or Site plans.
Generating Web Copy
Gone are the days when you had to throw "Lorem Ipsum" up everywhere. Now you can use Webflow's automatic AI-driven web copy generator for your website. It can generate or refine static or dynamic copy in the following categories:
- Headings
- Paragraphs
- Text Blocks
- Rich Text
- Text Links
- Block Quotes
Like with all AI tools, the web copy generator is best for short, simple, and introductory use cases. It's great for quickly putting something together for an MVP or demo, but not effective for anything that requires depth or needs to be made unique to the voice of your brand.
Modifying Page Designs
If you have existing pages on your Webflow site that you want to change or expand, Webflow's AI Assistant can help with that. It learns from your design systems and site context how to generate appropriate new sections for your website. By giving it simple conversational prompts, the system can build common site sections such as:
- Pricing
- Features
- Testimonials
- CTAs
Context-driven Help and Suggestions
The AI Assistant can automatically search the Help Center for information relevant to your situation. It does this completely anonymously, using an encrypted client ID.
For example, you might ask the system: How do I set up a new CMS Collection? The AI Assistant will then scan the Help Center for any articles that are relevant to CMS Collections, and also for any other information particular to your specific situation.
There are limits for using this service. You can only ask the AI Assistant 100 questions every 31 days, but it will let you know when you are reaching that limit.
Webflow AI Site Builder
One of Webflow's most powerful AI tools creates an entire website for you at the click of a button.
The AI Site Builder takes your human input and combines it with several generative AI programs to create a professional website complete with layout, images and copy.
To start, you tell the AI Site Builder what you want by selecting relevant factors like theme and tone. By default, this will only create a homepage and a style guide page. However, from that you can use the "create page with functionality" tool to add subsequent pages as needed.
This tool has two obvious benefits: it's fast, and it's easy. If you just need something put up quick, like a demo website or a very simple MVP, it can be a good approach.
But those benefits imply some serious limitations, too. AI tools alone are simply not going to build the perfect, tailored website that you need. AI will not have the nuanced understanding or advanced expertise that a real human can provide.
If your website will need more than just a few pages, or if it will have any nontrivial features, then the AI Site Builder on its own won't be enough. But it can be a great start.
Localization and Translation
Almost the entire world is connected to the Internet. But if your website doesn't support Swahili or Dutch, it's not going to be useful to visitors in Nairobi or Amsterdam.
Webflow's AI-driven localization features make it easy to adapt the content of your website to different places around the world through automatic translation. It is an end-to-end solution for customizing your site for a worldwide audience:
- Localizing static pages and CMS items. When switching between locales, you can customize static pages and CMS content directly.
- Localizing images and alt text. These factors can be automatically adjusted across locales to fit local needs and retain accessibility features.
- Controlling element visibility. Show or hide elements in different locales to deliver the right site experience based on visitor region.
- Customizing styles and themes. Typography, colors, headlines, formats, fonts, and more can be adjusted to fit the needs of each region or language.
These localization tasks can also be carried out by your method of choice—either through Webflow's native translation system, or by connecting your external program of choice.
Done right, localization can rapidly ship new sites and save on development costs. It's important to keep humans in the loop, however, by carefully and repeatedly checking your localization efforts for correctness.
Webflow Optimize: Automatic Optimization of Content
Webflow Optimize is a powerful optimization tool built into the Webflow platform. It uses the power of AI to help you maximize conversions through instantly tailored visitor experiences.
Essentially, Webflow Optimize automatically adjusts practically any feature of your website—including text, font sizes, images, page layout, CTAs, and more—for any visitor. It then continuously adjusts its understanding of how each visitor operates and what they want by performing tests, drawing conclusions, and adjusting the appearance and functionality of the website accordingly.
This can happen on many different levels at once, depending on what visitor information is most relevant. Webflow Optimize works well for making adjustments based on broad principles, such as the geographical location or device of the user. Through tracking information, it can make adjustments based on user personas and demographic insights. And in some cases, Webflow Optimize can even tailor performance to the specific, individual visitor.
Webflow Optimize offers both traditional A/B testing as well as a modern, AI-driven testing system. Both can be useful in different situations, depending on your needs.
Read How to Get the Most Out of Webflow Optimize for a closer look.
The Role of Developers with AI Tools
Given the amount of hype surrounding AI, it can sometimes be hard to tell just how much you should use it yourself, and how much should be left to professionals.
Many AI companies promote their AI tools as a kind of work panacea, something that will end your dependence on external vendors. In their defence, they do have a product to sell, and that product can often do wonderful things. But in very few cases will it be enough to tackle a large or even medium-sized project on its own.
Like practically all web developers, we use AI to help us do our jobs. Many tools help us speed up certain tasks, and we are always looking out for new techniques. But as a full-stack web development agency, we have not yet been able to fire ourselves and do all our work with ChatGPT.
So how does our work with AI benefit you, the client? In a few ways:
- Speeding up overall production time by automating certain slow or repetitive tasks.
- Brainstorming ideas through AI's inherent randomness.
- Freeing up more of our time to focus on high-level decision making for your brand.
Because we have over 7 years of experience using Webflow, we are experts on using the platform and its AI tools.
Whether you're building from scratch or migrating a complex site, we’ll help you get the most out of Webflow’s capabilities—from design to automation. Let's chat!
