Ein von KI unterstützter Arbeitsablauf zur Bereitstellung einer kleinen Website bei Cloudflare

Eine kleine Informationswebsite benötigt heute nicht mehr eine lange Entwicklungsphase. Dank eines KI-basierten Programmierassistenten, der einen Großteil der Implementierung übernimmt, kann eine Person von einer groben Idee bis hin zu Quellcode auf GitHub, automatischen Deploys über Cloudflare sowie einer eigenen Live-Domain in etwa einem halben Tag intensiver Arbeit gelangen. Der schwierige Teil verschiebt sich von der Code-Entwicklung hin zur Entscheidung darüber, was man möchte, sowie zur präzisen Rückmeldung zu dem Ergebnis. Dieser Leitfaden erläutert diesen Workflow Schritt für Schritt, enthält Prompt-Vorlagen, die man für die Phasen Design, Logo, Überprüfung und Iteration anpassen kann, und macht klar, ab wann dieser Ansatz nicht mehr geeignet ist.

Beginnen Sie mit dem Zweck, nicht mit einem Framework

Die natürliche erste Frage eines Entwicklers ist, welche Technologie-Stack zu verwenden ist: React, Next.js, ein statischer Site-Generator oder etwas anderes. Wenn eine KI-Assistentin den größten Teil der Implementierung erledigen kann, ist diese Frage weitaus weniger wichtig als eine einfachere: Was muss die Website eigentlich tun?

Für eine erste Version einer persönlichen oder Beratungswebsite kann die Antwort kurz sein. Besucher sollten verstehen, wofür die Website steht, in der Lage sein, ihre Artikel und Erkenntnisse zu finden, sowie wissen, wie sie Kontakt aufnehmen können. Das ist bereits ein vollständiger Umfang. Wenn man dies zunächst aufschreibt, gibt es sowohl für einen selbst als auch für das Modell eine klare Richtlinie für alle späteren Entscheidungen – außerdem verhindert das, dass die erste Veröffentlichung zu einem umfassenden Neuentwurfsprojekt wird.

Wenn man noch kein Konzept für das Design hat

Viele Menschen beginnen ohne eine Designspezifikation – und das ist in Ordnung. Anstelle von Mockups sollten Sie die gewünschte Erfahrung beschreiben: zum Beispiel professionell, modern, sauber, geräumig und technologieorientiert, ohne aus purer Futurismusliebe zu wirken. Der Assistent wandelt diese Beschreibung in einen ersten visuellen Entwurf um.

Sobald etwas auf dem Bildschirm zu sehen ist, wird das Feedback einfacher, denn Sie reagieren auf etwas Konkretes statt es sich nur vorzustellen:

• Das Logo passt nicht zur Marke.
• Das Bannerbild ist zugeschnitten.
• Ein Bereich wirkt überfüllt.
• Ein Teil der Seite sollte vorerst versteckt bleiben.

Eine Abfolge solcher Reaktionen ist der Designprozess. Sie benötigen kein Designvokabular, nur die Fähigkeit, zu erkennen, was falsch ist, und es auszudrücken.

Der Feedbackkreislauf ist wichtiger als die ursprüngliche Anfrage

Es gibt keinen einzigen perfekten Prompt. Die erste Ausgabe dient dazu, Ihnen etwas zu geben, auf das Sie reagieren können. Spätere Anweisungen werden immer genauer und konkreter: Das Logo korrigieren, den Bildschirmrand des Banners anpassen, unvollendete Abschnitte verbergen, Navigationspunkte umbenennen, die Links testen und das Mobile-Layout überprüfen.

Die Qualität entsteht durch viele kurze, spezifische Anfragen statt durch eine einzige umfangreiche Anfrage. Kurze Anfragen machen es außerdem einfacher, festzustellen, wenn das Modell etwas geändert hat, was Sie nicht verlangt haben.

Ein Master-Prompt für die erste Version

Ein nützlicher Einstiegsprompt beschreibt das Projekt und bittet das Modell anschließend, ein Design vorzuschlagen und zu begründen, bevor es Code generiert. Ein Muster kann folgende Teile enthalten:

• Der Name der Marke, des Unternehmens oder des Projekts.
• Der Zweck: Was die Website Ihnen ermöglichen soll.
• Die Zielgruppe: Für wen sie bestimmt ist.

Die zentrale Botschaft, die ein Besucher in den ersten 15 bis 20 Sekunden mitnehmen sollte.

Die visuelle Ausrichtung – beispielsweise professionell, minimalistisch, hochwertig, kreativ oder technologieorientiert – sowie ob Sie einen hellen, dunklen oder neutralen Hintergrund bevorzugen.

Grundlegende Erwartungen: saubere Typografie, ausreichend Freiraum, eine klare visuelle Hierarchie und ein Layout, das auf Mobilgeräten funktioniert.

Eine ehrliche Angabe, dass Sie noch keine Farben, Schriftarten oder Seitenstruktur ausgewählt haben.

Fragen Sie das Modell anschließend, basierend auf Zweck und Zielgruppe, Folgendes vorzuschlagen:

1. Eine Farbpalette.
2. Eine Typografie-Ausrichtung.
3. Eine Struktur für die Startseite.
4. Ein Konzept für den Hauptbereich.
5. Die Navigation.
6. Die empfohlenen Inhaltsteile.
7. Die Aufforderungen zur Handlung.
8. Der Gesamtvisuelle Stil.

Fertigen Sie damit ab, indem Sie es anweisen, das vorgeschlagene Design sowie die Gründe dafür zu erläutern, warum es zum Publikum passt, bevor Code geschrieben wird, und nur dann die erste funktionsfähige Version zu erstellen, wenn Sie diese Richtung genehmigt haben. Die Trennung von Vorschlag und Umsetzung ist der entscheidende Schritt: Es ist weitaus günstiger, eine Farbpalette in Textform abzulehnen, als sie aus dem generierten CSS wieder zu entfernen.

Betrachten Sie das Logo als eigenständige Aufgabe

Ein Logo muss auch außerhalb der Website funktionieren: in Social-Media-Profilen, Präsentationen und Dokumenten. Wenn es mit den Anweisungen für die Website vermischt wird, entsteht oft etwas, das nur für den Header optimiert ist – geben Sie daher der Markenbildung eine eigene Anfrage.

Bitten Sie um ein einfaches Logokonzept, das minimalistisch, zeitgemäß, professionell und einzigartig wirkt und auch in kleiner Größe noch erkennbar bleibt. Nennen Sie, wo es eingesetzt werden soll: Webseiten, Social-Media-Avatare, Präsentationen, Dokumente sowie auf hellen und dunklen Hintergründen. Beschreiben Sie kurz, welche Idee die Marke vertritt, und bitten Sie anschließend um:

1. Ein visuelles Konzept.
2. Eine Richtlinie für die Typografie.
3. Eine Farbpalette.
4. Eine Idee für ein Icon oder Monogramm.
5. Eine Version für helle Hintergründe.
6. Eine Version für dunkle Hintergründe.
7. Eine Erklärung, warum das Design zur Marke passt.

Fügen Sie eine ausdrückliche Einschränkung hinzu, um komplexe Illustrationen oder Symbole zu vermeiden, die auf feinen Details beruhen, da diese in der Größe eines Favicon verschwimmen.

Lassen Sie den Assistenten die Umsetzung übernehmen, während Sie sich auf das Ziel konzentrieren.

Sobald die Richtung festgelegt ist, kann ein Programmierassistent (ChatGPT und Codex, im Kontext dieses Workflows) den größten Teil der Umsetzung übernehmen. Der Vorteil ist, dass die Anweisungen auf dem Niveau dessen bleiben, was man erreichen möchte, anstatt darauf zu verweisen, welchen Datei- oder Zeileninhalt geändert werden soll:

• Der Banner wird in der Mitte geteilt.
• Kommentieren Sie diese Abschnitte vorerst aus.
• Ändern Sie den Namen dieser Schaltfläche.
• Lassen Sie diese Schaltfläche zur entsprechenden Ebene scrollen.
• Stellen Sie sicher, dass das Logo mit dem ursprünglichen Design übereinstimmt.

Auch wenn Sie weiterhin jedes Ergebnis überprüfen, müssen Sie nicht mehr für jede kleine Anpassung selbst im Codebasis navigieren.

Registrieren Sie die Domain frühzeitig und entwickeln Sie weiter lokal

Die Registrierung einer Domain ist schnell: Suchen, Verfügbarkeit prüfen, registrieren und bezahlen. Damit sie vollständig nutzbar ist, kann es länger dauern. Im hier beschriebenen Szenario vergingen etwa 24 Stunden, bis alles wie erwartet funktionierte; die Dauer des Wartens hängt vom Domainanbieter sowie von der DNS-Verbreitung ab.

Dieses Warten muss die Entwicklung nicht blockieren. Setzen Sie weiterhin mit einer lokalen Vorschau in einem engen Zyklus an: Ändern, vorzeigen, überprüfen, korrigieren, erneut testen. Die Arbeit lokal bedeutet außerdem, dass unvollendete Experimente niemals öffentlich zugänglich werden, und die Beschreibung von Änderungen auf höherer Ebene erspart Ihnen das Durchsuchen mehrerer Dateien, um einzelne Zeilen anzupassen.

Nutzen Sie das Modell als Überprüfer, nicht nur als Ersteller

Sobald die erste Version vorhanden ist, bitten Sie den Assistenten, sie zu bewerten. Die Anweisung für die Überprüfung sollte ihm eine Rolle zuweisen, ihn daran hindern, alles neu zu entwerfen, und eine priorisierte, handlungsorientierte Ausgabe fordern.

Bitten Sie ihn, als erfahrener UI- und UX-Designer einen Screenshot zu betrachten und ohne unnötige Neugestaltung die größten Verbesserungsmöglichkeiten zu identifizieren:

• Layout: Abstände, Ausrichtung und gesamtes visuelles Gleichgewicht.
• Hierarchie und Schriftarten: Wie klar der Blick geführt wird, Schriftauswahl und Lesbarkeit.
• Konstanz: Farben und Markenelemente auf der gesamten Seite.
• Responsivität auf kleineren Bildschirmen.
• Aktionsaufrufe: Ob jeder davon deutlich und klar formuliert ist.

Bitten Sie darum, dass die Erkenntnisse bewertet werden und jede davon angibt, was schwach erscheint, warum das wichtig ist und genau was geändert werden soll. Beschränken Sie dies dabei auf Änderungen, die die Professionalität und Benutzerfreundlichkeit erheblich verbessern. Dieser letzte Satz verhindert, dass die Überprüfung zu einer Liste kosmetischer Präferenzen wird.

Die Iteration ist der Ort, an dem die meiste Arbeit stattfindet

Nach der ursprünglichen Gestaltung beinhaltet die Arbeit nur sehr wenig Neuschöpfung. Fast alles dreht sich darum, das bereits Existierende zu verbessern, und kurze, präzise Anweisungen funktionieren hier am besten. Ein zuverlässiges Iterationsmuster sieht so aus:

• Eine nummerierte Liste der konkreten Änderungen, eine pro Zeile.
• Eine klare Anweisung, unverwandte Abschnitte nicht neu zu gestalten und alles beizubehalten, was bereits funktioniert.

Eine Überprüfungsliste, die das Modell nach den Änderungen ausführen muss: Überprüfen Sie die Desktop-Ansicht, die Mobile-Ansicht, stellen Sie sicher, dass die Navigationsschaltflächen funktionieren, überprüfen Sie, ob jede Schaltfläche zum richtigen Ziel führt, stellen Sie fest, dass nichts versehentlich versteckt oder abgeschnitten ist, und melden Sie alle weiteren Probleme, die es feststellt.

Die Anweisung zur Beibehaltung des ursprünglichen Zustands verdient besondere Betonung. Assistenten neigen dazu, beim Beheben Ihrer Anfragen den umliegenden Code zu „verbessern“, und eine explizite Einschränkung verringert diese Abweichungen. Die Selbstüberprüfungsliste ersetzt Ihre eigene Überprüfung nicht, aber sie erkennt offensichtliche Rückschritte bereits vor Ihrer Prüfung.

Von der lokalen Vorschau zu einer Live-Website mit GitHub und Cloudflare

Sobald die Website lokal funktioniert, pushen Sie ihre Quelldateien in ein GitHub-Repositorium. GitHub bietet Ihnen eine Versionshistorie sowie eine sichere Möglichkeit, alle von dem Assistenten vorgenommenen Änderungen rückgängig zu machen.

Danach muss dieser Repository mit Cloudflare verbunden werden, damit jeder Push in das Repository eine automatische Kompilierung und Bereitstellung auslöst. Ab diesem Zeitpunkt besteht die Veröffentlichung lediglich darin, einen Commit vorzunehmen und zu pushen. Für eine kleine Informationsseite reichte in diesem Szenario die kostenlose Stufe von Cloudflare aus; prüfen Sie die aktuellen Planlimits entsprechend Ihren Bedürfnissen.

Sobald die Domain aktiv ist und ihre DNS-Einträge konfiguriert sind, wird die benutzerdefinierte Domain dem bereitgestellten Projekt zugeordnet. Zu diesem Zeitpunkt zeigt das Eingeben der Domain in einem Browser die live Seite an.

Kosten und Einschränkungen

Für diese Art von Projekt sind die Betriebskosten gering:

• Domain-Registrierung: in diesem Fall etwa 12 US-Dollar pro Jahr.
• GitHub: kostenlos.
• Cloudflare: die kostenlose Stufe war ausreichend.
• KI-Tools: je nach Kosten Ihrer ChatGPT- oder anderer Assistenten-Abonnement.

Ausgenommen die Abonnementkosten für den Assistenten ist der Domainname im Grunde die einzige Infrastrukturkostenart.

Der Ansatz eignet sich nicht für jede Anwendung. Alles, was Zahlungen, sensible personenbezogene Daten, komplexe Authentifizierungsverfahren, Datenbanken oder regulierte Umgebungen betrifft, erfordert eine sorgfältige ingenieurtechnische Planung: Bedrohungsmodellierung, Code-Überprüfung durch jemanden, der jede Zeile versteht, Tests sowie Betriebsüberwachung. Für Portfolios, Landingpages, Beratungsseiten, Prototypen und einfache Inhaltsseiten ist jedoch die Einstiegshürde deutlich niedriger als früher.

Was der Assistent entscheidet und was nicht

Der Assistent übernimmt einen großen Teil der Ausführungsaufgaben: Er schreibt und bearbeitet Code, wandelt Designkritiken in Änderungen um, behebt visuelle Fehler und erklärt unbekannte technische Schritte. Mehrere Entscheidungen bleiben jedoch eindeutig menschlich zu treffen:

• Was die Website darstellen soll.

Welcher Inhalt wichtig ist.

Ob das visuelle Design richtig wirkt.

Wann die erste Version gut genug ist, um veröffentlicht zu werden.

Dadurch verschiebt sich das Engpassproblem. Die entscheidende Frage ist nicht mehr, ob man die Website technisch umsetzen kann, sondern ob man klar entscheiden kann, was man will. Die Implementierungsbarriere sinkt – das Bedürfnis nach Urteilsvermögen nicht.

Kernpunkte

• Definieren Sie Zweck, Zielgruppe und Kernbotschaft, bevor Sie eine Technologie wählen.
• Lassen Sie das Modell vor dem Schreiben von Code ein Design vorschlagen und begründen sowie die Richtung ausdrücklich genehmigen.
• Behandeln Sie das Logo getrennt, damit es in allen Medien funktioniert und nicht nur im Seitenheader.
• Verlassen Sie sich auf kurze, spezifische Iterationsrunden unter der Einschränkung, „alles andere beizubehalten“, sowie auf eine Selbstüberprüfungsliste.
• Nutzen Sie den Assistenten sowohl als Kritiker als auch als Hilfskraft mit priorisierten und umsetzbaren Rückmeldungen.
• Stellen Sie den Code auf GitHub hoch und lassen Sie Cloudflare bei jedem Push deployen, sodass Versionierung und Hosting automatisch ablaufen.
• Reservieren Sie diesen leichtgewichtigen Ansatz für Sites mit geringem Risiko. Der Wert liegt darin, wie die einzelnen Komponenten zu einem einzigen Workflow zusammenwirken: Sie behalten die Kontrolle über Zweck, Urteilsvermögen und Freigabe, der Assistent übernimmt die Ausführung, GitHub liefert die Historie und Cloudflare veröffentlicht den Inhalt.