Working with Client-First

Client-First is a CSS class naming methodology created by Finsweet. It's the most widely used standard in the Webflow community. If your project follows this methodology, Convertex and Claude can generate code that respects it automatically.

What is Client-First?

In short, Client-First organizes CSS classes into clear categories:

Class type	Example	Role
Structure	`hero_component`, `features_grid`	Defines the structure of a section
Spacing	`padding-top`, `margin-bottom`	Manages spacing with reusable classes
Text	`text-size-large`, `text-weight-bold`	Controls typography
Combo	`is-active`, `is-dark`	Modifies the style of a base class

The advantage: consistent naming across the entire project, easy to understand for anyone on the team.

Client-First is optional. If you're not familiar with this methodology or your project doesn't follow it, you can use free naming and skip this guide.

How to enable it

With AI (Claude)

Simply add "in Client-First" to your prompt:

"With Convertex, in Client-First, generate a hero section with a title, a paragraph, and a CTA button. Responsive."

Claude automatically applies Client-First conventions:

Folder-based structure (hero_, features_, footer_)
Utility classes for spacing (padding-top, margin-bottom)
Text classes for typography (text-size-large)
Combos with the is- prefix (is-active, is-dark)

In manual mode

If you paste HTML/CSS code already written in Client-First, Convertex converts it normally. No special configuration is needed. Class names are preserved as-is.

Client-First prompt examples

Hero section:

"With Convertex, in Client-First, create a hero section with a centered container, an H1 heading, a paragraph, and two CTA buttons side by side. Dark background."

Features section:

"With Convertex, in Client-First, generate a features section with 3 columns. Each column has an icon, an H3 title, and a paragraph. Use utility classes for spacing."

Full page:

"With Convertex, in Client-First, in px, content in English. Build a landing page with hero, features, testimonials, and CTA. Responsive."

The structure of a Client-First page

Claude automatically generates the 5-layer Client-First structure:

<section class="section_hero">           ← Section (background, full width)
  <div class="padding-global">           ← Global padding (side spacing)
    <div class="container-large">        ← Container (max width)
      <div class="padding-section-large">← Section padding (vertical spacing)
        <div class="hero_component">     ← Component (your content)
          ...
        </div>
      </div>
    </div>
  </div>
</section>

You don't need to memorize this structure. Claude generates it automatically when you ask for Client-First.

When to use Client-First vs. free naming?

Situation	Recommendation
Your Webflow project already uses Client-First	Client-First
You're working in a team	Client-First (consistent naming)
You follow Webflow community conventions	Client-First
You're a beginner and want to keep things simple	Free naming
Your project has its own conventions	Free naming
You're making a quick prototype	Free naming

To learn more about the Client-First methodology, check out the official Finsweet documentation.

What's next

Skills in detail: understand the generation rules in depth
MCP workflow for daily use: advanced techniques for working with Claude

On this page