Complete MCP Workflow

Once the skills are installed and the MCP is connected, Claude becomes your Webflow code generator. This page details how to use it effectively on a daily basis.

The Workflow

Start a Conversation

Open Claude (Desktop, Code, or Cursor) and start a new conversation. The skills are loaded and the MCP connects automatically.

Describe What You Want

Give Claude a description of the component or page you want. The more specific you are about structure, content, and responsive behavior, the better the result.

Claude Generates and Pushes

Claude uses the skills to apply the generation rules, then pushes the result to Convertex via the MCP:

Generates HTML/CSS optimized according to the skills' rules.
create_page() or update_page() -- pushes the result into Convertex.

Review and Iterate

Open Convertex to see the result in the preview. If adjustments are needed, ask Claude in the same conversation:

"Make the title smaller on mobile." "Add a gradient background instead of a solid color." "Change the navbar to be transparent."

Convert and Paste

When you are happy with the result, convert and paste into Webflow as usual.

Writing Effective Prompts

Be specific about structure

Good:

"With Convertex, generate a hero section with a centered container of 720px max, an H1 at 56px bold, a paragraph at 20px light gray, and two CTA buttons side by side -- one solid purple, one outline white."

Less good:

"Make me a hero."

Name your sections

Saying "a hero section" or "a testimonials grid" helps Claude choose the right patterns.

Mention responsive

If you have specific needs at certain breakpoints, say so explicitly:

"The columns stack vertically on tablet. The title is 36px on mobile."

Ask for Webflow components by name

"With Convertex, create a Webflow navbar with logo on the left, links in the center, and a CTA button on the right. Include the mobile hamburger menu."

Claude automatically generates the correct w-nav structure.

Building a Full Page

You can generate an entire page at once or section by section. Both approaches work:

Full page (fast)

"With Convertex, generate a complete landing page with: hero section with title, subtitle, and CTA; features section with 3 columns icon + title + text; testimonials section with carousel; pricing section with 3 cards; footer with links, social media, and newsletter. All in Client-First, responsive."

Section by section (precise)

Build incrementally in the same conversation:

"With Convertex, generate the hero section."
"Add a features section below."
"Now a testimonials carousel."
"Finish with a footer."

Claude maintains context and style consistency from one section to the next.

For Large Pages (4+ sections)

For pages with many sections, Claude uses an optimized pattern:

create_page() -- creates the base structure (shell).
add_section() x N -- adds each section one by one.
assemble_page() -- assembles everything into a single output.

This breakdown avoids size limits and guarantees a complete result.

Claude handles this breakdown automatically. You do not need to specify the method -- just describe what you want and let Claude choose the best approach.

Claude's 3 Questions

When you make a first generation request in a conversation, Claude asks you 3 questions:

Client-First or free naming? -- Choose Client-First if your Webflow project follows this methodology.
rem or px? -- The unit of measure for sizes, spacing, etc.
Content language? -- The language of the generated text (French, English, etc.).

If you answer these questions upfront in your prompt, Claude will not ask them.

Best Practices

Iterate in the same conversation. Claude keeps context, so each modification builds on the previous ones.
Let Claude handle the details. Describe the design intent, not the CSS properties.
Validate in the preview. Always check the rendering in Convertex before pasting into Webflow.
One project = one conversation. For a new Webflow project, start a new conversation.

On this page