İçeriğe geç / Skip to content / Zum Inhalt

Was ist Claude Design? Sieben Stufen des KI-Designs

Ahmet Balaman

Zuletzt aktualisiert:

10 Min. Lesezeit

Vibe CodingClaude DesignKI-DesignDesignsystemUI-DesignSupabase
Was ist Claude Design? Sieben Stufen des KI-Designs

Wer der KI sagt „Entwirf mir eine schöne Website“, bekommt immer dasselbe: violetter Farbverlauf, zentrierte Überschrift, dreispaltiger Feature-Block. Das Problem ist nicht das Unvermögen des Modells, sondern dass Ihre Eingabe genauso aussieht wie die von allen anderen. In diesem Artikel gehe ich Claude Design in sieben Stufen durch — was Sie auf jeder Stufe bekommen, welcher Fehler Sie dort festhält und was Sie tun müssen, um eine Stufe höher zu kommen.

Das Sieben-Stufen-Modell stammt aus dem Video Every Level of Claude Design Explained von Jack Roberts. Dieser Artikel fasst es zusammen und erweitert es; die Empfehlungen zur Stufenwahl, die typischen Fehler und die verlinkten Artikel sind Ergänzungen dieses Beitrags.

Was ist Claude Design?

Claude Design ist der Design-Arbeitsbereich innerhalb von Claude. Statt im Chatfenster Code anzufordern und sich das Ergebnis im Kopf vorzustellen, bekommen Sie eine Oberfläche, in der Sie das Design direkt sehen und darüber sprechen können. Website, Interface-Entwurf, Poster, Präsentation, HTML-E-Mail, Motion Graphics — all das entsteht an derselben Stelle.

Die sieben Stufen des KI-gestützten Designs als Balken mit stetig wachsendem Umfang

Die entscheidende Eigenschaft ist diese: Claude Design kann ein Designsystem erstellen und jede weitere Produktion an dieses System anpassen. Alle folgenden Stufen drehen sich um diese eine Idee.

Stufe 1: Anschließen und loslegen

Auf dieser Stufe geben Sie dem Werkzeug eine Anfrage aus einem Satz: „Entwirf einen Interface-Entwurf für eine Marke, die Teddybären verkauft.“ Das Werkzeug stellt ein paar Rückfragen (Zielgruppe, Desktop oder mobil, Markenname) und erzeugt dann ein Ergebnis.

Das Ergebnis ist nicht schlecht, aber es hat keinen Charakter. Und es ist wichtig, den Fehler dahinter zu erkennen: Jeder, der dasselbe System und denselben Prompt benutzt, bekommt dieselbe Ausgabe. Wenn Sie keine Schärfe vorgeben, ist ein generisches Ergebnis genau das, was zu erwarten ist. Die Merkmale, an denen man eine generische Ausgabe erkennt, habe ich einzeln in Was ist AI Slop gesammelt.

Unterschätzen Sie diese Stufe trotzdem nicht. Wie im Video betont wird, haben manche der einfachen Präsentationsseiten, die auf Freelance-Plattformen für einige Hundert Dollar verkauft werden, ungefähr diese Qualität. Schon Stufe 1 kann Zeit und Geld sparen.

Um eine Stufe höher zu kommen: Akzeptieren Sie, dass die Ausgabe generisch ist, weil die Eingabe es ist.

Stufe 2: Ein Briefing geben wie ein Art Director

Auf dieser Stufe ändern sich zwei Dinge: Sie geben eine Referenz vor, und Sie hören nicht nach dem ersten Durchgang auf.

Referenz heißt: Sie machen einen Screenshot von einem Design, das Ihnen gefällt, und sagen „Nimm das als Referenz“. Seiten wie Pinterest, Awwwards, Mobbin, Godly oder Land-book sind dafür wie gemacht. Der Unterschied ist nicht klein: Im Video wird dieselbe Anfrage einmal mit und einmal ohne Referenz nebeneinandergestellt, und die beiden Ergebnisse sehen nicht so aus, als kämen sie aus demselben Werkzeug.

Der zweite Teil ist die Iteration. Statt die erste Ausgabe zu akzeptieren, gehen Sie darüber: „Wenn ein Button ausgewählt wird, soll Konfetti erscheinen“, „Jeder Bildschirm bekommt oben ein anders gefärbtes Band“, „Erhöhe den Kontrast zwischen Schwarz und Blau“. Fünf bis zehn Runden sind ganz normal.

Die Regel dieser Stufe lautet: Versuchen Sie nicht, alles in einem Zug fertigzustellen. Erst lenken, dann korrigieren.

Die Grenze: Sie erledigen jede Aufgabe einzeln. Das ist langsam und nicht wiederholbar.

Stufe 3: Ein Designsystem aufbauen

Wenn Sie kein Designsystem haben, arbeiten Sie faktisch mit einem neuen Designer, mit dem Sie für jedes Projekt alles von vorn aushandeln. Ein System zu haben bedeutet, einen einzigen Designer zu haben, der sagt: „Bei uns macht man das so.“

In der Praxis läuft es so ab: Sie exportieren eine Ausgabe, die Ihnen gefällt, als Projektarchiv, wählen im Hauptbildschirm den Punkt zum Erstellen eines Designsystems, laden die heruntergeladene Datei sowie vorhandenes Logo, Schriften und Marken-Assets hoch und starten die Generierung.

Heraus kommt ein vollständiges Dokument mit Farbpalette, Typografie, Textprinzipien, Bildbearbeitungsregeln und Bewegungsregeln. Laut Video ist das die Art von Ergebnis, für die Unternehmen Agenturen Tausende von Dollar bezahlen.

Eine kleine Taktik aus dem Video für die Farbpalette: Erfinden Sie Farben nicht von Grund auf neu, sondern nehmen Sie bereits bestehende, in sich stimmige Paletten. Generatoren wie Coolors eignen sich zur Inspiration, aber eine Palette, die ohnehin schon sitzt, ist meist die sicherere Wahl.

Exportieren Sie das System unbedingt, sobald es steht. Sie sollten es als einzelne Datei in der Hand haben; sein eigentlicher Wert liegt darin, dass es portabel ist.

Stufe 4: Das System auf Ihre gesamte Arbeit ausdehnen

Ein Designsystem aufzubauen und es dann nur für eine einzige Website zu benutzen, ist die häufigste Verschwendung. Dasselbe System funktioniert in Ihren Präsentationen, Ihren E-Mails, Ihren Angebotsdokumenten und Ihren Social-Media-Grafiken.

Auf dieser Stufe speisen sich Anfragen wie „Erstelle eine Sponsoring-Präsentation“, „Gestalte eine Willkommens-E-Mail“ oder „Verbessere die Farb-Typografie-Paarungen dieses Systems“ alle aus derselben Quelle, und die Marke bleibt konsistent. Dass eine in einem Durchgang erzeugte Präsentation das Farbschema richtig trifft, ist dann nichts Ungewöhnliches mehr.

Auch hier gilt die Iteration: Mit Korrekturen wie „Das Farbband soll auf jeder Folie gleich hoch sein“ oder „Kein Satz darf über zwei Zeilen gehen“ bringen Sie die Vorlage in Form. Und danach bleibt diese Vorlage bestehen.

Stufe 5: Kraft von außen holen

Bis hierher konnte das Werkzeug nur reproduzieren, was es sieht. Auf der fünften Stufe fangen Sie an, eigene Bilder und Videos zu produzieren: Logo, eigene Illustrationen, Hintergrundvideo, Figurengrafiken.

Die Logik dahinter ist eine Arbeitsteilung: Claude arbeitet als Designverstand, das Bildgenerierungswerkzeug als Produktionsmotor. Claude denkt besser darüber nach, was verlangt werden soll, und beschreibt es besser; das Bildmodell erzeugt es. Wenn Sie beide über die Kommandozeile miteinander verbinden und Ihr Designsystem als Eingabe mitgeben, gehören die entstehenden Bilder wirklich zu Ihrer Marke — das Stockfoto-Gefühl verschwindet. Im Video wird diese Verbindung über das Kommandozeilenwerkzeug (CLI) von Higgsfield hergestellt; ein anderer Bildgenerierungsdienst funktioniert nach demselben Prinzip.

Stufe 6: Alles in Bewegung setzen

Die sechste Stufe verlässt das statische Design und fügt Bewegung hinzu: HTML-Animationen, Abschnitte, die auf das Scrollen reagieren, 3D-Objekte.

Mit einer einzigen Anfrage wie „Mach eine HTML-Animation darüber, wie sich Gewohnheiten im Lauf der Zeit verändern“ lässt sich eine funktionierende Animation bekommen. So etwas lässt sich in die Website einbetten, in Inhalten verwenden oder als Belohnungsbildschirm in einer App einsetzen.

Bewegung ist der größte Faktor dabei, dass eine Seite nicht mehr „KI-generiert“ wirkt, sondern lebendig. Übertrieben ermüdet sie die Seite aber schon in der ersten Sekunde — binden Sie jede Animation an einen Zweck und benutzen Sie sie nicht als Dekoration. Wie sich diese Produktion bis zu Icons und Datengrafiken ausweiten lässt, steht in Motion Graphics und Icon-Automatisierung.

Stufe 7: Eine echte Anwendung

Auf der letzten Stufe besteht Design nicht mehr nur aus Grafik; dahinter steht eine laufende Anwendung mit Datenbank, Nutzerregistrierung und Anmeldung. Das Designsystem auf der Claude-Design-Seite und die Entwicklung auf der Claude-Code-Seite wachsen zusammen, und die Datenseite übernimmt ein Dienst wie Supabase.

Was die Sache hier erleichtert, ist der Einsatz eines Agent Skills: Sobald Sie eine Skill-Datei laden, die dem Modell erklärt, wie Supabase funktioniert, hört es auf zu raten und kennt die Infrastruktur wirklich. Registrierungsformular, Anmeldebildschirm und Verwaltungsoberfläche können in einer einzigen Anfrage entstehen. Wie eine Arbeit auf dieser Stufe tatsächlich bis in den Store kommt, habe ich in Wie ich Recapday von der Idee bis zum Store entwickelt habe beschrieben.

Ein kleines Detail, an dem aber alle hängen bleiben: In einem neu eingerichteten Registrierungsablauf ist die E-Mail-Bestätigung standardmäßig aktiviert, weshalb Ihr erster Anmeldeversuch fehlschlägt. Schalten Sie sie für die Testphase aus und vor dem Livegang wieder ein.

Hinterfragen Sie auf dieser Stufe außerdem die Sicherheitsseite: Lassen Sie die Datenbank-Advisor laufen und prüfen Sie, ob es Lücken bei der Sicherheit auf Zeilenebene gibt und ob der Schutz gegen geleakte Passwörter abgeschaltet ist. Eine Anwendung zu bauen, die gut aussieht und deren Berechtigungen offen stehen, ist leicht — und gefährlich.

Drei teure Fehler beim Stufensprung

Beim Aufstieg durch die Stufen tauchen drei Fehler immer wieder auf. Alle drei kosten Zeit, und alle drei lassen sich leicht vermeiden.

1. Das System aus einer generischen Ausgabe aufbauen. Sie bauen auf der dritten Stufe ein Designsystem, geben ihm als Eingabe aber ein gewöhnliches Design von der ersten Stufe. Das Ergebnis: Sie machen die Gewöhnlichkeit dauerhaft, und ab jetzt richtet sich jede Produktion danach. Sorgen Sie erst für eine Ausgabe, die Ihnen wirklich gefällt, und bauen Sie dann das System.

2. Die Iteration überspringen und trotzdem eine Stufe höher wollen. Die Regel der zweiten Stufe war, nicht in einem Zug fertig werden zu wollen. Wenn Sie ohne diese Gewohnheit nach oben gehen, machen Sie mit den teureren Werkzeugen der höheren Stufen denselben Fehler, nur teurer.

3. Vergessen, das System zu exportieren. Ein Designsystem aufzubauen und es in der Arbeitsumgebung liegen zu lassen, ist der ärgerlichste Verlust. Der ganze Wert des Systems liegt in seiner Portabilität — es muss als einzelne Datei in Ihrer Hand sein, damit Sie es in andere Projekte, andere Werkzeuge und Kundenaufträge mitnehmen können.

Und dann gibt es noch einen stillen Fehler: nicht zu wissen, auf welcher Stufe man gerade steht. Wer die Werkzeuge der fünften Stufe benutzt, aber kein System aus der dritten hat, bekommt Bilder, die nicht zusammenpassen. Festigen Sie erst die untere Stufe.

Auf welcher Stufe sollten Sie bleiben?

Sie müssen nicht alle sieben Stufen durchlaufen. Als grobe Faustregel:

  • Wenn Sie ein paar Grafiken im Monat produzieren, reicht Stufe 2.
  • Wenn Sie eine Marke haben und wiederkehrende Ausgaben produzieren, liegt der eigentliche Gewinn auf Stufe 3 bis 4. Hier zahlt sich die Investition am schnellsten aus.
  • Stufe 5 und 6 lohnen sich für Leute, die Inhalte produzieren und Kundenarbeit machen.
  • Auf Stufe 7 gehen Sie nur, wenn Sie wirklich ein Produkt haben, das live gehen soll; sonst übersteigt der Wartungsaufwand den Gewinn.

Und eine Kostenwarnung: Die mehrstufigen Abläufe mit Kritikerrunden auf den oberen Stufen fressen ordentlich Token. Setzen Sie sie nicht für jede Aufgabe ein, sondern für Vorlagen, die Sie immer wieder verwenden werden.

Kurz gefasst

Was bei Claude Design den Unterschied macht, ist nicht, das Modell besser zu bedienen, sondern das System aufzubauen. Wer auf der ersten Stufe bleibt, hält das Werkzeug für unfähig; wer auf die dritte Stufe wechselt, bekommt aus demselben Werkzeug eine völlig andere Ausgabe. Der einzige Unterschied ist, dass Sie sich einmal hingesetzt und Ihr Designsystem gebaut haben.

Häufig gestellte Fragen

Ich kann nicht designen — kann ich es trotzdem nutzen?

Ja, aber „nicht designen können“ und „nicht wissen, was man will“ sind zwei verschiedene Dinge. Das Werkzeug zeichnet für Sie, entscheiden kann es nicht. Schon allein zu lernen, Referenzen zu sammeln — Designs zu sammeln, die Ihnen gefallen, und beschreiben zu können, was genau Ihnen daran gefällt — bringt Sie auf die zweite Stufe.

Wie lange dauert es, ein Designsystem aufzubauen?

Wenn Sie bereits eine Ausgabe haben, die Ihnen gefällt, steht die erste Version in wenigen Minuten. Bis es wirklich sitzt, braucht es allerdings ein paar Korrekturrunden. Die Zeit, die Sie am Anfang investieren, zahlt sich bei jeder weiteren Produktion aus.

Sehen die Ergebnisse dann nicht alle gleich aus?

Genau das ist der Zweck eines Designsystems — Konsistenz. Die Vielfalt gehört nicht in das System selbst, sondern in die Varianten darin: verschiedene Layouts innerhalb derselben Palette, verschiedene Kompositionen mit derselben Typografie.

Darf ich ein erzeugtes Design kommerziell nutzen?

Die von Ihnen erzeugte Ausgabe dürfen Sie nutzen, aber achten Sie auf das Design, das Sie als Referenz genommen haben. „Sich inspirieren lassen“ und die visuelle Identität einer Marke eins zu eins kopieren sind zwei verschiedene Dinge; das Zweite ist ein rechtliches Risiko und hindert Sie daran, Ihre eigene Marke aufzubauen.

Quelle

  • Jack Roberts, Every Level of Claude Design Explained (YouTube, August 2026). Die Einteilung in sieben Stufen, die Beispielabläufe und die Supabase-Schritte beruhen auf diesem Video; die Empfehlungen zur Stufenwahl und die zusätzlichen Erklärungen stammen aus diesem Artikel.

Werkzeugnamen, Menüs und Funktionen ändern sich schnell; prüfen Sie vor dem Start die aktuelle Dokumentation.

Kommentare