Wie verbindet man Claude mit Webflow?

Kurzantwort: Claude verbindet sich über den offiziellen MCP-Server (Model Context Protocol) von Webflow mit Webflow und erhält so direkten Zugriff auf Ihr CMS, die Designer API und Ihre Website-Daten. Sie können Inhalte aktualisieren, CMS-Collections verwalten und Seiten veröffentlichen, indem Sie in Claude Desktop oder Claude Code in einfacher Sprache beschreiben, was Sie möchten. Manuelle Arbeit im Editor ist dafür nicht nötig.

B2B-SaaS-Teams verlieren Stunden mit wiederkehrenden Webflow-Änderungen: Preistexte aktualisieren, neue Blogbeiträge veröffentlichen, CMS-Daten auf Dutzenden Seiten auffrischen. Die Claude-Webflow-MCP-Integration kürzt diese Schleife ab.

Dieses Tutorial zeigt Ihnen Schritt für Schritt, wie Sie Claude über den MCP-Server mit Webflow verbinden, was nach der Einrichtung konkret möglich ist und wo die Integration in einem echten Content-Workflow ihren Platz verdient. Am Ende wissen Sie, ob sie in Ihren Stack gehört und wie Sie sie noch heute zum Laufen bringen.

Was ist die Claude-Webflow-MCP-Integration?

Der Webflow-MCP-Server ist ein offizieller Konnektor des Herstellers, der Claude über das Model Context Protocol direkten Zugriff auf Ihren Webflow-Workspace gibt. MCP ist ein offener Standard, mit dem sich KI-Modelle strukturiert und mit klar geregelten Berechtigungen an externe Tools und Datenquellen anbinden lassen.

Sobald die Verbindung steht, kann Claude Ihre Website-Struktur lesen, CMS-Collections abfragen, neue Inhalte schreiben, bestehende Einträge aktualisieren und die Veröffentlichung auslösen, alles über eine Chat-Oberfläche. Sie beschreiben die Änderung, Claude führt sie über die Webflow API aus.

Das ist keine Notlösung eines Drittanbieters. Webflow stellt den MCP-Server selbst bereit und pflegt ihn. Er bleibt also mit der Webflow API synchron und erfüllt dieselben Zuverlässigkeitsansprüche wie die Plattform.

Was Sie vor dem Start brauchen

Stellen Sie vor dem ersten Befehl sicher, dass Folgendes vorhanden ist:

• Ein Webflow-Konto mit mindestens einer Live-Website
• Ein Webflow-API-Token mit CMS- und Designer-Berechtigungen (erstellen Sie ihn in Ihrem Webflow-Workspace unter Account Settings > API Access)
• Claude Desktop (Mac oder Windows) oder Claude Code, installiert und lauffähig
• Node.js 18+, auf Ihrem Rechner installiert (erforderlich, um den MCP-Server auszuführen)
• Eine Webflow-Site-ID für die Website, die Claude verwalten soll

Wenn Sie Claude Code statt Claude Desktop verwenden, ist die Einrichtung fast identisch. Lediglich der Speicherort der Konfigurationsdatei unterscheidet sich leicht, siehe unten.

So verbinden Sie Claude über den MCP-Server mit Webflow

Schritt 1: Den Webflow-MCP-Server installieren

Öffnen Sie Ihr Terminal und führen Sie Folgendes aus:

npx @webflow/mcp-server

Dadurch wird das offizielle Webflow-MCP-Server-Paket von npm geladen. Sie müssen weder ein Repository klonen noch einen separaten Prozess manuell verwalten. Der npx Befehl übernimmt die Ausführung jedes Mal, wenn Claude ihn aufruft.

Schritt 2: Claude Desktop konfigurieren

Claude Desktop liest MCP-Server-Konfigurationen aus einer JSON-Datei. Öffnen Sie diese Datei jetzt:

• Mac: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json

Fügen Sie den folgenden Konfigurationsblock in den mcpServers ein:

{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["-y", "@webflow/mcp-server"],
      "env": {
        "WEBFLOW_TOKEN": "your-webflow-api-token-here"
      }
    }
  }
}

Ersetzen your-webflow-api-token-here mit dem API-Token ein, das Sie in Schritt 1 erstellt haben. Speichern Sie die Datei.

Schritt 3: Claude Code konfigurieren (falls Sie stattdessen Claude Code verwenden)

Wenn Sie Claude Code nutzen, fügen Sie den MCP-Server über die CLI hinzu:

claude mcp add webflow \
  -e WEBFLOW_TOKEN=your-webflow-api-token-here \
  -- npx -y @webflow/mcp-server

Dadurch wird der Webflow-Server global für alle Ihre Claude-Code-Sitzungen registriert.

Schritt 4: Claude neu starten und die Verbindung prüfen

Beenden Sie Claude Desktop vollständig und öffnen Sie es erneut. Geben Sie in einer neuen Unterhaltung Folgendes ein:

List all the sites in my Webflow workspace

Wenn die Verbindung funktioniert, gibt Claude Ihre Website-Namen und IDs zurück. Bei einer Fehlermeldung prüfen Sie Ihren API-Token noch einmal und stellen sicher, dass Node.js korrekt installiert ist, indem Sie node --version in Ihrem Terminal ausführen.

Was kann Claude in Webflow konkret tun?

Nach der Verbindung hat Claude über den Webflow-MCP-Server Zugriff auf einen festgelegten Satz von Aktionen. Für B2B-SaaS-Content-Teams bedeutet das in der Praxis:

CMS-Content-Management

• CMS-Collections lesen: Bitten Sie Claude, alle Einträge einer Collection aufzulisten, bestimmte Felder abzurufen oder bestehende Inhalte zusammenzufassen
• Neue CMS-Einträge erstellen: Beschreiben Sie einen neuen Blogbeitrag, eine Fallstudie oder ein Produkt-Update, und Claude legt den Eintrag mit den von Ihnen angegebenen Feldern an
• Bestehende Einträge aktualisieren: Texte ändern, Metadaten austauschen, Slugs aktualisieren oder Rich-Text-Felder in einem oder mehreren Einträgen bearbeiten
• Einträge löschen: Veraltete Inhalte aus Collections entfernen, ohne den Editor zu öffnen

Seiten- und Website-Verwaltung

• Website-Struktur abfragen: Fragen Sie Claude, welche Seiten es gibt, wie deren Slugs lauten und wie sie organisiert sind
• Seiten-Metadaten aktualisieren: SEO-Titel, Beschreibungen und Open-Graph-Felder im Gespräch ändern
• Änderungen über die Designer API vornehmen: Strukturelle und gestalterische Anpassungen, soweit die Webflow Designer API sie unterstützt

Veröffentlichung

• Websites veröffentlichen: Weisen Sie Claude an, Ihre Website nach Änderungen auf Staging oder Produktion zu veröffentlichen
• Einzelne Seiten veröffentlichen: Einzelne Seiten gezielt veröffentlichen, statt die gesamte Website zu übertragen

Praxisbeispiele für B2B-SaaS-Teams

In diesen Szenarien spart die Claude-Webflow-MCP-Integration SaaS-Marketing- und Content-Teams die meiste Zeit. Wenn Ihr Team bereits Spezialisten unter den Content-Marketing-Agenturen für B2B SaaS oder den breiter aufgestellten Digital-Marketing-Agenturen für B2B SaaS vergleicht, lohnt sich die Frage nach genau dieser Art von Workflow-Effizienz.

Einen neuen Blogbeitrag aus einem Briefing veröffentlichen

Statt manuell einen CMS-Eintrag anzulegen, jedes Feld auszufüllen und den Inhalt zu formatieren:

Create a new blog post in Webflow with the title "How SaaS Teams Use AI to Cut Support Costs", 
slug "saas-ai-support-costs", and the following body content: [paste content]. 
Set the author to "Sarah Chen", add tags "AI" and "Customer Support", 
and mark it as a draft.

Claude legt den Eintrag an, ordnet alle Felder zu und bestätigt, dass der Entwurf gespeichert ist. Sie prüfen und veröffentlichen, wenn Sie bereit sind.

Preisseiten-Texte in mehreren Einträgen aktualisieren

Wenn sich eine Preisstufe ändert, ist es mühsam, jeden Verweis manuell anzupassen:

In my Webflow CMS, find all collection items that mention "Starter plan $49/month" 
and update that text to "Starter plan $59/month"

Claude fragt die Collection ab, erkennt die betroffenen Einträge und wendet die Änderung in einem Durchgang auf alle an.

Meta-Descriptions vor einer Kampagne aktualisieren

Bevor eine bezahlte Kampagne startet, soll jede Meta-Description einer Landingpage zum Kampagnenansatz passen:

Update the meta description on the page with slug "product/analytics" to: 
"See every user action in real time. SaaS analytics built for growth teams. 
Start free, no credit card required."

Claude nimmt die Änderung vor und kann die Seite auf Wunsch sofort veröffentlichen. Für Teams, die Content-Updates mit Akquise verbinden, passt ein solcher Workflow gut zur Zusammenarbeit mit PPC-Agenturen für B2B SaaS, SEO-Agenturen für B2B SaaS oder Performance-Marketing-Agenturen für B2B SaaS.

Nach einem Content-Audit veröffentlichen

Nachdem Sie einen Stapel von CMS-Updates geprüft haben, die als Entwürfe bereitliegen:

Publish the Webflow site ID [your-site-id] to production

Eine Zeile. Erledigt.

Was die Claude-Webflow-MCP-Integration nicht leistet

Klarheit über die Grenzen spart Zeit. Der MCP-Server kann Folgendes nicht:

• Den Webflow Designer für visuelle Layoutarbeit ersetzen. Für komplexe Komponenten, neue Seitenvorlagen oder Animationen brauchen Sie weiterhin den Editor.
• Eigenen Code oder Webflow-Logic-Flows per Gespräch verarbeiten.
• Ihre Content-Strategie automatisch ableiten. Claude handelt nach Ihren Vorgaben. Die redaktionelle Entscheidung bleibt bei Ihrem Team.
• Die API-Rate-Limits von Webflow umgehen. Große Batch-Vorgänge über Hunderte CMS-Einträge stoßen an dieselben Grenzen wie jeder andere API-Client.

Für Content-Updates, CMS-Verwaltung und Veröffentlichung deckt die Integration den gesamten Workflow ab. Für designlastige Arbeit bleibt der Editor das richtige Werkzeug.

Lohnt sich die Claude-Webflow-MCP-Integration für B2B-SaaS-Teams?

Für Teams, die regelmäßig Inhalte in Webflow veröffentlichen, lautet die Antwort ja, mit einem klaren Anwendungsfall.

Die Integration lohnt sich, wenn Ihr Team:

• ein umfangreiches CMS betreut (Blogbeiträge, Fallstudien, Changelogs, Hilfeartikel)
• häufig Texte im Zusammenhang mit Kampagnen oder Produktänderungen aktualisiert
• nicht technischen Teammitgliedern ermöglichen will, Inhalte ohne Editor-Zugang zu veröffentlichen
• bereits Claude für die Content-Erstellung nutzt und den manuellen Schritt des Kopierens in Webflow entfernen möchte

Die Einrichtung dauert unter 15 Minuten. Die Zeitersparnis beim ersten Batch-Update von Inhalten gleicht das sofort aus.

Bei SaaS Hackers sehen wir diese Integration als praxisnahes Beispiel dafür, wo AI-Agenten vom spannenden Experiment zum Betriebsalltag werden. Sie ist kein Demo-Feature, sondern ein wiederholbarer Workflow, der direkt dazu passt, wie SaaS-Content-Teams ohnehin arbeiten. Wenn Sie mehr bewährte Praktiker, Tools und Partner in diesem Bereich suchen, entdecken Sie den größeren SaaS Hackers Ressourcen-Hub oder stöbern Sie im gesamten Blog.

FAQs

Was ist der Webflow-MCP-Server und wie funktioniert er mit Claude?

Der Webflow-MCP-Server ist ein offizieller, von Webflow entwickelter Konnektor, der den Standard Model Context Protocol nutzt, um Claude direkten Zugriff auf Ihren Webflow-Workspace zu geben. Nach der Konfiguration kann Claude CMS-Daten lesen und schreiben, Seiten-Metadaten aktualisieren und Inhalte veröffentlichen, indem es in Ihrem Auftrag über eine strukturierte Verbindung mit klar geregelten Berechtigungen die Webflow API aufruft.

Muss ich programmieren können, um Claude mit Webflow MCP zu nutzen?

Nein. Für die Einrichtung führen Sie zwei Terminal-Befehle aus und bearbeiten eine JSON-Konfigurationsdatei. Danach arbeiten Sie vollständig in einfacher Sprache mit Claude. Nicht technische Content-Manager können CMS-Updates übertragen und Seiten veröffentlichen, ohne Code zu schreiben.

Ist die Webflow-MCP-Integration auf einer Live-Produktionswebsite sicher nutzbar?

Ja, aber mit der gebotenen Vorsicht. Der MCP-Server verwendet Ihr Webflow-API-Token und arbeitet daher mit allen Berechtigungen, die dieses Token mitbringt. Für Produktivseiten empfiehlt es sich, ein Token mit den minimal nötigen Berechtigungen für Ihren Workflow zu erstellen (zum Beispiel CMS lesen/schreiben), statt eines Tokens mit Vollzugriff. Prüfen Sie Änderungen immer, bevor Sie sie in der Produktivumgebung veröffentlichen.

Was ist der Unterschied zwischen Claude Desktop und Claude Code für Webflow MCP?

Beide funktionieren mit demselben Webflow-MCP-Server. Claude Desktop ist die Chat-Anwendung für Endnutzer und eignet sich für Content- und Marketingteams, die eine Gesprächsoberfläche wünschen. Claude Code ist das auf Entwickler ausgerichtete CLI-Tool und eignet sich für Entwickler, die Webflow-Vorgänge im Rahmen eines größeren Workflows per Skript steuern oder automatisieren möchten. Die Konfiguration unterscheidet sich leicht, die verfügbaren Aktionen sind jedoch identisch.

Kann ich mit Claude Hunderte Webflow-CMS-Einträge auf einmal aktualisieren?

Claude kann Batch-Vorgänge über CMS-Collections hinweg ausführen, allerdings gelten die API-Ratenlimits von Webflow. Bei sehr großen Collections (Hunderte Einträge) müssen Sie Aktualisierungen möglicherweise in Batches ausführen und auf Antworten zum Ratenlimit achten. Bei typischen Content-Mengen von SaaS-Unternehmen (einige Dutzend bis niedrige Hundert Einträge) funktionieren Massenaktualisierungen problemlos.