ChatGPT-Prompts für Webflow: Custom Code schreiben ohne Programmieren

Update, Oktober 2026: Einige der Tools in diesem Beitrag haben sich weiterentwickelt. Das ursprüngliche OpenAI-Codex-Modell wurde im März 2023 abgeschaltet (der Name gehört inzwischen einem neueren Coding-Agenten, den OpenAI 2025 vorgestellt hat), und Notion AI ist ein fertiges Produkt und keine Beta mit Warteliste mehr. ChatGPT ist nach wie vor eine praktische Möglichkeit, einen ersten Entwurf für Custom Code in Webflow zu bekommen, aber teste alles, was es dir liefert, auf der Staging-Seite, bevor du veröffentlichst.

ChatGPT ist ein leistungsstarkes Sprachmodell, das auf Basis eines Prompts oder Kontexts menschenähnlichen Text erzeugen kann und in den Monaten nach der Veröffentlichung Ende 2022 zum großen Hype wurde. Das bedeutet, dass Designerinnen und Designer mit ChatGPT Custom Code für ihre Webflow-Websites schreiben können, ohne programmieren zu können.

Um ChatGPT für Custom Code in Webflow zu nutzen, gibst du dem Modell eine klare und detaillierte Beschreibung der gewünschten Funktion. Wenn du zum Beispiel eine bestimmte Funktion mit JavaScript ergänzen möchtest, erklärst du ChatGPT, was sie tun soll und welche Anforderungen es gibt. Das Modell erzeugt dann den Code, den du direkt in den Webflow Designer kopieren und einfügen kannst. Da Milk Moon Studio ein kleines, auf Design fokussiertes Webflow-Studio ist, ist so ein Tool ausgesprochen praktisch.

Ein Vorteil von ChatGPT für Custom Code in Webflow ist, dass Designer ihren Websites schnell und einfach Funktionen hinzufügen können, ohne Zeit ins Programmierenlernen zu investieren oder dem schwer auffindbaren Code-Snippet nachzujagen, das irgendjemand irgendwo im Netz schon mal gebaut hat. Außerdem kann ChatGPT helfen, Zeit und Ressourcen zu sparen, indem es Code erzeugt, der effizient und auf die jeweilige Aufgabe optimiert ist.

Wichtig ist: Es ist nicht perfekt, und du bekommst nicht unbedingt beim ersten Versuch, was du brauchst. Deine Prompts an ChatGPT sind im Grunde ein Gespräch. ChatGPT merkt sich den Verlauf, und du kannst den Faden weiterspinnen, indem du erklärst, was nicht funktioniert, und ChatGPT immer wieder bittest, den Code zu verfeinern. Am Ende ist er vielleicht nicht perfekt, aber wir haben es erlebt, dass man damit sehr schnell an einen Punkt kommt, an dem man den Rest selbst erledigen kann, ohne zum Beispiel JavaScript tiefgehend zu verstehen. Erst neulich hat uns ChatGPT sehr komplexen Object-Intersection-Code für ein Projekt mit unzähligen Vimeo-Videos geschrieben und deren API hervorragend eingebunden. Es hat uns sogar vor einem Verstoß gegen die API-Nutzungsbedingungen gewarnt, als wir mit einem Prompt ein wenig übereifrig wurden.

Abgesehen vom Offensichtlichen ist es auch ein großer Zeitgewinn, der dich schneller ans Ziel bringt, als durch die Webflow-Foren zu wühlen und per Google das passende Code-Snippet zu suchen. Und denk daran: Du kannst ihm auch Code-Snippets zum Anpassen an deinen Anwendungsfall geben. Die Möglichkeiten sind endlos, und du lernst vielleicht nebenbei etwas.

ChatGPT-Prompts für Custom Code in Webflow

Wir haben ChatGPT sogar gebeten, eine Liste von Prompts zu erstellen, die ein Webflow-Nutzer als Beispiel verwenden könnte und die wir in diesen Beitrag aufnehmen können. Hier sind sie:

"Ich brauche eine JavaScript-Funktion, die beim Klick auf Links auf meiner Webflow-Website einen sanften Scroll-Effekt hinzufügt. Kannst du mir den Code dafür erzeugen?"
"Ich baue eine Landingpage mit einem Formular auf meiner Webflow-Website. Ich möchte die Formularfelder vor dem Absenden mit JavaScript validieren. Kannst du mir den Code dafür schreiben?"
"Ich habe eine Webflow-Website mit einer Bildergalerie. Ich möchte beim Anklicken der Bilder einen Lightbox-Effekt hinzufügen. Kannst du mir den JavaScript-Code dafür erzeugen?"
"Ich baue eine Webflow-Website mit einer fixierten Navigationsleiste. Sie soll auf Scroll-Ereignisse reagieren und die Farbe der Navbar ändern, sobald der Nutzer nach unten scrollt. Kannst du mir den JavaScript-Code dafür schreiben?"
"Ich möchte eine JavaScript-Funktion erstellen, die den Browser des Nutzers erkennt und eine Meldung anzeigt, wenn der Browser veraltet ist oder nicht unterstützt wird. Kannst du mir den Code dafür schreiben?"

Es ist vielleicht nicht die kreativste KI da draußen, aber bitte sehr: ein paar Dinge, von denen ChatGPT meint, dass wir Webflow-Nutzer sie gern fragen würden.

Diese Beispiele zeigen, wie Designer mit ChatGPT Custom Code für ihre Webflow-Websites erzeugen können, ohne programmieren zu müssen, indem sie dem Modell eine klare und detaillierte Beschreibung der gewünschten Funktion geben.

ChatGPT kann ein wertvolles Werkzeug für Webflow-Designer und -Expertinnen sein, die ihren Websites individuelle Funktionen hinzufügen müssen. Dank seiner Fähigkeit, auf Basis eines Kontexts oder Prompts zu programmieren, hilft ChatGPT Designern dabei, Custom Code für ihre Webflow-Websites mit wenig bis gar keinen Programmierkenntnissen zu schreiben. Das spart Zeit und Ressourcen und steigert die Effizienz der Designer und der Website.

Zum Schluss noch eine Anmerkung: In diesem Bereich wird es gerade heiß, denn Notion testet eine eigene KI-Beta, ebenfalls auf OpenAI-Basis, die ähnliche Funktionen bietet und ebenfalls Code schreiben kann. Die Zukunft von Low-Code-Entwicklung sieht rosig aus und eröffnet Webflow-Designern, die keine Lust haben, Programmieren zu lernen, neue Möglichkeiten, von Custom Code zu profitieren. Du kannst dich hier für die Warteliste der Notion-AI-Beta anmelden.

Wenn dich nur der Code interessiert und du die übrigen tollen Funktionen von ChatGPT nicht brauchst, probier doch OpenAIs Codex aus. Er wurde speziell dafür gebaut, bei Code zu helfen, und befindet sich ebenfalls in der Beta. Hier geht es zu OpenAI Codex. Ein kleines Geheimnis verraten wir dir noch: ChatGPT kann überlastet sein, und es wird gerade eine kostenpflichtige Pro-Version getestet. Wenn du Codex häufig nutzen willst, kannst du die Warteschlange einfach umgehen, indem du API-Guthaben kaufst.

Update: Wir haben mit einem individuellen Webflow-GPT herumexperimentiert. Probier ihn gern aus.

Weitere Tools, auf die wir uns verlassen, findest du in unserem Beitrag über kostenlose und kostenpflichtige Tools für kleine Designagenturen und Freelancer, in unseren unverzichtbaren Chrome-Erweiterungen für Webflow und in unserem Beitrag darüber, wie wir das von Webflows KI erzeugte Schema für eine Kundenwebsite geprüft haben.

Häufig gestellte Fragen

Kann ChatGPT Custom Code für Webflow schreiben?

Ja, es kann JavaScript, CSS und HTML schreiben, das du in ein Custom-Code-Embed oder in die Seiteneinstellungen von Webflow einfügst. Beschreibe, was du möchtest, nenne die beteiligten Webflow-Klassen oder -Elemente und teste das Ergebnis auf deiner Staging-Seite, bevor du veröffentlichst.

Was sind gute ChatGPT-Prompts für Webflow?

Die besten Prompts sind konkret in Bezug auf die Funktion, die beteiligten Elemente und mögliche Einschränkungen, wie die fünf Beispiele oben. Wenn die erste Antwort nicht passt, sag ChatGPT, was schiefgelaufen ist, und bitte es, den Code zu verfeinern.

Muss ich trotzdem programmieren können?

Nicht für den Einstieg, aber ein wenig Verständnis hilft dir zu erkennen, wenn der Code falsch ist. ChatGPT bringt dich den größten Teil des Weges, und den Rest perfektionierst du selbst.