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.
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 the OAuth flow in your browser. Sign in to Webflow and authorize Ssscript. When you see the callback confirmation page, close that browser tab and press Continue back in the app.
Step 2 — Link a site
Section titled “Step 2 — Link a site”Enter the Webflow site ID for the site you want to connect. You can find this in your Webflow dashboard under the site’s settings. Optionally, add a site name for display purposes. Click Link to save the connection.
Step 3 — Confirmation
Section titled “Step 3 — Confirmation”The modal confirms the link. Your project is now connected — the Webflow icon in the header turns green to indicate an active link.
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,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.
Using the @@webflow agent mode
Section titled “Using the @@webflow agent mode”Type @@webflow in the AI prompt to use the Webflow-focused agent mode. This mode is aware of the MCP connection and prioritizes Webflow Designer actions alongside code edits. See AI edits — Agent modes for all available 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.