Die 7 Stufen des Webdesigns mit Claude Code

Der Sprecher erklärt, dass schlechtes KI-Design meist auf vage Nutzeranweisungen zurückzuführen ist und stellt die Roadmap der sieben Stufen vor. In Stufe 1 verlassen sich Nutzer nur auf einfache Text-Prompts, was zu extrem generischen Ergebnissen führt, die oft durch typische KI-Elemente wie lila Farbverläufe geprägt sind. Es wird betont, dass man hier grundlegende Fähigkeiten wie Design-Vokabular und das Verständnis von Tech-Stacks wie Next.js aufbauen muss. Der Plan-Modus von Claude Code hilft dabei, erste Design-Entscheidungen zu erzwingen, reicht aber für hochwertige Ergebnisse nicht aus. Ohne spezifische Vorgaben füllt die KI die Lücken mit Einheitsbrei, weshalb diese Stufe schnell überwunden werden muss.

In dieser Phase wird Claude Code durch externe Prompts und Plugins, wie den "UI UX Pro Max Skill", eine Art Design-Ausbildung verpasst. Diese Skills fungieren als Checklisten und Anweisungen, die verhindern, dass die KI typische Designfehler macht und stattdessen Prinzipien der Farblehre und Typografie anwendet. Die Installation erfolgt einfach über GitHub-Repositories oder den Plugin-Marketplace direkt im Terminal. Obwohl die Ergebnisse, wie das Fallbeispiel "Argus" zeigt, deutlich professioneller wirken, bleibt der Output dennoch erkennbar eine Vorlage. Der Sprecher weist darauf hin, dass man hier lernt, Kritik an KI-Designs zu üben, aber oft noch an der sprachlichen Ausdrucksfähigkeit scheitert.

Um die Grenzen von reinem Text zu sprengen, wird der Nutzer in Stufe 3 zum Visual Director, der Claude Code mit echten Screenshots füttert. Inspirationsquellen wie Awwwards, Pinterest und Dribbble werden empfohlen, um zu sehen, wie echte Profis Webseiten gestalten. Durch das Hochladen von Bildern kann die KI den Stil viel besser imitieren, als es eine reine Beschreibung jemals könnte. Dennoch entsteht hier oft die sogenannte "Vibe-Lücke", da bei der Übersetzung von Bild zu Code Informationen verloren gehen. Der Sprecher betont, dass man auf dieser Stufe oft in unendlichen Iterationsschleifen stecken bleibt, ohne die Perfektion der Vorlage ganz zu erreichen.

Stufe 4 markiert den Übergang zum tieferen Verständnis, indem man lernt, den zugrunde liegenden Code (HTML, CSS, JS) von Vorbild-Websites zu analysieren. Der Sprecher demonstriert, wie man mit Strg+U den Quellcode extrahiert und diesen zusammen mit einem speziellen "Site-Teardown-Skill" in Claude Code einspeist. Dieser Prozess dient nicht dem Plagiat, sondern dem Lernen von Profi-Techniken wie komplexen Scroll-Animationen oder Hintergrundeffekten. Claude Code agiert hier als Lehrer, der die technischen Details erklärt und zeigt, wie man diese in das eigene Projekt integriert. Dadurch wird die "Klon-Obergrenze" durchbrochen, da der Nutzer nun versteht, wie bestimmte visuelle Effekte technisch realisiert werden.

Auf der fünften Stufe beginnt die echte Kreativität durch die Integration eigener Assets und hochwertiger Komponenten von Plattformen wie 21st.dev. Der Sprecher zeigt, wie man mit KI-Bildgeneratoren wie Midjourney einzigartige Hintergrundbilder erstellt, die ein visuelles Storytelling für die Marke ermöglichen. Für die App "Argus" wird ein Slogan entwickelt und ein dazu passendes Bild in eine subtile 15-sekündige Video-Animation umgewandelt. Es wird erklärt, wie man durch den gezielten Einsatz von Videos für Desktop und statischen Bildern für Mobile die Performance optimiert. Dieser Schritt verwandelt die Webseite von einem Template in ein originelles, charakterstarkes digitales Produkt.

In Stufe 6 verlassen Nutzer das Terminal und nutzen visuelle Editoren wie Google Stitch, Figma oder paper.design zur Feinabstimmung. Diese Tools ermöglichen eine schnellere Ideenfindung für Layouts und Farbschemata, die anschließend zurück in Claude Code implementiert werden. Der Sprecher verfeinert das Design von "Argus" durch Details wie Glassmorphism-Effekte, Lade-Animationen und individuelle Schriftarten von Google Fonts. Kleine Details wie animierte Zähler oder Lichteffekte auf Texten verleihen der Seite ein hochwertiges Gefühl von "professionellem Stolz". Der Prozess ist nun hochgradig iterativ und nutzt die KI als Recherche-Tool für Best Practices, während der Nutzer die volle kreative Kontrolle behält.

Die letzte Stufe umfasst High-End-Webdesign mit WebGL, Shadern und 3D-Erlebnissen, wie sie auf preisgekrönten Seiten wie "Igloo" zu sehen sind. Der Sprecher gesteht ein, dass dieses Level im März 2026 noch jenseits der Möglichkeiten von Einzelnutzern mit KI liegt und spezialisierte Expertenteams erfordert. Dennoch dient es als Inspiration dafür, was technisch möglich ist und wohin sich die Reise in Zukunft entwickeln könnte. Abschließend wird zusammengefasst, dass der Erfolg im Webdesign mit Claude Code darauf basiert, den eigenen Geschmack artikulieren zu lernen und die Sprachbarriere zum Tool zu überwinden. Der Weg vom KI-Einheitsbrei zum individuellen Design erfordert Zeit, Übung und die richtige Roadmap.