Connect Webflow to Claude Code
Edit Webflow CMS and pages through Claude Code -- with the right safety steps.
Who this is for
Anyone working on a client Webflow site or our own bristechtonic.co.uk. Time needed: about 5 minutes. Requires SOP 0 (Claude Code installed).
What this does
Two parts to Webflow work:
- CMS / pages / publishing -- works through Claude alone (this SOP).
- Visual design changes (rearranging sections, building components) -- needs the Webflow Bridge App (covered at the end).
Most day-to-day work is part 1.
Before you start
- Claude Code installed and signed in (SOP 0)
- A Webflow login with access to the site you are working on
Step 1 - Open the Connectors panel
- Open Claude Code.
- In the chat box, type
/thenconnectorand click /connector.
Step 2 - Connect to Webflow
- Find Webflow in the list and click Connect.
- Sign in with your Webflow account in the browser window that opens.
- Click Authorise when Webflow asks for permission.
- Webflow shows as Connected in Claude.
Step 3 - Test it works
Use Webflow to list all the sites in my Webflow workspace.
Claude should return a list of Webflow sites.
Step 4 - Tell Claude which site to work on
For all Webflow tasks in this conversation, use the site: example-client.com
Two hard rules -- read before every Webflow task
Rule 1 - Never edit a live page or template directly. Back up first.
Before changing the structure of a page, a template, or any Style Manager class:
- In Webflow Designer, go to the project, click Backups, and Create backup with a clear name like Pre-[YourName]-2026-05-17.
- Either work in a staging instance or work in Designer with the backup already created.
- Preview your changes.
- Ask the AM or Chris before publishing.
CMS-only edits (blog posts, content fields) do not require a backup -- those changes do not break layout.
Rule 2 - Never look at customer or order data
Some Webflow sites have Ecommerce or Memberships enabled. Do not ask Claude to list orders, customers, payment data, or member records. Stop and Slack Chris if a task seems to require this. UK GDPR.
Common prompts (no Bridge App needed)
When you need the Webflow Bridge App
Only for visual design changes -- moving sections, changing styles, building new components. Not needed for CMS edits, SEO meta, or publishing.
- Open Webflow Designer in your browser.
- Press the E key to open the Apps panel.
- Find Webflow MCP Bridge App and click Launch.
- Wait for it to say Connected, then return to Claude.