Claude Design → Webflow
Claude Design to Webflow, without rebuilding it
Designed a landing page with Claude? Paste its HTML here and get native Webflow sections, classes and breakpoints you can keep editing in the Designer.
Runs in your browser. Your code is never uploaded.Get the Chrome extension →
How it works
- 1
Copy the code from Claude
In Claude Design or an HTML artifact, open the code view and copy the full HTML, including the <style> block.
- 2
Convert and preview
We render your code in your browser, read the final styles at Webflow's four breakpoints, and rebuild them as clean, reusable classes. Compare the original and the result side by side.
- 3
Paste into Webflow
Click Copy to Webflow, open the Webflow Designer, select where the section should go and press ⌘V (Ctrl+V on Windows). You get native elements you can edit in the Style panel.
Built for the way Claude writes CSS
Claude often uses CSS variables, gradients, gradient text, glassy backgrounds and decorative ::before / ::after layers. Variables are resolved to real values and pseudo-elements become real child elements, so the glow and accent shapes survive the trip.
Ask Claude for paste-friendly code
For the cleanest result, ask Claude to use semantic class names, a single <style> block and Google Fonts you have added to your Webflow site.
Chrome extension
Skip the ⌘V. Insert with one click.
- Insert sections straight into the Webflow Designer
- Capture a section from any page you’re viewing
- Keep recent conversions one click away