Zehn Dateien, ein Gespräch: eine Markenidentität aus einem einzigen Designsystem

Zehn Designdateien, ein Designsystem, eine Startseite, vier YouTube-Thumbnails, ein LinkedIn-Banner, ein druckfertiger Lebenslauf und ein vierzigseitiger technischer Leitfaden. Alles aus einem Gespräch.

Die Ausgangslage kennt jeder, der als Entwickler nebenbei einen Kanal betreibt: Du brauchst eine Portfolio-Seite. Du brauchst ein Thumbnail für jedes Video, ein Kanalbanner, ein LinkedIn-Banner und einen Lebenslauf, der nicht nach Textverarbeitung aussieht. Jedes davon ist ein anderes Werkzeug, eine andere Datei, ein anderer Satz Entscheidungen.

Und deshalb kommt dabei regelmäßig heraus: Das Thumbnail nutzt eine Schrift, die Website eine andere, der Lebenslauf das, was das Textprogramm angeboten hat, und das LinkedIn-Banner ist zwei Jahre alt. Einzeln ist an keinem davon etwas falsch. Zusammen liest es sich nicht wie eine Person.

Ein Gestalter behebt das, indem er einmal ein System baut und es überall anwendet. Das kostet zwischen 2.000 und 8.000 Euro und mehrere Wochen Abstimmung. Dieses Video zeigt denselben Weg in einem Gespräch.

Das Werkzeug

Ich arbeite in Claude Design auf dem Max-Plan mit Opus 5. Claude Design gibt dir statt eines Chatfensters eine Fläche: Du beschreibst, was du willst, es wird gebaut, und du korrigierst visuell.

Vieles davon geht auch auf einem Pro-Plan. Max ist hier relevant, weil diese eine Sitzung zehn Dateien über sehr viele Iterationen erzeugt hat.

Und eine ehrliche Anmerkung: Ich habe sämtliche Prompts auf Deutsch getippt. Im Video sind sie deutsch zu sehen, gesprochen ist die englische Fassung.

Phase 1 · Designsystem

Das ist die einzige Phase, auf die es wirklich ankommt. Alles danach ist eine Variation davon.

Mein erster Prompt war ein Satz:

Baue mein Konzept für ein Designsystem und eine Startseite als HTML-Datei,
mit Hover-Verhalten und Animationen in UI und UX.

Dass er gelandet ist, hat man an der ersten Antwort gesehen: „Alle Vorgaben liegen vor. Guidelines plus Brand Kit — ich baue direkt." Keine Rückfragen. Kein „erzähl mir mehr über deine Marke".

Das Verhältnis ist der eigentliche Trick: ein Satz Prompt, tausend Zeilen Anhang. Die Arbeit steckt in den Dokumenten, nicht in der Formulierung.

Die Dokumente

Die Frage kommt immer, also der Umweg: Grundlage waren acht virale Prompts von Threads, die alle dasselbe versprachen — eine Website im Wert von 10.000 Dollar, Three.js, Partikelsysteme, Glasoptik, filmische 3D-Welten.

Ich habe ihre Struktur behalten: visuelle Identität, Architektur, Bewegung, Erzählweise, Stack, Performance, Ablauf, Audit. Diese Checkliste ist ernsthaft gut. Die Umsetzung habe ich vollständig ersetzt, aus drei Gründen, die ich alle drei in meine eigenen Guidelines geschrieben habe:

1. Sie widerspricht der Positionierung. Ich verkaufe produktionsreife Software. Ein Auftritt im Preisträger-Stil signalisiert Kreativdienstleister.
2. Sie kostet genau das, was ich brauche. Mein Archiv an Fachartikeln wird über die Suche gefunden. Three.js-Szenen kosten Ladezeit und Crawlbarkeit.
3. Der 3D-Look ist selbst zur Vorlage geworden. Er unterscheidet nicht mehr, er signalisiert, dass jemand einem Trend gefolgt ist.

Das Ergebnis

Zuerst die Farbrampe, acht Stufen: Paper, Mist, Hairline, Ash, Slate, Steel, Graphite, Ink. Das ist die gesamte Palette. Keine Akzentfarbe in der Rampe.

Darunter die semantische Schicht: Background, Border, Text, Text Muted, Text Faint. Komponenten fassen nur diese Schicht an, nie die Rohwerte. Der Grund dafür ist unmittelbar praktisch: Der Wechsel von Hell nach Dunkel ist damit eine Änderung.

Eine Regel daraus ist es wert, geklaut zu werden:

Ash ist im hellen Modus keine Textfarbe. Im dunklen Modus ist es die Standardtextfarbe. Derselbe Token, die entgegengesetzte Aufgabe.

Wer Sätze dieser Art für das eigene System aufschreibt, hört auf, Kontrastfehler zu machen.

Und die Frage, wo Farbe überhaupt auftaucht, hat genau eine Antwort: bei der Syntaxhervorhebung, beim Relevanzbalken in der Suche und bei den Statuspunkten im Diagramm. Das ist die vollständige Liste. Farbe erscheint nur dort, wo echte Daten sind.

Typografie: Archivo und JetBrains Mono. Archivo ist eine variable Grotesk mit Breitenachse — Überschriften laufen auf dem breiten Schnitt, Fließtext auf dem normalen. Eine Familie, zwei Breiten. Das ist visuell genau das, was ich verkaufe: eine Person, die die volle Breite abdeckt.

Dann hat Claude etwas geliefert, das ich nicht bestellt hatte: vier offene Entscheidungen aus meinen eigenen Dokumenten, verdrahtet als lebende Schalter. Hell oder dunkel. Achromatisch oder mit Akzentfarbe. Archivo breit oder in normaler Breite. Zwölfspaltiges Raster an oder aus. Es hatte die Stellen gefunden, an denen meine eigenen Unterlagen sich widersprachen, und daraus Umschalter gemacht.

Phase 2 · Startseite

Dieselbe Datei, zweite Ansicht. Hero, eine Zeile darunter, eine Stack-Zeile in Mono, zwei Schaltflächen.

Meine erste Korrektur war ein Satz:

Ich mag symmetrische Gestaltung. Der Hero wäre besser symmetrisch, mit
meinem Porträt in der Mitte.

Danach war der Hero symmetrisch, Porträt oben mittig, darunter Kicker, Überschrift, Lead und beide Handlungsaufforderungen auf einer Achse. Alles andere unverändert — und das ist der Teil, auf den es mir ankommt.

Die zweite Korrektur hat die Seite gemacht:

Verbessere jetzt die UX. Die Abschnitte unter dem Hero sind aus
UX-Sicht langweilig. Stil und Schrift sind hochwertig, die UX ist es nicht.

Vier Abschnitte gingen damit von lesbar zu bedienbar:

• Das Architekturdiagramm bekam vier Knoten, mit der Tastatur bedienbar, und einen Ebenenzähler.
• Der Durchgängigkeitsabschnitt wurde ein Umschalter: drei Dienstleister oder eine Person. Klickt man ihn, zerfällt die Kette sichtbar. Das Verkaufsargument wird vorgeführt statt behauptet.
• Die vier Leistungskarten klappen auf, und die Belegzahlen zählen beim Scrollen hoch — 900 Millisekunden, oder sofort auf dem Endwert, wenn reduzierte Bewegung eingeschaltet ist.
• Die Suche bekam Beispielanfragen als Chips, mit Trefferzahl und Antwortzeit über den Ergebnissen.

Bewegung ist auf der ganzen Seite festgelegt: 120 Millisekunden für Zustandswechsel, 180 für einen Wechsel mit Bedeutung, 260 beim Hereinscrollen, einmal pro Element. Strg + K öffnet die Suche.

Der Export ist eine Datei mit 558 Kilobyte. Läuft offline, Schriften, Laufzeit und jede Interaktion eingebettet.

Phase 3 · Thumbnails

Hier wird es interessant. Ich hatte denselben Chat noch offen und habe etwas völlig anderes verlangt:

Für das folgende Video brauche ich ein Thumbnail in diesem Stil.

[gesamtes Skript des Self-Hosting-Videos]

Ich habe den Stil nicht erklärt und das Brand Kit nicht noch einmal angehängt. Zurück kamen drei Entwürfe: 1280 × 720, Hintergrund Ink, Archivo in Stärke 700 und Breite 120 in Versalien, Sublines in Mono, Haarlinien, keine Schatten. Signalgelb erscheint an genau zwei Stellen — dem Preisschild und dem Pfeil.

Dazu drei Überschriftenvarianten und eine Empfehlung, welche zu nehmen ist. Und ein Widerspruch gegen einen meiner Reflexe: Nürnberg gehöre nicht in Titel oder Thumbnail. Der Standort ist ein Detail für die Beschreibung, kein Grund zu klicken.

Jetzt der ehrliche Teil: Das hat etwa fünfzehn Runden gedauert. Nicht weil Claude es falsch gemacht hätte, sondern weil ich meine Meinung geändert habe. Mein tatsächliches Feedback klang so:

Ich bin zu groß. Kleiner, aber in Farbe. Der Pfeil soll auf das NetCup-Logo zeigen. Verschieb das NetCup-Logo, damit Vercel und GitHub den Pfeil direkt daneben haben. Der Verlauf muss breiter sein. Er muss ein paar Pixel weiter rechts anfangen. Noch ein Stück weiter links — und jetzt haben wir die perfekte Grafik.

Das ist der Ablauf. Es ist kein Prompt, es ist ein Gespräch, in dem du die Bildregie führst.

Die drei weiteren Thumbnails liefen nach demselben Muster und kosteten jeweils nur noch ein Einfügen, weil das System bereits im Kontext war.

Phase 4 · Banner und CV

Derselbe Chat, vier weitere Aufträge.

Kanalbanner, 2560 × 1440 — und es hat die Sache erledigt, an der alle scheitern: Alles Lesbare sitzt in der Handy-Sicherheitszone von 1546 × 423. Porträt und Hintergrund laufen absichtlich darüber hinaus, damit sie nur auf dem Fernseher und auf großen Bildschirmen erscheinen. In den Entwurf ist ein Schalter eingebaut, der alle drei Sicherheitszonen zeigt.

LinkedIn-Banner, 1584 × 396. Meine fünf Kompetenzen aus dem alten Banner übernommen, ohne den Symbolsatz. Alles beginnt bei x = 396, damit Profilbild und Name nie etwas verdecken.

Lebenslauf, im hellen Design, vier Seiten druckfertig: weißes Papier, dasselbe Haarlinienraster, Archivo in Versalien für Namen und Positionen, JetBrains Mono für Daten und Abschnittsmarken. Gelb nur als Marker auf der aktuellen Zeile.

Und dann etwas, das ich nicht geplant hatte: Ich habe das vollständige Begleitmaterial zum Self-Hosting-Video eingefügt — sieben Phasen, alle Befehle, die gesamte Fehlerbehandlung — und daraus ein druckfertiges Dokument im selben Stil verlangt. Dunkle Titelseite wie das Thumbnail, danach heller Fließtext, Codeblöcke auf Mist-Hintergrund, laufender Kopf und Fuß auf jeder Seite, jede Phase auf einer neuen Seite, Codeblöcke und Tabellen ohne Umbruch. Das ist ein Dokument, für dessen Satz ich sonst jemanden bezahlt hätte.

Was nicht lief

1. Ein Thumbnail ist zweimal gescheitert. Mein Feedback zur ersten Fassung war deutlich: Der Pfeil hängt im Gesicht, die Logos sind weder zentriert noch sauber gesetzt. Die zweite Fassung hat die Logos auf einen weißen Balken gelegt — auch falsch. Drei Anläufe, und es ist immer noch das schwächste der vier.
2. Der Verlauf auf dem Server-Thumbnail hat allein etwa zehn Runden gebraucht. Das ist keine langsame KI. So sieht Bildregie aus, wenn man genau ist.
3. Eine Prüfung ist mitten in der Sitzung still gescheitert und musste neu gestartet werden.
4. Der Punkt, der zählt, wenn du das selbst versuchst: Am Ende habe ich Claude gebeten, den gesamten Chat zu exportieren. Die Antwort war, dass der Gesprächsverlauf nicht lesbar ist — was exportiert werden kann, ist das Projekt: alle Designdateien, Exporte, Uploads und Assets als ZIP. Also die Arbeit, nicht das Gespräch. Wer seine Prompts dokumentiert haben will, sichert sie unterwegs selbst.

Drei Regeln

1. Die Eingabe nach vorn verlagern. Mein Prompt war ein Satz, die Anhänge waren tausend Zeilen. Dieses Verhältnis ist der ganze Trick.
2. Im selben Chat bleiben. Jedes Thumbnail nach dem ersten hat mich ein Einfügen gekostet, weil das System schon im Kontext stand. In dem Moment, in dem du einen neuen Chat öffnest, erklärst du deine Marke von vorn.
3. Aufschreiben, was verboten ist — nicht nur, was du willst. Keine Schatten. Radien nur 2 und 4 Pixel. Farbe nur dort, wo echte Daten sind. Einschränkungen sind das, was eine Ausgabe spezifisch statt allgemein macht.

Fazit

Der Satz, auf den es hinausläuft: KI gibt dir keine Konsistenz. Ein Designsystem gibt dir Konsistenz. KI wendet es nur schneller an, als du es könntest.

Also der eigentliche Rat: Schreib deine Markendokumente, bevor du einen einzigen Prompt schreibst. Brand Kit, Design Guidelines, Projektbeschreibung. Das sind vielleicht zwei Stunden Arbeit, und sie verändern jede KI-Ausgabe danach.