Website Design: Die Zweite

Vor ein paar Tagen habe ich begonnen, meine Website neu zu gestalten. Da ich dafür die großartige Software Publii verwende, bedeutet das in der Praxis, dass ich ein neues Theme installiere sowie benutzerdefinierten CSS- und Javascript-Code schreibe. Letztendlich blieb es aber nicht nur dabei, sondern ich musste auch einige der Theme-Templates selbst bearbeiten.

Das klingt zunächst einmal ziemlich einfach. Aber nur auf den ersten Blick!
Ich bin seit 30 Jahren Softwareentwickler, aber eben hauptsächlich für macOS und iOS. Ich kann Objective-C, Swift und SwiftUI recht gut, aber wenn es um Webentwicklung geht, bin ich ein echter Noob!

Sag niemals "Nie" zu KI

Also beschloss ich, etwas auszuprobieren, was ich noch nie zuvor versucht hatte. Ich griff zum nächstbesten LLM – genauer gesagt ClaudeAI – und schrieb ihm, worum es ging. Dann zeigte ich ihm ein paar Screenshots vom aktuellen Stand der Website mit dem neuen Theme und dessen main.css und erklärte ihm, was ich wollte und wie ich es wollte. Alles in kleinen Häppchen, damit der Prompt nicht zu komplex wurde.

Und zu meiner Überraschung hat das wirklich sehr gut funktioniert. Oft habe ich aber auch selbst Hand angelegt. Ich hab mir die Developer-Tools des Browser geöffnet, bin die ganzen Tags durchgegangen und hab so lange dran herum geschraubt, bis es passte. Dann hab ich von den Stellen in den Developer-Tools des Browser grossflächig einen Screenshot erstellt, diesen in den ClaudeAI Chat gekübelt und gesagt: "Gib mir den CSS Code aus dem Bild." Diesen habe ich dann einfach an den Custom CSS Code in Publii angehängt. Wenn ein Part aus meiner Sicht optisch soweit fertig war, hab ich den ganzen CSS Code wieder aus Publii kopiert, und ihn mit einem Prompt ClaudeAI vor die Füße geworfen:

Joa, und das hat es dann auch gemacht. Und zwar sehr gut sogar! Claude hat mir sehr genau beschrieben, was es gemacht hat und warum. Es hat mir den Code dokumentiert und auch hier an manchen Stellen als Kommentar hinten dran geschrieben, warum es diesen Code gibt und was er macht. Das hat mir gefallen.

Das Einzige was an Claude wirklich nervt ist, dass man sehr schnell an sein "Nutzungslimit" kommt. Und das obwohl ich einen "Pro-Plan" nutze, der mich immerhin um die 20 Euro pro Monat kostet! So passiert es immer wieder dass er eine Anfrage fertig bearbeitet, und dann mittendrin einfach aufhört, weil... ja eben weil Nutzungslimit und so. 😤

Dieser Umstand hat mich dazu gebracht, zwischendurch mal die Fronten zu wechseln, und Google Gemini auszuprobieren. Das ist in Sachen Programmieren ähnlich gut wie Claude mit dem Model "Opus 4.0", aber hat ein wesentlich größer ausgelegtes Limit! Es kommt mir in der Code-Generierung/-Ausgabe auch etwas schneller vor als Claude.

Eine Sache möchte ich noch erwähnen. Publii bietet einem die Möglichkeit in den Themes auch diverse Fonts auszuwählen. Das ist dummerweise ein einfaches Popup-Menü, in dem die Namen der Fonts stehen. Nicht wirklich hilfreich, weil man nicht sofort erkennt, wie der Font schlussendlich aussieht. Also, Screenshot von dieser Liste erstellt:

Und Claude gesagt:

Was er mir dann im Canvas nebenan gebaut hat, hat mich dann doch etwas überrascht:

3D Viewer

Ein weiteres Feature, was ich unbedingt implementiert haben wollte, ist die Darstellung von interaktiven 3D Modellen. Der Hersteller meiner 3D Software, Shapr3D, hatte in seinem Web-Viewer mal die Möglichkeit, einen Embed-Code zu erhalten, den man dann in seine Website einbinden konnte. Diese Möglichkeit gibt es inzwischen leider nicht mehr. Also brauchte ich eine Lösung für das Problem.

Claude hat mir den Model-Viewer vorgeschlagen, den ich bis dahin nicht kannte. Die Implementierung ist denkbar einfach. Es gibt nur ein kleines HTML-Code Snippet an entsprechender Stelle der Website einzubinden, ein Parameter anzupassen, und fertig ist das Ganze. So schaut das dann aus:

<div id="model-viewer-container">
    <model-viewer 
        id="model-viewer-main"
        src="/media/files/picture-cards.glb"
        alt="Pixel Art Cards with Magnets"
        camera-controls
        auto-rotate
        shadow-intensity="1">
    </model-viewer>
</div>

Fazit

Hab ich was vergessen? So als reiner Helfer für gezielte Tasks ist Vibe-Coding, oder einfach nur die Unterstützung durch ein LLM schon eine feine Sache. Sie ist bei weitem nicht perfekt! Es ist ratsam wirklich alles zu kontrollieren und zu reviewen. Manchmal unterschlägt es in seinen Optimierungen einfach Dinge, die vorher noch da waren, oder es behauptet etwas getan zu haben, was sich beim zweiten Hinschauen als glatte Lüge herausstellt.

Anyways... wie ich eingangs erwähnte, bin ich ein echter Web-Dev Noob! Und ohne die Hilfe des LLM hätte ich all das, was ich gemacht habe, wohl eher nicht geschafft, oder hätte eher Wochen dafür gebraucht, anstatt nur 2-3 Tage.

Was meint ihr dazu?