Vom Pixel × zum Prompt.
Ein Designer, null Zeilen Web-Code — und eine Frage: Kann ich meine eigene Webseite so frei erstellen, wie ich auch ein Key-Visual?
18 Jahre Design. Aber Websites bauen hieß bisher: Agentur beauftragen — oder Baukasten-Kompromiss.
Fremdes Territorium
Key-Visuals, Motion, Kampagnen, sogar Skripte für InDesign und After Effects — alles eigenes Handwerk. Nur beim eigenen Auftritt war Schluss: fremdes Template, fremde Grenzen, fremder Web-Code. Für einen Media & Motion Designer ein seltsamer blinder Fleck.
Beschreiben statt programmieren
Vibecoding dreht die Rollen: Ich bleibe Art Director — Konzept, Look, Timing. Die KI (Claude) wird zur Produktion und erstellt den kompletten Code. Kein Editor, kein Tutorial-Marathon. Ein Dialog, wie mit einem sehr schnellen Team.
Sechs Stationen vom leeren Ordner zur Live-Site. Kein Zauber — ein Prozess.
-
Schritt 1 · Das Briefing
Alltagssprache statt Syntax
Ich beschreibe, was ich sehen will — wie einem Team: Stimmung, Referenz, Verhalten beim Scrollen. Claude übersetzt das in HTML, CSS und JavaScript. Aus Sprache wird Interface.
-
Schritt 2 · Die Iteration
Über 50 Feedback-Runden
Jede Änderung — Abstand, Timing, Dramaturgie — sitzt in Minuten statt in Tagen. Der Rhythmus ist der eines Gesprächs, nicht der eines Ticketsystems.
-
Schritt 3 · Die Effekte
Effekte auf Zuruf
Matrix-Spotlight, 3D-Marquee, Vortex: Referenz zeigen, Wirkung beschreiben — Claude baut den Effekt nativ nach. Ohne Plugin, ohne Template, exakt im Look dieser Seite.
-
Schritt 4 · Der Crash
Als das MacBook kapitulierte
Ehrlich: Diese Seite hat unterwegs ein MacBook zum Absturz gebracht — der GPU-Speicher lief voll. Gemeinsam diagnostiziert, gemessen, gefixt. Die Zahlen dazu stehen unten.
-
Schritt 5 · Das Handwerk
Design bleibt Designersache
Typografie, Raster, Timing, jede Entscheidung über Look und Dramaturgie: der Designer. Claude setzt um — präzise und unermüdlich. Die KI ersetzt kein Auge. Sie bietet ihm neue Möglichkeiten.
-
Schritt 6 · Der Output
Die Live-Site
Das Ergebnis liest du gerade: eine maßgeschneiderte Website mit Effekten, die kein Baukasten liefert — konzipiert, gebrieft und abgenommen von einem Designer.
Der Moment, in dem es kracht, gehört zu jedem echten Projekt. Hier war er messbar.
Absturz, Diagnose, Fix
Der 3D-Marquee hielt in einer frühen Version rund 970 MB Videotexturen gleichzeitig im GPU-Speicher — genug, um ein MacBook lahmzulegen. Wir haben das Lag gemeinsam eingekreist und die Texturlast auf einen Bruchteil reduziert. Danach die Radikalkur fürs Material: Galerie-Videos von 800 MB auf 217 MB komprimiert, das komplette Upload-Paket von 1,0 GB auf rund 470 MB — ohne sichtbaren Qualitätsverlust.
Am Ende steht keine Website von der Stange — und eine ehrliche Einordnung.
Kein Programmierer-Ersatz. Aber ein beachtliches Werkzeug.
Eine maßgeschneiderte Site mit Effekten, die kein Baukasten kann — gebaut im Dialog, Runde für Runde. Und trotzdem: Vibecoding ersetzt keinen Programmierer. Architektur, Security, produktionsreifer Code — das bleibt Profi-Sache. Als Werkzeug fürs Rapid Prototyping aber ist es beachtlich: vom Gedanken zum klickbaren Entwurf im Tempo eines Gesprächs. Die Grenze ist dabei nicht der Code, sondern die Klarheit der Vorstellung.