Client-First Webflow skills

Problem

Coding agents write HTML that looks finished and imports badly into Webflow. Type sizes hide inside component classes, selectors are nested, breakpoints are made up. Each of those becomes manual rework.

Webflow doesn’t enforce how classes and tokens are named, so we kept our sites consistent with Finsweet’s Client-First. Agents drift from it unless something checks them.

Webflow’s MCP server lets an agent write into the live site. Some writes report success and are still wrong: a class created but never applied, a mobile value that overwrites desktop.

What I built

Writing straight into Webflow through the MCP is slow and expensive, since every change is a tool call on the live site. So agents first write Client-First HTML, and one agent then moves it in.

• client-first-html sets the rules for that HTML: type only in shared classes, only Webflow’s three breakpoints, at most three classes on an element. A script checks each page. It needs no Webflow access, so many agents can write sections at once.
• webflow-mcp-transfer lists the writes that report success and are wrong, the check for each, and where custom code goes so the client can still edit the site. Only one agent runs it, because publishing is site-wide and allowed once a minute.

<section class="section_pricing">
  <div class="padding-global padding-section-large">
    <div class="container-large">
      <div class="pricing_grid">
        <div class="pricing_card is-featured">
          <h3 class="heading-style-h5">Team</h3>
          <div class="heading-style-h2">$12</div>
          <a class="button is-secondary" href="#">Start free</a>

From the test section the skill produced: utilities for type and spacing, one component prefix for layout, a combo class for the featured variant.

Where the rules came from

Client builds at a design studio in 2026, where agents created 8 pages and 9 components through the MCP. Those builds also produced the failures behind the rules: 22 wrapper divs on one page that never got their class, 70 classes with a gap on only one axis, and a page 833 px taller than the design. Of its 281 tool errors, 182 were tool or parameter names the agent made up.

Testing

I checked every tool name and parameter against Webflow’s MCP 2.1.0, and the Client-First rules against Finsweet’s docs. Two of Webflow’s official skills use action names the schema doesn’t have.

After the pricing section above, two agents that had only the skill files wrote four more sections. Each passed the check with zero errors on the first try. I fixed every rule they had to guess at.

The tests didn’t write to Webflow. The silent failures come from MCP 2.0.1, and on 2.1.0 I re-checked only names and parameters.