Documentation

Styler is a Webflow Designer Extension for Client-First naming, Navigator cleanup, component naming, saved plans, and design-system Variable workflows.

Standard workflow: Scan → Build plan → Review → Apply.

Install Styler from the Webflow Marketplace, open the Webflow site you want to work on, launch Styler in the Designer, and authorize the app when prompted.

Styler uses Webflow authentication to establish a short-lived app session for the active site.

Open the page you want to analyze and click Scan current page.

Styler can inspect supported element hierarchy, element type, text content, display names, class names, style information, and supported component context.

Protected fields: user-entered form controls and authentication-related fields are excluded from scan analysis and Apply.

After scanning, build the style plan. Styler prepares semantic naming suggestions for the scanned page.

The plan can include class names, Navigator labels, component naming, and class-stack migration.

AI-assisted naming is used for the page-naming workflow. The Variables workflow is separate.

Review section names, repeated components, semantic role names, existing class stacks, and any item marked as skipped, unchanged, or needing review.

Styler is designed around a review step before project mutations.

Click Apply only after reviewing the plan.

Styler revalidates the scanned context, checks that the current page and site still match the saved analysis, applies reviewed naming changes, verifies supported writes where possible, and reports applied, unchanged, skipped, and failed rows.

If the page or project context no longer matches the scan, Styler can stop instead of applying a stale plan.

Styler can improve Navigator labels even when an element does not need a CSS class. This keeps the Navigator readable without adding unnecessary styling classes.

When a component is part of the scanned and reviewed plan, Styler can normalize its name using the same Client-First-oriented structure.

Component renaming is scoped to components included in the reviewed workflow.

Styler includes a separate Variable workflow for colors, typography, spacing, reusable design-system values, and responsive Variable groups.

The workflow can inspect existing styles and Variables, prepare proposals, reuse compatible Variables, create required Variables, and bind Variables to supported styles.

Completed analysis state can be stored locally so a previous plan can be restored without repeating a paid AI request.

Saved plans are scoped to project and page context. Local saved analysis/history is retained for up to 30 days under the current retention policy.

Naming operations can create undo information. Undo is designed to restore the earlier naming/class state when affected Webflow elements still match the expected post-Apply state.

If the project changed after Apply, Styler may refuse an unsafe restore rather than overwrite newer work.

Styler uses AI for semantic naming suggestions. Depending on the scanned page, limited element type, display name, text, class names, and structural context may be processed.

Protected form-input and credential-related fields are excluded before AI analysis. AI requests are sent through Styler's backend rather than directly from the browser to the AI provider.

Styler includes feedback controls for feature requests and problem reports. A submission can include feedback type, email address, message, and limited site/app context needed to handle the request.

Do not submit passwords, access tokens, API keys, payment information, or other credentials through feedback.

Input field is missing from Scan: protected form-input and credential-related fields are deliberately excluded.

Apply says the page changed: return to the page that was scanned and restore or rebuild the plan.

A row is skipped: common reasons include no valid semantic proposal, unsupported element capability, changed class stack, protected input, naming conflict, or missing component context.

Styles look unchanged: Styler is designed to preserve visual styling while changing structure and naming.

A component was not renamed: only components included in the scanned and reviewed plan are renamed.

Open the correct page → Scan → Build plan → Review → Apply → Inspect the result in Designer.

For important production projects, keep Webflow backups/version history as part of your normal release workflow.

If you have questions about Styler documentation, contact Lana Mohish at lanamohish@gmail.com.