First test

Everything is installed. Let's run a complete test to verify that the entire chain works end to end: Claude generates the code, Convertex converts it, and Webflow displays it.

Open Claude and start a conversation

Launch Claude Desktop, Claude Code, or Cursor. Start a new conversation.

Ask Claude to generate a component

Type a prompt like:

"With Convertex, generate a hero section with a dark background, a large title, a subtitle, and two CTA buttons side by side. Make it responsive."

Claude will:

Use the skills to apply the Convertex generation rules.
Generate optimized HTML and CSS.
Push the result to Convertex via the MCP.

Open Convertex

Go to convertex.ai. You will see the code generated by Claude in the editor, with the real-time preview on the right.

Check the result in the preview. Use the breakpoint controls to test Desktop, Tablet, and Mobile.

Convert and copy

Click the Convert button (or Cmd+Enter). Convertex transforms the HTML/CSS into a Webflow-compatible format. This takes 1 to 2 seconds.

Then click Copy (or Cmd+K). The result is copied to your clipboard, ready to be pasted.

Paste into Webflow

Open your Webflow project in the Designer.
In the Navigator (left panel), select the parent element where you want to insert the content (typically Body or a Section).
Paste with Cmd+V (Mac) or Ctrl+V (Windows).

Your elements appear on the canvas with all their classes, responsive styles, and component structures preserved.

Verify the result

After pasting, check:

The elements appear in the Navigator with the correct hierarchy.
The CSS classes are created in Webflow's Style Manager with the correct names.
The responsive styles display correctly at each breakpoint.
The text is preserved exactly as in the original HTML.

Something not working?

Problem	Solution
Claude doesn't generate Webflow code	Verify that the skills are installed and that the MCP is connected. Start a new conversation.
Nothing happens when pasting in Webflow	Select a parent element in the Navigator before pasting.
Styles are missing	Check for class name conflicts with existing classes in your Webflow project.
Fonts are different	Add the font in your Webflow project settings before pasting.
Layout differs from the preview	Make sure you are at the Desktop breakpoint in Webflow.

Always paste into a test page before pasting into a production page. This lets you verify the result without impacting live content.

What's next

You are up and running. Now explore the Usage section to master the editor and all conversion features.

On this page