ConvertexHow does it work?
There are 3 ways to use Convertex. Choose the one that best fits your situation.
Method 1: Manual mode (the simplest)
Already have HTML/CSS code on hand? This is the most direct method.
Refactor the code with Claude
Before converting, run your code through Claude with the Convertex skill to optimize it:
"With Convertex, here is some HTML/CSS to refactor for optimal Webflow conversion. [paste your code]"
Claude simplifies classes, removes unnecessary code, and restructures everything so the conversion is as faithful as possible.
Paste your code into Convertex
Open convertex.ai, then paste the refactored code (or your original code) in the HTML tab and your CSS in the CSS tab.
Check the preview
The right panel shows a real-time preview. You see exactly what your design will look like.
Click Convert
One click. Convertex transforms your code into Webflow format. It takes 1 to 2 seconds.
Copy and paste into Webflow
Click Copy, then go to Webflow Designer and press Cmd+V (Mac) or Ctrl+V (Windows). Your elements appear with all their styles.
When to use this method?
- You have an HTML template purchased online
- A developer sent you code
- You found code on CodePen or GitHub
Method 2: With AI (the most powerful)
Don't have any code? No problem. Describe what you want, and AI generates everything for you.
Describe what you want to Claude
Open Claude (the AI assistant) and tell it what you want in natural language. For example:
"With Convertex, create a hero section with a large title, a subtitle, and two buttons side by side. Dark background, white text."
Claude generates and sends the code to Convertex
Claude creates optimized HTML/CSS code and sends it automatically to your Convertex editor. You don't have to do anything.
Review and request adjustments
Open Convertex to see the result. If something doesn't look right, tell Claude:
"Make the title smaller on mobile." "Change the button color to blue."
Claude adjusts the code instantly.
Convert and paste into Webflow
When you're happy with the result, click Convert then Copy, and paste into Webflow.
When to use this method?
- You're starting from scratch and don't have any code
- You want to quickly create sections or complete pages
- You prefer describing what you want rather than coding
This method requires an initial setup (installing Claude and connecting it to Convertex). The Quick start: Full setup guide walks you through it step by step.
Method 3: With the Chrome extension (to reproduce an existing design)
You've seen a site you like and want the same design in Webflow? The extension captures any section from a website.
Navigate to the site that inspires you
Go to any website in Chrome.
Click the Convertex Capture extension
The icon is in your Chrome extensions bar. A selection tool appears.
Select the section you want
Click on the section of the site you want to reproduce. The extension automatically captures the screenshot and the code.
Send to Claude
Paste the capture into Claude and ask:
"Here's a Convertex capture. Recreate this section faithfully."
Convert and paste into Webflow
Claude generates the code and sends it to Convertex. You convert and paste into Webflow.
When to use this method?
- You want to reproduce the design of an existing site
- You're looking for inspiration and want to iterate from a real design
- You're migrating an existing site to Webflow
Which method should you choose?
| Situation | Recommended method |
|---|---|
| "I have HTML/CSS code ready" | Manual mode |
| "I'm starting from scratch, I don't have code" | With AI |
| "I want to reproduce a site I've seen" | Chrome extension |
| "I want to go as fast as possible" | With AI |
| "I want full control over the code" | Manual mode |
You can combine all 3 methods in the same project. For example, capture a hero with the extension, generate a features section with AI, and convert an existing HTML footer in manual mode.
Next step
Before getting started, check out the full step-by-step setup to be up and running in 15 minutes.