Re-Design mit Windsurf

Website Re-Design mit Hugo und KI

Diese Website wurde auf Basis einer Designgrundlage erstellt, die zu 90% KI-generiert ist. Um einen belastbaren Test für die Praxis anzustreben, habe ich mich für das Re-Design der eigenen Website entschieden, um von Anfang bis Ende meine eigenen Vorstellungen, technischen Anforderungen und praktischen Abläufe gegen die KI-Interaktion zu halten.

1. Designvorstufe

In einem ersten Schritt habe ich in einem ‘Meta-Repository’ ein Projekt zur Erstellung vieler Design-Entwürfe erstellt. In diesem Projekt (als Vorstufe zu der späteren Entwicklung einer Website) habe ich verschiedene Design-Entwürfe generieren lassen und entsprechende Instruktionen zur Vereinheitlichung der Ansätze (bzgl. des Vorgehens und der Dokumentation, Technik etc.) hinterlegt. Auf diese Weise konnten in extrem kurzer Zeit unterschiedlichste Designs generiert und in konsistenter / systematischer Weise sortiert, dokumentiert und reviewed werden.

In dieser Phase war für mich ausreichend, dass die Entwürfe HTML-5 basiert sind, was die technische Realisierung betrifft. Um innerhalb eines jeden Designentwurfs eine stimmige Richtung vorzugeben, habe ich diverse qualitative und instruktionsbasierte Vorgaben ins Spiel gebracht. Ein Beispiel ist, dass sich die Entwürfe jeweils an Designparametern orientieren sollten, die aus einem konzeptuellen und ästhetischen Fundus basierten. Dieser Fundus beinhaltet etwa Parameter wie ‘industrial design, minimalistic, brutalist aesthetics, big fonts, hard contrasts, triadic color scheme’, um den visuellen Spielraum je Entwurf einzugrenzen. Für jedes neue Design konnte sich die KI (~ ‘die KI’ als Abkürzung für den Ansatz, der bei Windsurf zum Einsatz kommt) nach eigenem Ermessen bedienen.

Um nun einen neuen Entwurf (als vollständiges Projekt in einem Unterordner) zu erstellen, habe ich nur noch eine Anweisung absetzen müssen, die jeweils auf die Instruktionen als Kontext referenziert und vielleicht spezifische Wünsche und relevante Details zum Anwendungsfall beinhaltet.

Ein Entwurf (‘design_008’) hat mich interessiert, so dass ich beschlossen habe diesen in eine weitere Iteration zu bringen.

2. HTML-5 zu Hugo Template migrieren

Auf der Grundlage des Entwurfs (und einigen manuellen Korrekturen und Ergänzungen meinerseits) habe ich danach die KI angewiesen, diesen in ein Hugo-Template zu überführen. Hugo Templates bzw. Hugo Projekte erfordern einen bestimmten strukturellen Aufbau und zielen darauf ab, template-basierte Komponenten und Layouts für die spätere Go-basierte Generierung statischer Websites zu verwenden. Hierbei werden Daten, statische Inhalte, Styles und Skripte und logisch-semantische Strukturen mehr oder minder separat verwaltet. Dieser Ansatz wird von vielen Projekten verwendet und hat viele Vorteile, wenn es um SEO, Performanz, Sicherheit und viele weitere Aspekte an Webseiten betrifft.

Damit die KI wirklich diesen Schritt (der Überführung einer einfachen HTML-Seite in ein komplexeres Hugo Gerüst) vernünftig hinbekommt, habe ich diese zunächst einige Pläne anstellen und entwickeln lassen.

Markdown eignet sich nicht nur für Hugo perfekt, sondern auch für die Interaktion mit Sprachmodellen (LLM) und mich. Die Planung und iterative Reflektion erfolgte also flankiert durch eine von der KI gepflegte und mir korrigierte Markdown-Planung.

Auf diese Weise ist iterativ eine hinreichend solide Ausgangsbasis entstanden und aus dem ursprünglichen Designentwurf in HTML-5 ist ein komplexes Hugo-Template entstanden.

3. Manuelle (AI augmented) Anpassung

Von hier an habe ich einen regulären Entwicklungsprozess weitergemacht und das Projekt in einem git-Repository Schritt für Schritt angepasst, erweitert oder korrigiert. Die KI habe ich durchaus hin und wieder für bestimmte Aufgaben herangezogen, etwa für den Entwurf einer neuen Komponente, die zu dem bisherigen Ansatz und Design passt. Oder natürlich für Fleissaufgaben, zu denen ich keine Lust hatte, aber auch keine Gefahr sah. In einer gut durchdachten Struktur und auf Basis grundlegender Dokumentationen ist die Arbeit mit KI häufig effizient.

Es gibt aber auch Fallstricke und Nachteile. Fallstricke und Benefits sind später noch einmal aufgezeigt.

Zusammenfassung

In diesem Projekt wurde ein reales Beispiel herangezogen, das Re-Design der conceptMonkey Website, um reale und praxisnahe Aspekte einzubeziehen. Dies betrifft auch Themen wie Pflegbarkeit, SEO, Sicherheit, Performance etc. und andere Aspekte wie Design, inhaltliche Struktur.

Es wurden im Zuge dieses Projektes folgende Fragestellungen beantwortet:

a) Wie kann man mit KI experimentelle Designs systematisch generieren?

Gewählter Ansatz (zu a):

• Aufbau eines ‘Meta-Repositories’ für die Entwicklung und Verwaltung von Designs
• Fokus der Experimente war die Generierung von HTML-5 Designs / Reduktion der technischen Komplexität
• Optimierung von Instruktionsset und Dokumentation für die KI, dazu zahlen auch qualitative Faktoren und Anwendungsfälle
• Feedback auf Basis der Iterationen durch KI und Menschen innerhalb des Meta-Repositories erlaubt eine kontinuierliche Verbesserung der globalen Design-Anforderungen
• Verwendung von KI für die Generierung von Test-Inhalten (Text, Bild, Icons etc.) erlaubte eine bessere Testbarkeit für reale Einsätze

b) Kann man KI praktisch für komplexere Webprojekte nutzen?

Gewählter Ansatz (zu b):

• Portierung in wiederverwendbaren, Hugo-konformen Code (~ Hugo Theme) ausgehend von einem gewählten HTML-5 Design
• Planung von Portierungsschritten via Markdown, Defintion des komponentenbasierten Layouts und Implementierungspräferenzen in Hugo
• Inhaltliche Systematik und Dokumentation, etwa zur Definition von ‘content’ Typen, Datenstrukturen etc.
• Arbeit in einem neuen für die manuelle Bearbeitung losgelösten git repositories
  • Erstellung / Bereitstellung aller hierfür nötigen Dateien (Config, Assets, gitignore etc.)
  • Ausgiebige ‘Projektdokumentation’ in /docs (von Hugo ignoriert!), in der dann agents und ich Arbeitsstände protokollieren oder Entscheidungen festhalten
• Optimierung von Instruktionssets für das neue ‘DEV-Projekt’ in einem Windsurf-Workspace
• Systematische Herangehensweise: Bsp. durch eine Komponenten-Ansicht zu Testzwecken, reverse-generierte Style-Guides etc.

c) Welche allgemeinen Ableitungen entstehen?

Zunächst konnten mit dem Projekt weitere Erfahrungen hinsichtlich der Systematik bei der Arbeit mit KI-basierten IDEs gewonnen werden. Viele Beobachten sind dabei nicht überraschend, andere waren unerwartet.

Eine Beurteilung ist in den folgenden Abschnitten zusammengefasst.

Beurteilung / Recap

Das Projekt hat gut funktioniert, hier sind einige Highlights:

1. Der Testballon demonstriert einen vollständigen end-to-end Ansatz des KI-Potenzials im Bereich Webentwicklung
2. Potentiale für den Evaluationssprozess von experimentellen Designideen entstehen, wenn ein systematischer Ansatz gewählt wird
3. Durch die Generierung von wiederverwendbaren Assets (etwa generative Icon-Sets oder Mouse-Animationen etc.) enstehen interessante Möglichkeiten
4. Die Reduktion von Komplexität für schnelle Design-Iterationen zahlt sich aus. Wichtig ist es einen Ansatz für qualitative Parameter zu entwickeln, damit Designs gut werden.
5. Bei der Portierung von weniger komplexen in komplexere Projekte enstehen interessante Potentiale, aber man muss hier eigene Erfahrung einbringen und sollte auch hierbei eine Systematik entwickeln. In diesem Projekt konnte ein sauber generiertes HTML-5 Design relativ erfolgreich in ein HUGO-Theme /-Projekt überführt werden.
6. Kosten- und Nutzeneffekte sollten für verschiedene Einsatzbereiche in Zukunft weiter verglichen werden, denn manches hatte man ‘ohne generative KI’ vielleicht aufgrund des Aufwandes einfach nicht getan. Es enstehen neue Potentiale, die untersucht werden sollten. Diese Potentiale erscheinen mir interessanter zu sein als der Ersatz des Menschen durch KI in der Entwicklung. Die Frage ist also vor allem für mich - wie kann KI den Entwicklungsprozess im Sinne des Potentials erweitern.
7. Markdown ist wertvoll bei der Arbeit mit LLMs. Es wird eventuell eine zunehmend große Rolle in der Entwicklung spielen, da es sich auch hervorragend für RAGs etc. eignet.
8. Versionierungssysteme wie Git sollten man auf jeden Fall nutzen, um bei der Kollaboration mit KI halbwegs kontrolliert zu iterieren. Auch der strukturelle Aufbau von Repositories ist wichtig für die Ausrichtung und den Komfort im Projekt.

Bewertung: Einsatz von KI bei Webentwicklung

Negativ / Risiken

• (LLM / agentic) KI ist noch nicht in der Lage, die Summe der Anforderungen, die holistische IST-Implementierung und alle nötigen Kontextinformationen präsent zu haben. Daher kann sie eine Problemstellung nicht immer in systematische und nachhaltige Aktionen überführen. Kontext-Limitierungen muss man behandeln.
• Änderungen an einer Stelle im Code erfordern in der Realität oft die Anpassung anderer Teile der Codebasis. KI ist hierbei noch nicht immer umsichtig genug, um alle Abhängigkeiten sicher zu überblicken. Insbesondere bei komplexeren Projekten. Dies kann zu lückenhaften Implementierungen und somit Fehlern oder auch redundantem Code fürhren. Man muss sich hierfür aktuell noch viele Workarounds und Tricks einfallen lassen, um qualitativ angemessene Ergebnisse zu erzielen. Testen und Codereviews sind immer angesagt.
• Separation of concerns: Wo genau Daten oder Metadaten auftreten, welche Anteile Template-Aufgaben erfüllen oder wie eine semantische Struktur von Inhalten passend zu dem Projekt aufgebaut sein sollte - all das kann die KI nicht immer direkt wissen oder konsistent über die Entwicklungszeit durchhalten. Es kommt somit immer wieder zu Fehlinterpretationen, und Inkonsistenzen. Auch hierfür sind viele Kontrollen nötig.
• Generell: die KI schaut meist noch durch ein Schlüsselloch und achtet nicht auf eine gesamte Performanz (z.B. wie sich Animationen / Effekten auf die clientseitige Renderingzeit auswirken). LLM basierte Agents schreiben noch zu oft redundanten Code, unterliegen Fehlannahmen oder interpretieren Anforderungen nicht korrekt. KI ersetzt deshalb noch keinen Architekten oder Senior Entwickler. Deshalb gilt: Man sollte bei der Arbeit mit KI systematisch vorgehen, generierten Code immer prüfen, versioniert arbeiten und stets vom Schlimmsten ausgehen.

Positiv / Benefits

• Für das experimentelle Erzeugen von Design-Entwürfen, neuartigen Komponenten und verrückten Ideen ist KI durchaus ein genialer Sparringspartner. Denn die manuelle ‘klassische’ Fleissarbeit steht nicht immer in einem vernünftigen Kosten- / Nutzen-Verhältnis, wenn man mal drauflos testen will. KI kann also in diesem Falle extrem nützlich dabei sein, Aufwände für experimentelle Arbeit zu reduzieren. Dies öffnet einen neuen Raum für codebasierte Ideenfindung und explorative Lösungsskizzen.
• Die Arbeit mit Markdown funktioniert perfekt mit KI. Auch Hugo-Inhalte verwenden Markdown, wodurch in diesem Projekt zwei Fliegen mit einer Klappe geschlagen wurden. Testinhalte können schnell erstellt werden, um ein besseres Bild von Designs oder Komponenten zu erhalten. Insbesondere die Prüfung visueller Layoutanteile mit realen Texten, die nicht allein das immer selbe Lorem Ipsum sind, begünstigt den Prozess der Meinungsbildung.
• Ein systematischer Ansatz mit KI zahlt sich bei der Iteration über viele Design-Entwürfe hinweg aus. Im vorgestellten Ansatz wurden neue Designs ’nur noch’ auf der Grundlage eines Prompts erstellt. Grundlegende Aspekte wurden bereits über Instruktionen systematisiert und ein neues Design fügte sich nahtlos in ein dafür konzipiertes ‘Meta-Projekt’ ein. Dies macht letztlich die Generierung von Website-Ideen extremst effizient. Für frühe Phasen im Entwicklungsprozess kann dies dabei helfen, Kundenanforderungen oder Anwendungsfälle besser zu verstehen oder Lösungsräume zu besprechen.
• Interessant sind manche Kleinigkeiten, über die ich bei der Arbeit mit KI gestolpert bin. Beispiel: Ein tpyisches Problem ist etwa die Wahl geeigneter symbolischer Bildsprachen bzw. konkreter auch die Wahl von Icons / Iconsets. Passend zu dem jeweiligen Design-Entwurf habe ich mir im Zuge dieses Projektes komplette Icon-Sets systematisch als SVGs / Icon-Komponenten generieren lassen. D.h. die Limitierung lag hier nur um Bereich der Phantasie. Beispiel: Genauso verhält es sich mit netten Effekten. Wer genau hinsieht, wird manch einen visuellen Effekt im vorliegenden Design entdecken. Diese wurden zu 100% KI-generiert und in Iterationen verfeinert. Ich hätte diese ganz sicher nicht ähnlich schnell realisieren können.

Wrap-Up

• Viele Vorteile bestehen vor allem im Bereich Geschwindigkeit. Inhaltliche Vorteile und neue Benefits müssen systematisch erschlossen werden und bedingen daher auch Erfahrung bei der Arbeit mit KI.
  • Die Barrieren (Kosten / Aufwand) für experimentelle Arbeiten sinken durch den Einsatz generativer KI-Tools massiv. Auf diese Weise kann man profitieren, z.B. um im Vorfeld zu den eigentlichen Umsetzungsaufgaben verschiedenste Inspirationen oder Varianten durchzuspielen. Hier sehe ich neue Spielräume, da mehr Varianten und Konzepte in der selben Zeit erzeugt und dann verglichen werden können.
• Nachteile und Risiken existieren. Für diese müssen geeignete Lösungen gefunden werden.
  • Für komplexe Implementierungsaufgaben ist KI heute noch zu limitiert. Es können erstaunliche Ergebnisse erzeugt werden, aber es ist definitiv Vorsicht geboten! KI macht Fehler, findet nicht immer die beste Lösung eines Problems und ist vergesslich. Auch wenn immer mehr Code als Kontext behandelt werden kann, bleibt der Agentic KI das Große und Ganze doch noch oft verschlossen. Erfahrung in der Arbeit mit Code und KI helfen. Auch ein projektspezifischer und systematischer Ansatz helfen dabei, bessere Ergebnisse zu erzeugen. Codereviews, Tests und technische Kompetenz sind allerdings noch unumgänglich. Von Sicherheitsbedenken oder DSGVO möchte ich nun gar nicht erst anfangen.
• Projektergebnis: Man kann aktuelle generative KI-Tools durchaus gut für (einfache) reale Websiteprojekte auf Basis von Designexperimenten zu realisieren. Die vorliegende Website ist ein Beweis für dafür. Es wurde ein Design generiert und in eine komplexere Technik portiert, dann in Kollaboration mit KI fertiggestellt. Die Auseinandersetzung mit Code-Generierung lohnt sich auch, um die interessante Einsatzpotentiale zu identifizieren, die über eine schnöde ‘Hilfe am Code’ hinausgehen.

Ausblicke

• Sinnvoll ist eine systematische Qualitätskontrolle im Kontext aller wichtigen Prozessschritte
• Es kommt nur Gutes dabei heraus, wenn kreative menschliche Potentiale mit der Effizienz von KI sinnvoll verbunden werden. Hier liegt sicher eine Hauptaufgabe der Zukunft.
• Optimierung des Gesamtprozesses ist an vielen Stellen möglich, von zusätzlichen Effizienzgewinnen, bis hin zu besserer KI-Kontrolle
• Vergleichende Analyse verschiedener Vorgehensweisen und Technologien: ich habe bereits weitere Test-Projekte mit anderen technologischen Grundlagen gestartet, um ein besseres Bild zu erhalten, z.B. den Aufbau einer komplexeren SaaS-Anwendung auf Nuxt-Basis.
• Der Vergleich verschiedener KI-Tools und LLMs (self-hosted oder nicht) ist natürlich wichtig, um die geeigneten Werzeuge für Aufgaben zu wählen. Verschiedene Faktoren und Rahmenbedingungen sind hierbei entscheidend, etwa Datenschutz und Sicherheit, aber auch Performanz, Hardware, Qualität. Jedes Werkzeug bietet Vor- und Nachteile, die LLM-Modelle sind unterschiedlich gut. Deshalb muss letztlich eine höhere Kompetenz aufgebaut werden, was die Auswahl der geeigneten Werzeuge und Methoden im Spezielleren mittelfristig betrifft.
• Eine Kosten- und Nutzenanalyse für den Einsatz von KI unter Berücksichtigung (projekt-) spezifischer Parameter ist sinnvoll, um relevante Anwendungsfälle bzw. Sweetspots zu finden. Etwa hat sich für mich der lohnenswerte Einsatz bei der Erzeugung von initialen Design-Varianten ergeben, da diese zuvor zu aufwändig gewesen wären. Spannend bleibt für mich im Weiteren, wie sich der Einsatz von KI auf die Produktentwicklung sowie Software- und Anwendungsentwicklung im Spezielleren mittelfristig auswirkt. Auch hierbei mache ich Experimente und halte natürlich auf dem Laufenden.