Guides / Claude to Webflow

Claude to Webflow: artifacts become native elements

Claude frequently makes a full, styled page as an HTML artifact. Copy the code of the artifact into FlowPaste. Or open the rendered page and use Live Capture on only the section that you want.

Add to Chrome, free →See the demo
index.htmlSection.heroHeadingButton:hover
[IN]Prompt for Claude
Make a features section as a single HTML artifact.
Plain HTML with a <style> tag, no React.
Add a GSAP fade-up on scroll for the cards.
[OUT]What you get in Webflow
  • Sections, headings, text, links and images of the artifact → native elements
  • The CSS of the artifact → Webflow classes, breakpoints and states
  • gsap.from + ScrollTrigger → a Scroll into view Interaction

Steps

  1. Tell Claude to make a plain HTML artifact, not React.
  2. Copy the code into the FlowPaste panel. Or open the artifact and use Live Capture on the section that you want.
  3. Click Convert & copy. Then press ⌘V or Ctrl+V on the Webflow canvas.

Limits

  • If the artifact is React, open the rendered artifact and use Live Capture. Do not paste the JSX.
  • If the artifact is a very long single page, convert the artifact 1 section at a time. Small conversions are easier.

Questions

Does FlowPaste work with Tailwind output from Claude?

Yes. FlowPaste compiles the Tailwind CDN script and the utility classes into named Webflow classes.

Try it with your own code.

Free: 3 conversions each day. You do not need a credit card.

Add to Chrome, free →