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.
Features
Client-First, BEM, Atomic CSS, Custom Prefix. Switch between conventions anytime without losing your work.
The AI learns your project's naming patterns over time, delivering smarter, more consistent suggestions with every scan.
Get a naming quality score from 0 to 100. Detect errors, conflicts, and style inconsistencies across your entire element tree.
Find and merge duplicate classes, remove empty selectors. Keep your stylesheet lean and production-ready.
Every class change is tracked. Revert any entry individually with one click. Free plan: 20 entries. Pro: unlimited.
Lives inside Webflow Designer. No copy-pasting, no context switching. It's right where you work.
Plugin Preview
The full plugin panel — living right inside Webflow Designer.
Pricing
Start free. Upgrade when you need unlimited power.
🔒 Secure checkout via Lemon Squeezy
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 FreeNo credit card required · 30 free AI generates/month