01
Scan
Click "Scan" to read your selected element and its children directly from the Webflow canvas. Class Architect maps your full element tree in seconds.
Webflow Designer Extension
Class Architect uses AI to generate consistent, convention-based CSS class names — directly inside Webflow Designer. Client-First, BEM, Atomic, or your own prefix.
Used by Webflow designers worldwide Free to start
The problem
How it works
Click "Scan" to read your selected element and its children directly from the Webflow canvas. Class Architect maps your full element tree in seconds.
AI analyzes your element tree and suggests class names that match your chosen convention and project context. No guesswork — just consistent, meaningful names.
Review suggestions and apply all at once, or element by element — directly in Webflow. Every change is saved to History so you can revert anytime.
Plugin Preview
The full plugin panel — living right inside Webflow Designer.
FAQ
It sends your element tree and chosen convention to GPT-4o (Pro) or GPT-4o mini (Free), which returns contextually appropriate, consistent class names based on your project patterns.
Yes. Select Client-First in the convention selector and all suggestions follow Client-First naming rules (e.g., section_name, container, heading_display-xl).
Audit scans your element tree and gives you a naming quality score from 0 to 100, flagging naming errors, conflicts, and style inconsistencies.
Yes. Every time you apply classes, it's saved to History. You can revert any entry individually. Free plan: 20 entries. Pro: unlimited.
Class Architect Pro is $9/month, billed monthly via Lemon Squeezy. Cancel anytime. No questions asked.
Only your element structure (tag, existing class names) is sent to OpenAI to generate suggestions. No page content or personal data is transmitted.
Join designers who ship consistent, clean class names — with zero effort.
Add to Webflow — It's Free