Website mit KI erstellen: So funktioniert Webflow AI

Eine Website mit KI erstellen und anschließend Texte, Abschnitte und Inhalte verfeinern: Webflow AI macht aus einem Unternehmensbriefing einen bearbeitbaren Webauftritt mit mehreren Seiten. Für Gründer und kleine Agenturen verschiebt sich damit vor allem der Einstieg in die Arbeit. Sie können einen Website-Entwurf beurteilen, bevor sie jede Seite selbst zusammensetzen. Angebot, Belege und die Entscheidung zur Veröffentlichung bleiben in ihrer Verantwortung.

Mit der Überarbeitung vom 5. Februar 2026 hat Webflow die Erstellung mehrseitiger Websites samt Stilen, Animationen und einem grundlegenden Designsystem in den Erstellungsprozess integriert. Der Einstieg erfolgt über New site im Dashboard und steht Kunden aller Tarifstufen einschließlich Enterprise offen. Die Seitenlimits des jeweiligen Tarifs gelten trotzdem. Webflows Ankündigung zum Start.

Welches KI-Tool passt zu welcher Aufgabe?

Webflow AI lässt sich als Werkstatt mit verschiedenen Werkzeugen verstehen. Der Website-Builder legt die erste Struktur an. Die Werkzeuge im Editor helfen bei der Ausarbeitung einzelner Teile. MCP, ausgeschrieben Model Context Protocol, stellt die Verbindung her, über die ein externer KI-Assistent Werkzeuge innerhalb einer Webflow-Website bedienen kann.

Das sind unterschiedliche Zugänge, auch wenn Webflow seine integrierten Funktionen unter Webflow AI zusammenfasst. Überblick über die KI-Funktionen, Voraussetzungen für den Builder, MCP im Überblick.

Webflow AI in den Workspace-Einstellungen aktivieren

Ein Workspace Owner oder Admin muss den betreffenden Workspace öffnen und unter Workspace settings → General die Option Enable Webflow AI einschalten. Bei Enterprise lässt sich außerdem über benutzerdefinierte Rollen die Berechtigung Use Webflow AI steuern. Fehlt einem Teammitglied die Option, sollten sowohl der Schalter im Workspace als auch die Rolle geprüft werden. Webflows Anleitung für Administratoren.

Das Generieren von Websites, die Abschnittsgestaltung und die kontextbezogene Hilfe verbrauchen keine Webflow AI Credits. Für Texte, die Generierung von CMS-Einträgen, KI-Codekomponenten und KI-gestützte SEO-Aufgaben werden dagegen Credits berechnet. Das Kontingent wird im gesamten Workspace geteilt; der Verbrauch hängt von der Aufgabe ab. Das separat kostenpflichtige Zusatzpaket auf Webflows Preisseite umfasst derzeit 2,000 Credits pro Monat für $20/Monat bei jährlicher Abrechnung. Regeln für Credits, Webflow-Preise.

Website mit KI erstellen: Vom Prompt zur veröffentlichten Website mit drei Seiten

Als überschaubares Beispiel eignet sich ein kleines Dienstleistungsunternehmen mit einem klaren Konversionsziel. Hier dient Cedar Studio als fiktives Studio für Markendesign, das Projektanfragen gewinnen möchte. Die Website besteht aus Startseite, Leistungen und Kontakt.

Diese Anleitung stützt sich auf die Dokumentation und ist kein Praxistest. Für den Artikel wurde keine Webflow-Testwebsite veröffentlicht. Die folgenden manuellen Korrekturen sind empfohlene Prüfschritte, keine im Test beobachteten Mängel.

1. Die Voraussetzungen für drei Seiten schaffen

Mit einem kostenpflichtigen Workspace lassen sich alle drei Seiten direkt zu Beginn generieren. Bei einem kostenlosen Workspace ohne kostenpflichtigen Site-Tarif beginnt man mit Startseite und Kontakt. Nach der Generierung wird ein kostenpflichtiger Site-Tarif ergänzt; anschließend lässt sich die Leistungsseite über die KI-Seitengenerierung im Pages-Panel erstellen. Die erste Generierung unterstützt mit einem kostenpflichtigen Tarif bis zu fünf Seiten, ohne einen solchen Tarif zwei. Der automatisch erstellte Styleguide zählt nicht zum Limit von zwei Seiten. Für die Veröffentlichung dieser Unternehmenswebsite unter einer eigenen Domain reicht Basic aus. Limits des Builders, Leistungsumfang der Site-Tarife.

2. Das Unternehmen in einem Briefing beschreiben

Unter New site die Option AI Site Builder wählen und einen Prompt wie diesen eingeben:

Erstelle eine Website für Cedar Studio, ein kleines Studio für Markendesign, das unabhängige Unternehmen aus Hotellerie und Gastronomie betreut. Ziel sind Projektanfragen. Verwende drei Seiten: Startseite, Leistungen und Kontakt. Die Startseite soll das Angebot erklären und den Ablauf vorstellen. Die Leistungsseite soll Markenstrategie, visuelle Identität und Webdesign erläutern. Die Kontaktseite soll dazu einladen, ein Projektbriefing zu senden. Verwende warme, neutrale Farben, dunklen, gut lesbaren Text und zurückhaltende Animationen. Erfinde keine Kunden, Kundenstimmen, Auszeichnungen, Preise oder Ergebnisse. Verwende „Projekt besprechen“ als zentrale Handlungsaufforderung.

Der Prompt benennt Zielgruppe, Angebot und den gewünschten nächsten Schritt. Vor dem Einsatz für die eigene Website müssen die fiktiven Angaben durch freigegebene Unternehmensinformationen ersetzt werden.

3. Erst die Struktur freigeben, dann das Design generieren

Zunächst den Vorschlag generieren, überflüssige Seiten entfernen und die Abschnitte anordnen. Wer mit einem kostenlosen Workspace beginnt, ergänzt die Leistungsseite nach dem Tarifwechsel. Die fertige Website sollte auf das Wesentliche ausgerichtet bleiben:

Anschließend die Website generieren, das gemeinsame Theme verfeinern und in Webflow weiterarbeiten. Der Builder ordnet die gewünschten Schriften und Farben seinem Theme-System zu. Eine exakte Umsetzung des Markenauftritts muss daher geprüft und gegebenenfalls nachbearbeitet werden. Website-Erstellung und Theme-Anpassung.

4. Aus dem Entwurf einen passenden Unternehmensauftritt machen

Der Entwurf ist eine Arbeitsgrundlage. Wo das Ergebnis noch nicht passt, sind diese manuellen Korrekturen nötig:

Die schwierigste Arbeit liegt oft darin, festzulegen, was das Unternehmen tatsächlich versprechen kann. Ein ansprechender Platzhalter nimmt diese Entscheidung niemandem ab.

5. Suchinformationen und Barrierefreiheit prüfen

Im Audit-Panel die gesamte Website prüfen. Es kann fehlende Bildbeschreibungen, Seitentitel, Beschreibungen für die Suche und Schema-Markup erkennen. Letzteres sind strukturierte Angaben zur Seite. Auch KI-Vorschläge müssen mit den tatsächlichen Unternehmensinformationen abgeglichen werden. Bei Bildern in Komponenten, Lightboxen und im CMS sind separate manuelle Alt-Text-Prüfungen nötig, da das Audit-Panel diese Bereiche nicht erfasst. Anleitung und Grenzen des Audits.

Für Cedar Studio zählen korrekte Seiteninformationen und ein funktionierender Weg zur Anfrage. Leistungen, Standorte oder Bewertungen sollten nicht nur deshalb ergänzt werden, weil ein generiertes Feld noch leer ist.

6. Zuerst auf der Staging-Adresse, dann unter der eigenen Domain veröffentlichen

Publish öffnen, ausschließlich die Staging-Adresse unter webflow.io auswählen und dort veröffentlichen. Startseite, Leistungen und Kontakt aus Besuchersicht aufrufen und die Testanfrage wiederholen. Fehler beheben und die Staging-Version erneut veröffentlichen.

Für den öffentlichen Start die eigene Domain in den Site-Einstellungen verbinden, die Inhaberschaft bestätigen und die Domain im Veröffentlichungsmenü auswählen. Nach dem Veröffentlichen die drei Live-URLs und das Formular erneut prüfen. Dafür ist die entsprechende Veröffentlichungsberechtigung erforderlich. Webflows Anleitung zur Veröffentlichung.

Für die Arbeit am Unternehmensauftritt ergibt sich eine andere Reihenfolge. Beim manuellen Aufbau werden Struktur, Stile und Seiteninhalte zusammengesetzt, bevor sich das Ganze beurteilen lässt. Die Generierung zieht diese Gesamtprüfung nach vorn. Für Briefing, Entwurf und Kontrollen empfiehlt sich als Planungsrahmen ein Arbeitsblock von zwei Stunden; freigegebene Texte und Materialien sollten bereitliegen. Das ist ein Vorschlag für die Zeitplanung, keine gemessene Fertigstellungsdauer. Integrationsprobleme oder Überarbeitungen des Markenauftritts können den Aufwand erhöhen.

Den Assistant im Editor gezielt einsetzen

Die nützlichsten Prompts beschreiben eine klar begrenzte Aufgabe und legen fest, woran ein passendes Ergebnis zu erkennen ist.

Für Hilfe den Assistant über die obere Leiste öffnen und eine konkrete Webflow-Frage stellen. In diesem Modus stammen die Antworten aus dem Help Center. Derzeit wird Englisch unterstützt; möglich sind 100 Fragen innerhalb von 31 Tagen. Die Antwort sollte als Orientierung dienen und geprüft werden. Anleitung zur kontextbezogenen Hilfe.

Für einen neuen Abschnitt einen Abschnitt aus dem Add-Panel auf die Arbeitsfläche ziehen und seine Assistant-Steuerung öffnen. Ein geeignetes Layout suchen, einen generierten Entwurf auswählen und ihn an Ort und Stelle prüfen. Der Assistant kann vorhandene Klassen und Variablen wiederverwenden und neue Klassen anlegen. Klassen sind benannte Stile, Variablen gemeinsam genutzte Werte; zusammen sorgen sie für ein einheitliches Design. Bestehende Klassen kann er nicht aktualisieren. Webflows aktuelle Dokumentation zur Abschnittsgestaltung bezeichnet die Funktion weiterhin als öffentliche Beta und beschränkt sie auf ausgewählte kostenlose Vorlagen sowie Websites aus dem AI Site Builder. Die Ausgabe enthält keine Bilder, Komponenten oder dynamischen Inhalte. Anleitung zur Abschnittsgestaltung.

Für Texte kann ein Designer ein unterstütztes Textelement mit der rechten Maustaste anklicken und Modify copy wählen. Ein geeigneter Prompt wäre: „Kürze diesen Absatz, ohne die zugesagten Leistungen zu verändern oder neue Behauptungen hinzuzufügen.“ Jede inhaltliche Änderung vor der Übernahme prüfen. Dafür ist ein kostenpflichtiger Site- oder Workspace-Tarif erforderlich. Funktionen zur Textbearbeitung.

Wenn eine Website wächst, werden zwei weitere Funktionen interessant. Mit einem Site-Tarif samt CMS-Zugriff kann die KI Beispieleinträge für CMS Collections generieren, also Einträge in einer strukturierten Inhaltsliste. Über den Assistant lassen sich außerdem wiederverwendbare Codekomponenten wie Rechner erstellen. Dafür ist die Rolle Designer oder Site Manager nötig; für die Veröffentlichung gelten zusätzliche Anforderungen an Site- und Workspace-Tarife. Diese Komponenten stellen weder Datenbanken noch Authentifizierung oder die Verwaltung geheimer Schlüssel bereit. Für die hier beschriebene einfache Unternehmenswebsite bleiben sie außen vor, solange das Projekt sie nicht benötigt. Voraussetzungen für CMS-Funktionen, Voraussetzungen für Codekomponenten.

Claude für seitenübergreifende Aufgaben anbinden

MCP ist hilfreich, wenn eine Aufgabe mehrere Seiten oder Datensätze betrifft. Webflow dokumentiert die Unterstützung für Seiten- und Layoutbearbeitung, Stile, Komponenten, CMS-Verwaltung und Veröffentlichung. MCP steht in jedem Site-Tarif einschließlich Starter zur Verfügung. Nutzer mit der Rolle Reviewer können keine Verbindung herstellen. MCP-Funktionen.

Um Claude anzubinden, eine Chat- oder Code-Sitzung öffnen, über das Plus-Menü einen Connector hinzufügen, Webflow suchen und verbinden. Danach Webflows Autorisierungsprozess durchlaufen, die betreffende Website auswählen und zu Claude zurückkehren. Standardmäßig fragt Claude vor Aktionen nach einer Freigabe. Webflows Anleitung zur Claude-Anbindung.

Ein sinnvoller erster Auftrag für das Beispiel wäre:

Lies die Anweisungen für diese Website und prüfe anschließend Startseite, Leistungen und Kontakt. Liste uneinheitliche Leistungsbezeichnungen und Handlungsaufforderungen auf. Schlage konkrete Ersatzformulierungen auf Grundlage der unten freigegebenen Texte vor. Zeige die geplanten Änderungen vor der Bearbeitung und überlasse die Veröffentlichung mir.

Das ist ein beispielhafter Auftrag zum Ausprobieren, kein garantiertes Prüfergebnis. Die vorgeschlagenen Änderungen müssen selbst mit der Seite abgeglichen werden.

Die meisten MCP-Aktionen können inzwischen ohne geöffnete Webflow-Sitzung ausgeführt werden. Aktionen, die sich auf die Auswahl auf der Arbeitsfläche beziehen, benötigen weiterhin die MCP Bridge App. Die gewöhnliche MCP-Nutzung wird über den Tarif oder die Credits des externen KI-Tools abgerechnet, nicht über Webflow AI Credits. Aktuelle Arbeitsweise und Grenzen von MCP.

Sechs Anwendungen, nach praktischem Nutzen geordnet

Die aussichtsreichsten Anwendungen beginnen mit einem klaren Briefing und einer verantwortlichen Person, die das Ergebnis beurteilen kann. Die folgenden Abläufe sind Vorschläge, keine gemessenen Kundenergebnisse.

Die dokumentierten Bausteine dafür sind Webflows Abschnittswerkzeuge, Audit-Panel und MCP-Aktionen. Ob sich der erhoffte Nutzen einstellt, hängt vom Prüfprozess ab.

Zwei Dienstleistungen, die sich darauf aufbauen lassen

Nachfrage besteht sowohl nach der Website-Erstellung als auch nach Unterstützung dabei. Die am 22. Oktober 2026 abgerufenen DataForSEO-Schätzungen für englischsprachige Suchanfragen in den USA weisen 33,100 monatliche Suchanfragen nach „ai website builder“ aus. Das zeigt breites Interesse an der Kategorie, keine Nachfrage nach einem weiteren austauschbaren Generator.

Am aussichtsreichsten: Website-Erstellung mit Veröffentlichung und Übergabe

Ein wiederholbares Angebot kann sich an Gründer richten, die eine bearbeitbare Webflow-Website mit freigegebenen Inhalten und einem geprüften Weg zur Anfrage benötigen. DataForSEO schätzt 480 monatliche Suchanfragen nach „webflow agency“ in den USA. Das erfasst Interesse an eingekaufter Unterstützung, belegt aber nicht, wie viele Suchende genau dieses Paket wünschen.

Die kleinste verkaufbare Variante könnte sich auf eine Branche konzentrieren, ein strukturiertes Eingangsbriefing nutzen, drei fertige Seiten liefern und eine aufgezeichnete Einweisung in die Bearbeitung enthalten. Die Agentur könnte die KI für den Entwurf einsetzen und zugleich die Verantwortung für korrekte Inhalte, Markenentscheidungen und die Prüfung vor der Veröffentlichung übernehmen.

Der Haken: Einen ähnlichen Entwurf können Wettbewerber leicht generieren. Schwerer nachzuahmen sind Branchenkenntnis, die Abstimmung und Freigabe von Materialien sowie die Verantwortung für eine saubere Übergabe. Vor dem Aufbau eines wiederverwendbaren Agentursystems sollte außerdem Webflows Einschränkung beim Teilen von Libraries aus AI-Site-Builder-Websites geprüft werden. Einschränkungen des Builders.

An zweiter Stelle: Wartung vom Audit bis zur Korrektur

Ein weiteres Angebot kann Website-Verantwortliche von erkannten Lücken bis zu geprüften Korrekturen begleiten. DataForSEO schätzt 320 monatliche Suchanfragen nach „website seo audit“ in den USA. Das ist ein breiteres Marktsignal, keine Zahl speziell für Webflow-Kaufinteressenten.

Eine erste Version könnte ein Webflow-Audit, eine Liste vorgeschlagener Korrekturen und eine geprüfte Veröffentlichung kombinieren. MCP könnte klar begrenzte Inhaltsänderungen unterstützen; Unternehmensangaben und fertige Seiten würde ein Mensch prüfen. Verkauft werden die Erledigung der vereinbarten Arbeit und die Verantwortung dafür.

Der Haken: Eine ausgefüllte Beschreibung garantiert keine Rankings, und automatische Prüfungen erfassen nicht alles. Webflows eigenes Audit-Panel lässt bestimmte Bildpositionen aus. Ein nützliches Angebot muss diese Lücken prüfen und auf Versprechen zur Sichtbarkeit in Suchmaschinen verzichten. Prüfumfang des Audits.

Wo Webflow AI an seine Grenzen stößt

Der Builder passt, wenn eine neue Grundlage in Webflow entstehen soll und Zeit für die Ausarbeitung vorhanden ist. Bei einer bestehenden, individuell aufgebauten Website sind die unterstützten Editor-Werkzeuge oder MCP der passende Einstieg. Keiner der beiden Wege gibt einem Agenten uneingeschränkte Kontrolle: MCP fehlen weiterhin bestimmte Einstellungen für Elemente und CMS-Bindungen, während die Abschnittsgenerierung bestehende Klassen nicht umschreiben kann. MCP-Grenzen, Grenzen des Assistant.

Auch App Gen sollte keine Grundlage für ein neues Projekt sein: Webflow hat die Entwicklung pausiert und eine Einstellung angekündigt. Aktueller Überblick über die KI-Funktionen.

Wer noch eine Plattform auswählt, findet in Webflow vs. Framer Hilfe bei der Plattformentscheidung, in Framer AI einen Einblick in dessen KI-Arbeitsablauf und im Vergleich der KI-Website-Builder eine breitere Auswahl.

Ist Webflow ein KI-Tool?

Webflow ist eine Website-Plattform mit integrierten KI-Werkzeugen. Der Website-Builder erzeugt einen ersten Entwurf; weitere Funktionen helfen bei Texten, Abschnitten, Inhalten und laufenden Aufgaben. MCP verbindet einen externen Assistenten mit einer freigegebenen Website. Webflow AI im Überblick.

Kann KI eine Website erstellen?

Ja. Webflows Builder generiert aus einer Beschreibung eine bearbeitbare Website. Freigegebene Unternehmensinformationen, funktionierende Links und Formulare sowie eine Prüfung vor der Veröffentlichung sind weiterhin nötig. Das Beispiel mit drei Seiten oben zeigt den dokumentierten Ablauf. Webflows Builder.

Ist Webflow wirklich kostenlos?

Es gibt einen kostenlosen Starter-Tarif mit Zugriff auf Webflow AI und MCP, allerdings mit einem Limit von zwei statischen Seiten. Das Beispiel mit drei Seiten und eigener Domain erfordert einen kostenpflichtigen Site-Tarif. Zusätzliche KI-Credits sind ein separater, optionaler Kauf. Webflow-Preise.

Der nächste Schritt am Montag: das freigegebene Angebot, echte Bilder und den Empfänger der Kontaktanfragen zusammentragen. Startseite, Leistungen und Kontakt entwerfen und vor dem öffentlichen Start auf der Staging-Version einen vollständigen Anfrageablauf fertigstellen.

Für die Umsetzung dieses Ablaufs im eigenen Unternehmen unterstützen wir bei der Planung von Website und Automatisierung.