At a glance
- Webflow AI Site Builder
- Makes a new multi-page site from a text prompt, built on Webflow's Flowkit system.
- Webflow AI Assistant
- Writes and rewrites copy, translates, fills SEO settings and makes images, inside the Designer.
- AI code components
- Generates React code components from a prompt. They run as code, not as native elements you style in the Style panel.
- Claude connector (MCP)
- Lets Claude create and change pages, styles and CMS content from chat. Webflow calls it early.
- What none of them do
- Import a design you already have (from Claude Design, ChatGPT, v0, Lovable or your own HTML) as native elements, or turn GSAP code into Interactions.
- FlowPaste
- Pastes that existing design into the Designer as native elements, classes, breakpoints and Interactions. Free for 3 a day.
Why Webflow AI doesn't replace your AI design tool
Most people who design with AI do it in Claude, Claude Design, ChatGPT, v0 or Lovable, because that's where they iterate fastest. Webflow AI starts from a blank prompt inside Webflow, so the design you already approved has to be described again, and the result is a different design.
Webflow still has no HTML import. Moving a site to Webflow is, in Webflow's own words, a rebuild, not a transfer. AI code components help when you want a React widget, but a React component is code: your client can't edit its text in the Editor, and you can't restyle it in the Style panel.
Pasting closes that gap. FlowPaste reads the page the way your browser shows it: the elements, every CSS rule that applies to them, the media queries and the hover states. It then writes Webflow's own clipboard format, so ⌘V (Ctrl+V) in the Designer creates real elements with named classes.
Ways to do it, compared
| Method | Editable in Webflow | Responsive | Time for one page | Best for |
|---|---|---|---|---|
| Webflow AI Site Builder | Yes: native elements | Yes | Minutes | Starting a new site from scratch |
| Webflow AI code components | No: React code, edited as code | If the code is | Minutes | Interactive widgets (calculators, configurators) |
| Claude connector (Webflow MCP) | Yes: native elements | Yes | Minutes, prompt by prompt | Changing pages and CMS content from chat |
| Code Embed element | No. The code stays code | Only if the code is | Minutes | Widgets and scripts you won't edit |
| FlowPaste: paste your AI design | Yes: native elements and classes | Yes | About 10 seconds a section | A design you already made in Claude, ChatGPT, v0 or Lovable |
You can combine them: generate or refine sections in your AI tool, paste them with FlowPaste, then use Webflow's AI Assistant for copy and SEO.
How to paste an AI-made design into Webflow
Time: about 2 minutes. You need: the FlowPaste Chrome extension, your AI design (code or preview), a Webflow site open in the Designer.
Get the design from your AI tool
Copy the code from ChatGPT, Claude, v0, Cursor or Lovable (HTML, Tailwind, React or JSX all work). In Claude Design, you can skip copying: use the Copy to Webflow button on the preview.
Open the FlowPaste panel in Webflow
Open your site in the Webflow Designer and click the FlowPaste button, or press Alt+Shift+F.
Paste and convert
Paste the code into the panel and click Convert & copy. Code that has to run (React, scripts) is rendered first, then converted.
Paste into the Designer
Click where the section should go and press ⌘V (Ctrl+V). It arrives as native elements with classes, breakpoints and Interactions.
Finish with Webflow AI if you like
Use Webflow's AI Assistant to rewrite copy, translate or fill SEO settings on the pasted section.
What comes across
| From your AI tool | In Webflow | Notes |
|---|---|---|
| HTML and CSS | Native elements and named classes | |
| Tailwind classes | Readable classes named from structure | No utility soup |
| React / JSX / shadcn/ui | Rendered, then native elements | React state isn't carried over |
| GSAP animations | Webflow Interactions | Common patterns; the rest stays as custom code |
| Media queries | Tablet and mobile breakpoints | |
| Inline SVG icons | Embed elements | Editing them needs a paid site plan |
Problems and fixes
The AI wrote a whole app, not a page
Paste one section at a time, or open the app's preview and use Live Capture to copy the part you need.
Fonts look different after the paste
Add the fonts in Site settings → Fonts. FlowPaste lists them after each conversion.
Animations don't play in the Designer
Interactions play in Preview and on the published site. Publish to your webflow.io domain to check them.
After you paste
- Add the fonts in Webflow → Site settings → Fonts. FlowPaste lists them in the notes after each conversion. Until then, text that brought its own font file still shows correctly, but you can't pick the font in the Typography panel.
- Images: Webflow publishes images only from its own Assets. Connect your site once in FlowPaste → Account → Webflow images, and every paste uploads its images for you. Without it, images show in the Designer but break on the published site.
- Click through tablet, mobile landscape and mobile portrait in the Designer. Media queries are already mapped to those breakpoints; check anything the notes marked as "snapped".
- Publish to your webflow.io staging domain and check animations and scripts there. Scroll-triggered Interactions don't always play inside Designer Preview.
Questions
What is Webflow AI?
Webflow AI is the set of AI features built into Webflow: the AI Site Builder (a site from a prompt), the AI Assistant (copy, translation, SEO settings, images), AI code components (React components from a prompt) and the Claude connector (Claude edits your site through MCP).
Can Webflow AI import a design from Claude or ChatGPT?
No. Webflow AI generates new designs and components; it doesn't import a design you already made elsewhere. To bring that design in as editable Webflow, paste it with FlowPaste.
Is Webflow AI free?
It depends on the feature and your plan: Webflow's AI features come with usage limits that change over time, so check Webflow's pricing page for the current terms. FlowPaste is free for 3 runs a day (3 conversions, 3 element captures or 1 full-page capture); AI sections are part of Pro.
Are AI code components the same as native elements?
No. AI code components are React code that Webflow runs. Native elements are what you style in the Style panel and what clients edit in the Editor. FlowPaste pastes native elements.
Should I use the Claude connector or FlowPaste?
Use the Claude connector to change pages and CMS content by chatting. Use FlowPaste when the design already exists (in Claude Design, an artifact, your code or a live site) and you want it in Webflow exactly as it looks. They work well together.
Sources
- Webflow blog: AI code components
- Webflow: Claude and the Webflow MCP server
- Webflow Help: Connect Claude to Webflow
- Webflow Help: Migrate your site to Webflow overview — "migrating to Webflow will be a rebuild, not a transfer"
- Webflow Wishlist: Import an existing site, or existing code, into the Webflow Designer