Webflow Class Guard

About

If you've ever accidentally changed a global utility class in Webflow and not noticed until three client revisions later, this extension is for you.

Webflow Class Guard protects your most important CSS classes from accidental edits inside the Webflow Designer. When a protected class is active in the style panel, a visual lock overlay blocks all style inputs — so you can click around, select elements, and work freely without the risk of breaking a class that's used across hundreds of elements.

No more "who changed .u-container and why is everything 40px off."

THE PROBLEM

Webflow's global class system is both powerful and dangerous. Every style you apply to a class is shared by every element that uses it. A single accidental click on the wrong class pill in the selector bar (followed by a stray keystroke or a spacing adjustment) can silently break your entire design system.

Webflow has no native way to lock a class. There's no "protected" flag, no write permissions per class, and no undo history that persists across sessions. If you catch the mistake in the same session, you might be able to undo it. If you don't, you're comparing styles manually and hoping you remember what it was supposed to be.

This is especially painful on large projects with a shared design system, agency projects where multiple designers access the same site, and client handoffs where the client has Designer access.

Webflow Class Guard closes this gap.

HOW IT WORKS

Webflow Class Guard runs inside the Webflow Designer and monitors which class is currently active in the style panel. When you click a class pill in the selector bar to start editing it, the extension checks whether that class is on your protected list. If it is, a lock overlay appears over the style inputs. When the active class changes to something unprotected, the overlay lifts automatically.

Smart combo class support means the extension understands Webflow's class hierarchy. If you've protected a base class like .section but you're currently editing a combo class like .section.section-hero, the lock does not apply. Protection only activates when the base class itself is the active editing target — not when it's a parent in a combo. You can safely extend protected base classes without fighting the extension.

KEY FEATURES

Right-click to protect — Right-click any class pill in the Webflow selector bar and choose "Protect this class." The class is immediately protected for that site. One step.

Framework presets for MAST and Lumos — If you're building with MAST (No Code Supply) or Lumos (Timothy Ricks), select your framework from the popup and every core framework class is protected instantly — no manual entry. Custom classes you add sit on top of the preset.

Manage classes from the popup — See all protected classes for the current project, add new ones by name, or remove protection from any class. Each Webflow project has its own independent list.

Per-site protection lists — Protected classes are scoped to the specific Webflow project you're working on. Protecting .section on one client project doesn't affect another.

Master on/off toggle — Need to make a deliberate change to a protected class? Use the toggle to disable all protection temporarily. Your list stays intact — flip it back on when you're done.

Unlock from the overlay — When the lock overlay appears, click "Unlock in Class Guard" to open the extension popup directly without hunting for the toolbar icon.

Works on new and legacy Designer URLs — Supports both yoursite.design.webflow.com and the legacy webflow.com/design/yoursite format.

WHO IT'S FOR

Webflow designers managing a design system, agencies with shared projects, freelancers handing off to clients, and anyone building on MAST or Lumos who wants their framework classes to stay exactly as intended.

PRIVACY

Webflow Class Guard only activates on Webflow Designer URLs. It does not run on any other website. Your protected class lists are stored in Chrome's built-in sync storage. The extension does not collect, transmit, or log any data about your projects or activity.

GETTING STARTED

Install the extension
Open any project in the Webflow Designer
Select a framework preset in the popup (if you're using MAST or Lumos), or right-click a class pill and choose "Protect this class" to add individual classes
Done. Those classes are now protected for this project.
To make a deliberate edit to a protected class, open the popup, use the toggle to disable protection, make your changes, then re-enable it.

CREDITS

Developed by Paper Tiger (papertiger.com). Framework presets built on MAST by Corey Moen at No Code Supply (nocodesupply.co) and Lumos by Timothy Ricks (timothyricks.com). Not affiliated with either framework.