Skip to content
English - United Kingdom
  • There are no suggestions because the search field is empty.

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:

  1. CMS / pages / publishing -- works through Claude alone (this SOP).
  2. 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

  1. Open Claude Code.
  2. In the chat box, type / then connector and click /connector.

Step 2 - Connect to Webflow

  1. Find Webflow in the list and click Connect.
  2. Sign in with your Webflow account in the browser window that opens.
  3. Click Authorise when Webflow asks for permission.
  4. 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:

  1. In Webflow Designer, go to the project, click Backups, and Create backup with a clear name like Pre-[YourName]-2026-05-17.
  2. Either work in a staging instance or work in Designer with the backup already created.
  3. Preview your changes.
  4. 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.

  1. Open Webflow Designer in your browser.
  2. Press the E key to open the Apps panel.
  3. Find Webflow MCP Bridge App and click Launch.
  4. Wait for it to say Connected, then return to Claude.

Troubleshooting