Webflow integration
Ssscript can connect a project to a Webflow site. Once linked, the AI agent gains MCP (Model Context Protocol) access to the Webflow Designer and Data APIs, allowing it to create elements, apply styles, manage CMS content, and publish — all from prompts in the AI panel.
Webflow Designer extension (beta)
Section titled “Webflow Designer extension (beta)”Ssscript also ships a Webflow Designer extension for catalog-assisted insertion flows. This extension is currently in beta and remains WIP.
- Behaviors can still evolve quickly while reliability and UX are being hardened.
- Desktop bridge syncing and fallback flows are available, but should be treated as beta workflows.
- Use the desktop app + MCP path as the primary production workflow while extension capabilities stabilize.
Connecting a Webflow site
Section titled “Connecting a Webflow site”Each project has its own Webflow link. Open the connection modal from the Webflow icon in the header (or from the connectivity bar in the mini dock).
Step 1 — Authenticate
Section titled “Step 1 — Authenticate”Click Open Webflow auth to launch OAuth in your browser. Sign in to Webflow and authorize Ssscript. The desktop app detects completion automatically, so there is no manual Continue step. This authorization is account-level and shared across your projects.
Step 2 — Link a site
Section titled “Step 2 — Link a site”Choose a site from the picker populated with the sites currently authorized for your Webflow account, then click Link site. If you do not see the site you need, use Re-authorize in the picker to expand the grant. Manual site ID entry remains available as a fallback.
After linking, Ssscript automatically applies the loader script to the site’s custom code and publishes to Webflow staging (when a deploy URL is available — i.e. you have deployed at least once or set a username). If the automatic apply is not possible, the modal shows a note and you can apply the loader manually from the Embed dialog at any time.
You can reopen the modal at any time to manage or change the connection.
What the AI can do with Webflow MCP
Section titled “What the AI can do with Webflow MCP”When the Webflow MCP is connected and the Designer + Bridge App are running, the agent has access to:
- Elements — create, update, and delete elements in the Designer (max 3 nesting levels per call).
- Styles — apply and manage Webflow classes and style properties.
- Attributes — add or update element attributes (e.g.
data-module="sss-...",data-*). - CMS — list collections, get schemas, create/update/delete collection items.
- Pages — read page content and structure.
- Publishing — publish to the staging domain (
.webflow.io). - Assets — manage site assets.
The Designer API tools require the Webflow Designer to be open with the MCP Bridge App connected. Data API tools (CMS, pages, publishing) work without the Designer.
Designer extension status
Section titled “Designer extension status”Next to the Webflow icon in the connectivity bar is a small Designer extension status indicator. It is read-only (hover for a tooltip) and shows whether the ssscript app is connected inside the Webflow Designer:
| Indicator | Meaning |
|---|---|
| Green | Connected — the extension is open on your linked site. |
| Amber | Wrong site — the extension is open on a different site than the one this project is linked to. Open the extension on the linked site (or update the project link). |
| Grey | Not connected — open the ssscript app inside Webflow Designer from the Apps panel. |
This bridge is what powers canvas actions (creating and styling elements directly on the Designer canvas, reading the current selection). It is separate from the Webflow connect button: connecting a site (above) sets up Data API access and the per-project link, while the Designer extension enables live canvas work. When a canvas action succeeds, you may see a brief toast such as Synced module: … in the app.
The desktop app and the Designer extension stay in sync automatically while both are open; there’s nothing to click in the header indicator itself.
Working with Webflow in the AI panel
Section titled “Working with Webflow in the AI panel”There is no dedicated Webflow agent mode. Once MCP is connected for the project, the agent automatically gains the Webflow tools above and uses them when a task calls for Designer or Data API actions. Keep using /build (or /general) and describe the work — for example, “build a testimonial section in Webflow and wire it to a module.” The agent decides when to act in the Designer versus editing code. See AI edits — Agent modes.
Styling ownership
Section titled “Styling ownership”When Webflow MCP is connected, the AI follows a clear division of responsibilities:
- Webflow owns the look — layout, typography, color, spacing, breakpoints, hovers, and transitions belong as Webflow classes in the Designer.
src/styles/app.cssis the@importhub for CSS that Webflow cannot express (e.g.clip-path,@supports, complex@keyframes).src/styles/mod/<name>.cssholds module-specific CSS including pre-JS initial states (e.g.opacity: 0under[data-module]before animation JS runs).- Module JS handles only dynamic runtime updates (e.g. transforms, progress values, toggling Webflow class names) — not static appearance.
When MCP is not connected, the AI gives you a Designer handoff with suggested class names, structure, and attributes so you can build the Webflow side manually.
Webflow paste (HTML/CSS to Designer)
Section titled “Webflow paste (HTML/CSS to Designer)”When the AI generates HTML and CSS in its response, the app can convert it to XSCP (Webflow’s clipboard format) for direct paste into the Designer. See AI edits — Webflow paste for details.
Embedding your code in Webflow
Section titled “Embedding your code in Webflow”After publishing, embed your project’s JS and CSS in Webflow using the loader script. See Embedding in Webflow for where to paste it.