Claude mit Webflow verbinden: Was du davon hast
Du tippst noch jeden CMS Eintrag einzeln in Webflow ein? Das kannst du dir sparen. Claude verbindet sich über den offiziellen Webflow MCP Server direkt mit deiner Website und übernimmt CMS Pflege, SEO Audits und Designarbeit auf Zuruf.
In diesem Artikel zeige ich dir die komplette Einrichtung in Claude Desktop, Schritt für Schritt, inklusive der Bridge App im Designer und ein paar Beispielprompts für den Alltag.
Was ist der Webflow MCP Server?
MCP steht für Model Context Protocol. Es ist eine offene Schnittstelle, über die KI Modelle wie Claude direkt mit externen Werkzeugen sprechen, ohne dass du selbst Code schreibst. Webflow betreibt darauf einen eigenen MCP Server, der natürliche Sprache in echte Aktionen gegen dein Projekt übersetzt: CMS Einträge anlegen, Seiten bauen, Inhalte pflegen, Assets verwalten. Mehr Details dazu findest du in der offiziellen Webflow Dokumentation.
Der Server läuft unter der Adresse mcp.webflow.com und funktioniert nicht nur mit Claude. Auch Cursor, Windsurf und ChatGPT sprechen mit demselben Server, jeweils über ihre eigene Anbindung. Für dich als Nutzer bedeutet das: Du entscheidest, in welchem Chat du arbeitest, das Ergebnis in Webflow bleibt gleich. Mehr zu den Fähigkeiten des Servers selbst liest du in meinem Artikel zu Webflow MCP.
Brauchst du dafür einen bezahlten Claude Plan?
Ja, das solltest du vorher wissen. Der Webflow Connector gehört zu den Connectors aus dem Claude Verzeichnis, und die stehen ausschließlich auf bezahlten Plänen zur Verfügung, also Pro, Max, Team oder Enterprise. Im kostenlosen Claude Plan taucht der Connector gar nicht erst auf. Ohne mindestens Claude Pro funktioniert diese Anleitung also nicht.
Was kannst du mit Claude und Webflow zusammen bauen?
- CMS Einträge in großer Zahl anlegen, zum Beispiel Produktseiten oder Team Profile aus einer Vorlage
- SEO Audits fahren und Meta Titel, Meta Beschreibungen oder Alt Texte direkt korrigieren
- Design System Konsistenz prüfen, etwa Klassennamen und Variablen
- Elemente, Styles und Variablen direkt auf der Seite anlegen
Wenn du selbst keine Zeit für die laufende Pflege hast, dein Blog aber trotzdem regelmäßig frische Inhalte braucht, ist das genau der Bereich, den ich in meinen Webflow Leistungen übernehme.
Brauchst du Programmierkenntnisse für die Anbindung?
Nein. Die Einrichtung läuft komplett über Klicks und eine Autorisierung im Browser. Du brauchst keine Codezeile, kein Terminal und keinen API Schlüssel für den Standardweg über den Claude Connector.
Voraussetzungen
- Claude Desktop installiert und geöffnet, mit mindestens Claude Pro, Max, Team oder Enterprise, im kostenlosen Plan geht es nicht
- Einen Webflow Account mit mindestens einer Seite, die du verwalten darfst
- Owner oder Admin Rechte für die Autorisierung, sonst lässt sich die Seite nicht freigeben
Claude mit Webflow verbinden: Die Einrichtung in 7 Schritten
So richtest du den offiziellen Webflow Connector in Claude Desktop ein:
- Connector Liste öffnen. Klicke im Claude Chatfenster auf das Pluszeichen und dann auf Connectors hinzufügen.
- Webflow Connector suchen. Suche nach Webflow. Falls er unter Empfohlen nicht auftaucht, wechsle auf Alle.
- Connector auswählen. Klicke auf den Webflow Connector und danach auf Verbinden, um ihn zu installieren.
- Zugriff gewähren. Melde dich bei Webflow an, falls du dazu aufgefordert wirst, und erlaube Claude den Zugriff auf dein Konto.
- Seiten und Workspaces auswählen. Wähle die Websites und Workspaces aus, auf die Claude zugreifen darf, und klicke auf App autorisieren.
- Bridge App öffnen. Öffne deine Seite im Designer, drücke die Taste E, starte die Webflow MCP Bridge App und warte, bis sie sich mit dem Server verbunden hat.
- Ersten Prompt schreiben. Jetzt kannst du direkt loslegen.
Beispielprompts für den Alltag
Ein paar Formulierungen, mit denen du sofort testen kannst, ob alles funktioniert:
- Liste alle meine Collections auf und zeig mir die Feldstruktur.
- Prüfe meine Seite auf tote Links, fehlende Alt Texte und unvollständige Meta Beschreibungen.
- Bau mir eine responsive Hero Section mit Headline, Beschreibung und CTA Button.
Wo liegen die Grenzen der Anbindung?
Ein paar Aktionen funktionieren nur, wenn der Designer mit geöffneter Bridge App läuft: visuelle Schnappschüsse von Elementen, oder das Lesen und Ändern der aktuellen Auswahl, Seite, Modus, Branch und Breakpoints. Alles andere, also CMS Pflege, Seiten anlegen, Assets verwalten und die meisten Designaufgaben, funktioniert auch ohne geöffneten Designer.
Wichtig auch: Der Connector arbeitet innerhalb deiner bestehenden Rechte. Er kann keine Zugriffsrechte vergeben oder Nutzer hinzufügen, das bleibt bei dir als Owner oder Admin.
Fazit
Die Einrichtung dauert etwa 5 Minuten und du brauchst dafür keine technische Vorerfahrung, dafür aber einen bezahlten Claude Plan. Wenn du regelmäßig CMS Inhalte pflegst oder SEO Checks fährst, lohnt sich der Aufwand fast immer schon nach der ersten Session. Und falls du lieber gleich mit jemandem sprichst, der die Anbindung für dich einrichtet und in deinen Workflow integriert, melde dich einfach bei mir.
Häufig gestellte Fragen
Was kostet die Verbindung von Claude und Webflow?
Der Webflow MCP Server selbst kostet nichts extra und läuft auf allen Site Plänen. Für Claude brauchst du zwingend einen bezahlten Plan, mindestens Pro. Der Webflow Connector gehört zu den Connectors aus dem Verzeichnis, und die sind im kostenlosen Claude Plan nicht enthalten.
Funktioniert der MCP Server auch mit Claude Code oder Cursor?
Ja. Webflow bietet eigene Anleitungen für Claude Code, Cursor, Windsurf und Postman an, alle nutzen denselben MCP Server unter derselben Adresse.
Kann Claude ohne geöffneten Designer arbeiten?
Für die meisten Aufgaben ja, etwa CMS Pflege oder das Anlegen von Seiten. Nur visuelle Aktionen wie Schnappschüsse oder das Ändern der aktuellen Auswahl brauchen eine offene Designer Session mit aktiver Bridge App.
Ist meine Website Sicherheit durch die Verbindung gefährdet?
Die Verbindung läuft über OAuth und innerhalb deiner bestehenden Rechte. Claude kann also nur das tun, wofür dein Account ohnehin berechtigt ist, und keine neuen Zugriffsrechte vergeben.
Wie wechsle ich den Workspace, mit dem Claude verbunden ist?
Entferne den Webflow Connector in Claude und installiere ihn erneut. Bei der Autorisierung wählst du dann den gewünschten Workspace aus.
Du willst Claude für dein Webflow Projekt einrichten, statt es selbst zu testen?
Ich helfe dir als Webflow Spezialist, ohne Agentur Overhead, mit Fixpreis.
Jetzt kostenlos anfragen →
