Webflow: professionelle Webentwicklung mit Code, Visual Development und KI-Copilot

Über Webflow kursieren viele Missverständnisse. Das hartnäckigste: Webflow sei ein Werkzeug, mit dem man Webseiten zusammenklickt, ohne zu wissen, was darunter passiert. Das Gegenteil ist der Fall. Webflow ist ein professionelles Entwicklungswerkzeug, das klassisches Coding mit visuellem Coding verbindet und über einen starken MCP-Server verfügt, mit dem KI als Copilot in der Entwicklung mitarbeitet.

Genau so arbeite ich seit Jahren mit Webflow, für neue Webseiten ebenso wie für Migrationen von anderen Systemen. In diesem Beitrag zeige ich dir, was das in der Praxis bedeutet und was du als KMU davon hast.

Kurz gesagt: In Webflow entsteht echter, sauberer Code. Visuelles Arbeiten beschleunigt die Entwicklung, eigener Code erweitert sie, und KI übernimmt über den MCP-Server repetitive Aufgaben. Die Qualitätskontrolle bleibt beim Menschen.

Visuelles Coding: schneller zum sauberen Code

Im Webflow Designer arbeitest du nicht mit Vorlagen oder fertigen Bausteinen, sondern direkt mit den Grundlagen des Webs: HTML-Elementen, CSS-Eigenschaften, Flexbox, Grid, Breakpoints und Klassen. Du siehst jede Änderung sofort, und Webflow schreibt im Hintergrund den entsprechenden Code. Wer HTML und CSS versteht, arbeitet in Webflow deshalb deutlich schneller, weil das ständige Wechseln zwischen Code-Editor und Browser entfällt.

Diesen Ansatz nennt man Visual Development oder visuelles Coding. Er ersetzt das Fachwissen nicht, er macht es effizienter. Mehr zu den Vorteilen findest du im Beitrag Vorteile von visuellem Coding.

Struktur nach Client-First

Damit eine Webseite auch in Jahren noch wartbar ist, braucht es eine klare Struktur. Ich arbeite nach Client-First, einem verbreiteten Klassensystem von Finsweet für Webflow. Es legt fest, wie Klassen benannt, Abstände definiert und Seiten aufgebaut werden. Das Ergebnis ist ein konsistentes Design System, in dem sich auch andere Entwickler:innen sofort zurechtfinden.

Klassisches Coding: dort, wo es nötig ist

Visuelles Coding deckt einen grossen Teil der Arbeit ab. Aber professionelle Webseiten brauchen oft mehr, und dafür bietet Webflow klassische Wege:

• Custom Code: Eigenes HTML, CSS und JavaScript lässt sich pro Seite, global für die ganze Webseite oder als Embed an jeder beliebigen Stelle einbinden. So setze ich Funktionen um, die über den Standard hinausgehen, etwa individuelle Filter, Rechner oder Anbindungen an externe Dienste.
• Komponenten: Wiederkehrende Elemente wie Navigation, Footer, Karten oder Call-to-Action-Bereiche lege ich als Komponenten mit Eigenschaften an. Eine Änderung an einer Stelle wirkt sich auf die ganze Webseite aus.
• CMS: Das eingebaute CMS bildet Blogbeiträge, Referenzen, Teammitglieder, Stellenangebote oder FAQs als strukturierte Collections ab, mit Referenzfeldern, Filtern und dynamischen Vorlagenseiten.
• Strukturierte Daten: Mit JSON-LD zeichne ich Inhalte für Suchmaschinen und KI-Systeme aus, etwa Organisation, Artikel, FAQ oder Breadcrumbs. Auf CMS-Vorlagen werden diese Angaben automatisch mit den Inhalten jedes Eintrags befüllt.
• Code-Komponenten: Mit DevLink lassen sich Webflow-Komponenten mit React-Projekten verbinden. Für Webseiten mit App-Anteil ist das eine Brücke zwischen visueller Entwicklung und klassischem Code.

Visuell und klassisch sind in Webflow also keine Gegensätze. Sie ergänzen sich, und ich entscheide pro Aufgabe, welcher Weg schneller und sauberer zum Ziel führt.

Der MCP-Server: KI als Copilot in der Entwicklung

Der dritte Baustein ist der jüngste und für meine Arbeit inzwischen einer der wichtigsten. Webflow stellt einen offiziellen MCP-Server bereit. MCP steht für Model Context Protocol, einen offenen Standard, über den KI-Assistenten wie Claude, ChatGPT oder Cursor direkt mit einer Anwendung arbeiten können.

Konkret heisst das: Die KI kann im Auftrag CMS-Einträge anlegen und bearbeiten, Seiten und Meta-Angaben prüfen, Texte übersetzen, Strukturen analysieren, Elemente und Styles setzen oder Weiterleitungen vorbereiten. Sie arbeitet dabei direkt im Projekt, nicht über Umwege wie kopierte Textblöcke.

Wie ich mit dem Copilot arbeite

Die KI ersetzt nicht das Handwerk. Konzept, Design, Informationsarchitektur und Qualitätskontrolle bleiben bei mir. Die KI übernimmt, was repetitiv ist und viel Zeit kostet:

• dutzende oder hunderte CMS-Einträge sauber anlegen und befüllen,
• eine ganze Webseite in eine zweite Sprache übertragen,
• Meta-Titel, Beschreibungen und strukturierte Daten konsistent prüfen und ergänzen,
• Inhalte auf Rechtschreibung, Begriffe und Tonalität durchgehen,
• Probleme wie fehlende Alt-Texte oder kaputte Links aufspüren.

Jeder Schritt wird geprüft, bevor er live geht. Das Ergebnis: gleiche Qualität in einem Bruchteil der Zeit. Diese Effizienz gebe ich weiter, in Form von tieferen Entwicklungskosten für dich.

Migrationen: der Wechsel zu Webflow mit KI-Unterstützung

Besonders deutlich zeigt sich der Vorteil bei Migrationen. Wer von WordPress, TYPO3, Drupal oder einem älteren System zu Webflow wechselt, hat meist viele Inhalte: Blogbeiträge, Referenzen, Seiten, Bilder, alte URLs. Früher bedeutete das tagelanges Kopieren und Einfügen.

Heute exportiere ich die Inhalte, bereite sie strukturiert auf und lasse sie über den MCP-Server ins Webflow-CMS übertragen. Die KI hilft beim Zuordnen der Felder, beim Bereinigen von altem HTML, beim Übertragen der Meta-Angaben und beim Erstellen der Weiterleitungen von alten auf neue URLs. Ich prüfe Stichproben, korrigiere Sonderfälle und kontrolliere am Schluss die Live-Seite. So bleiben Inhalte und Rankings erhalten, und der Wechsel geht deutlich schneller.

Wie ein Wechsel von WordPress zu Webflow konkret abläuft und wo Webflow nicht die richtige Wahl ist, beschreibe ich im Beitrag WordPress oder Webflow? Ein ehrlicher Vergleich für KMU.

So läuft ein Webflow-Projekt bei mir ab

1. Konzept und Struktur: Wir klären Ziele, Zielgruppen und Inhalte und legen die Seitenstruktur fest.
2. Design: Das Design entsteht auf Basis deiner Marke, direkt als Design System mit Farben, Schriften und Komponenten.
3. Entwicklung: Ich setze die Webseite visuell und mit eigenem Code um, richte das CMS ein und hinterlege strukturierte Daten.
4. Inhalte und Migration: Bestehende Inhalte übertrage ich mit KI-Unterstützung, neue Inhalte pflegen wir gemeinsam ein.
5. Qualitätskontrolle und Livegang: Ich prüfe Darstellung, Ladezeiten, SEO-Angaben und Weiterleitungen, bevor die Webseite live geht.
6. Schulung zur Administration: Du lernst, deine Inhalte selbst zu pflegen, und kannst dich bei Fragen jederzeit an mich wenden.

Was du als KMU davon hast

Sicherheit ohne Wartungsaufwand

Webflow liefert deine Webseite als statische Dateien über ein weltweites Netzwerk aus. Es gibt keinen eigenen Server, keine PHP-Installation und keine Plugins, die du aktualisieren musst. Hosting, SSL, Backups und das Patchen der Infrastruktur übernimmt Webflow. Warum das gerade für KMU so wichtig ist, liest du im Beitrag «Wer kümmert sich eigentlich um die Sicherheit deiner Webseite?».

Sichtbarkeit in Google und KI-Suchen

Sauberer Code, schnelle Ladezeiten und strukturierte Daten sind eine gute Grundlage für Sichtbarkeit. Neben klassischer Suchmaschinenoptimierung (SEO) optimiere ich deine Webseite für AI-Search: für Antwortmaschinen (AEO, Answer Engine Optimization) und generative KI-Suchen (GEO, Generative Engine Optimization). So wirst du auch von KI-Chatbots wie ChatGPT, Claude und Gemini gefunden, zitiert und empfohlen.

Einfache Inhaltspflege

Im Webflow Editor bearbeitest du Texte, Bilder und CMS-Inhalte direkt auf der Seite. Struktur und Design bleiben geschützt. Nach einer kurzen Schulung zur Administration pflegst du deine Inhalte selbständig.

Mehrsprachigkeit

Für mehrsprachige Webseiten gibt es Webflow Localization. Als Alternative setze ich Weglot ein, KOMUNIQUE ist Weglot-Partner mit sehr guten Konditionen für meine Kund:innen.

Wann Webflow nicht die beste Wahl ist

Zur ehrlichen Einordnung gehört auch, wo andere Lösungen besser passen. Wenn Inhalte in sehr grosser Menge, aus mehreren Quellen oder für viele Kanäle verwaltet werden, setze ich je nach Anforderungen auf Webstudio in Kombination mit einem Headless-CMS wie Hygraph oder Sanity. Für komplexe Onlineshops ist Shopify oft die bessere Basis. Einen Überblick über klassische Systeme findest du im Beitrag Craft CMS, Drupal, TYPO3 und WordPress im Vergleich.

Fazit

Webflow ist ein professionelles Entwicklungswerkzeug. Es verbindet visuelles Coding für Tempo mit klassischem Code für Flexibilität, bietet ein strukturiertes CMS und strukturierte Daten, und mit dem MCP-Server arbeitet KI als Copilot direkt im Projekt mit. Für dich als KMU heisst das: eine schnelle, sichere und gut gepflegte Webseite, effizient entwickelt und ohne Wartungsballast.

Du planst eine neue Webseite oder möchtest von einem anderen System zu Webflow wechseln? Schreib mir. Webseiten für KMU gibt es ab CHF 3'000, umfangreichere Projekte offeriere ich individuell, mit einer Offerte, in der alle Positionen einzeln aufgeführt sind. Für Branding, Grafik und Text arbeite ich bei Bedarf mit meinen Partnerinnen im kreativkollektiv zusammen.