At a glance
- Steps
- Copy to Webflow on the preview → ⌘V in the Designer.
- Works with
- Claude Design projects, artifacts in Claude chats, published artifacts, standalone HTML exports, project folders (.zip), pasted React/JSX/TSX code.
- You don't need
- To ask Claude for "plain HTML". React output is rendered, then converted.
- You get
- Native elements, readable class names (pricing-card), tablet and mobile breakpoints, hover states.
- Not carried over
- React state and logic. The paste shows the design as it looks when you copy it.
- Plan
- Counts as a capture: 3 a day on Free, unlimited on Pro.
Why Claude designs don't paste into Webflow on their own
Claude Design shows a live preview, but what's behind it is code: Claude Design files, HTML with scripts, or React components that only become a page when they run. Webflow can't import any of them. Copying the code into a Code Embed gives you a box you can't edit.
Other converters ask you to make Claude output one plain HTML file first, and refuse React, JSX and TypeScript. That means re-prompting and losing parts of the design.
FlowPaste works the other way round: it copies the design as it renders in the preview, which is the same for every kind of output. The browser has already run the code, applied every style and drawn the layout. 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 |
|---|---|---|---|---|
| Ask Claude for plain HTML, then convert | Yes | Yes | 5–15 minutes (re-prompting) | When you want GSAP animations as Interactions |
| Code Embed element | No. The code stays code | Only if the code is | Minutes | Widgets and scripts you won't edit |
| Rebuild by hand in the Designer | Yes | Yes, if you build it | 2–6 hours | Small pages, or a full redesign |
| Webflow's Claude connector (MCP): ask Claude to rebuild it | Yes | Yes | Minutes, prompt by prompt | Editing pages and CMS content from chat; it recreates rather than copies |
| FlowPaste: Copy to Webflow on the preview | Yes: native elements and classes | Yes | Under a minute | Any Claude Design or artifact, as it is |
How to copy a Claude Design into Webflow
Time: about 2 minutes. You need: the FlowPaste Chrome extension, your design open in Claude, a Webflow site open in the Designer.
Open your design in Claude
Open the project in Claude Design, or the artifact in your Claude chat. A published artifact works too.
Click Copy to Webflow
FlowPaste's button sits at the bottom right of the preview. Click it to copy the whole design.
TipTo copy one part, open the menu next to the button and choose Pick a section. Hover the design, press ↑ to select a bigger area, and click.
Wait for "Copied!"
FlowPaste collects the elements, styles, images and fonts, converts them and puts the result on your clipboard. A card on the preview shows what came along (images, fonts, hover effects, breakpoints).
Paste in the Webflow Designer
Switch to the Designer (the card has a Go to Webflow Designer button), click where the design should go, and press ⌘V (Ctrl+V).
Add the fonts and check the breakpoints
Add the fonts the card lists in Site settings → Fonts. Click through tablet and mobile to check the responsive layout.
What comes across
| In Claude Design | In Webflow | Notes |
|---|---|---|
| Layout (flex, grid, spacing) | Div Blocks and Sections with classes | |
| Your design system's colors, type, radii | Values on the classes | Webflow stores values; variables are resolved |
| Tailwind classes in components | Classes named from structure (hero-heading, pricing-card) | No utility soup |
| Responsive rules | Tablet and mobile breakpoints | |
| Hover and focus styles | Hover and Focus states | |
| Images | Image elements (uploaded to Assets if you connect your site) | |
| Icons (inline SVG) | Embed elements | Editing them needs a paid site plan |
| Tweak panels and Claude's own UI | Left out | Only your design is copied |
| React state (tabs, toggles) | The state shown when you copy |
Three ways in
1. Claude Design preview → Copy to Webflow 2. Share → Export → Project HTML (standalone) → drop the file into FlowPaste 3. Share → Export → Project HTML (.zip) → drop the .zip (React artifact code works too: paste it into Convert)
Section class: hero Heading H1 class: hero-heading Paragraph class: hero-text Link Block class: hero-button (+ Hover) Section class: pricing Div Block ×3 class: pricing-card (+ is-featured)
Problems and fixes
I don't see the Copy to Webflow button
Reload the Claude tab after installing or updating FlowPaste. The button shows on previews that are at least 320 px wide; if you closed it with ✕, reload the page.
The paste shows a tab or menu in the wrong state
FlowPaste copies what the preview shows. Set the design to the state you want (first tab open, menu closed) before you click.
Animations didn't come along
React animations run in JavaScript. For Webflow Interactions, ask Claude for an HTML version with GSAP and paste that code into the Convert tab: simple GSAP becomes Interactions.
Fonts are different
Add the fonts listed in the result in Site settings → Fonts. Claude Design often uses Google Fonts, which you can add in two clicks.
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".
- Rename or merge classes where you want your own system. Identical styles already share one class; variations are combo classes.
Questions
Do I need to ask Claude Design for plain HTML?
No. FlowPaste copies the design as the preview renders it, whatever code made it: HTML, React, JSX or Claude Design files.
Does it work with artifacts in the Claude app?
Yes. The same button appears on artifact previews in Claude chats and on published artifacts.
Claude Design is moving to Artifacts. Will this keep working?
Yes. FlowPaste doesn't depend on Claude Design's file format; it captures the rendered preview, which artifacts have too.
Can I copy just one section?
Yes. Open the menu next to Copy to Webflow and choose Pick a section, then click the part you want.
Can I use Webflow's Claude connector (MCP) to move a Claude Design into Webflow?
Not directly. Webflow's Claude connector lets Claude build and edit Webflow pages from chat prompts, so it recreates a design rather than copying the one you made in Claude Design. FlowPaste copies the Claude Design preview as it looks, then you paste it with ⌘V. Many people use both: FlowPaste for the design, the connector for content changes.
How is this different from Flowboard's Claude Design import?
Flowboard reads plain HTML that Claude shows in the chat and doesn't support React, JSX or TypeScript. FlowPaste copies the rendered design, so any output works.