Claude Code wird still und leise zur Design-Plattform

Claude Code wird still und leise zur Design-Plattform

Der Tweet, der mich schließlich überzeugte, war ein einzelner Screenshot. Jemand hatte fünf Wörter in Claude Code eingegeben – „build me a site like Stripe“ – und Enter gedrückt. Vierzig Sekunden später: eine Landingpage. Saubere Typografie. Ein Hero-Bereich mit genau dem zurückhaltenden Farbverlauf, den Stripe tatsächlich verwendet. Feature-Karten mit der richtigen Hierarchie. Keine lila Farbverlauf-und-Blob-Suppe. Kein „KI-Design“. Es sah aus wie etwas, das ein echter Designer an einem Dienstagnachmittag ausliefern würde.

Ich habe dieses Jahr hundert solcher Demos gesehen. Die meisten davon habe ich ignoriert. Aber diese hatte etwas, das den anderen fehlte – das Ergebnis kam nicht aus einem Prompt. Es stammte aus einer DESIGN.md-Datei aus dem awesome-design-md-Repo, als einfaches Markdown-Dokument ins Projekt gelegt. Die Skill-Datei kodifizierte Stripes Designprinzipien – die typografische Skala, den Rhythmus der Abstände, die Farbdisziplin, die Layout-Grids – und Claude Code nutzte sie einfach.

Genau das passiert im April 2026 still und leise, während alle über Figma Make versus Canva Magic Studio diskutieren. Claude Code ist kein reines Coding-Tool mehr. Es wird zur Design-Plattform. Kein Figma-Ersatz im Sinne von „Kästchen auf einer Leinwand zeichnen“. Sondern etwas Seltsameres und Mächtigeres: ein System, in dem Markenprinzipien als Skills kodifiziert und dann in jedem gewünschten Format repliziert werden – Landingpages, Pitch-Decks, Markenreports, Identity-Systeme, Datenvisualisierungen.

Ich habe letztes Wochenende meinen gesamten Design-Stack darauf umgebaut. Hier ist, was ich gelernt habe – was funktioniert, was noch hakt und der exakte Fünf-Schritte-Prozess, mit dem ich jetzt Design-Arbeiten ausliefere, die nicht wie von einem Modell generiert aussehen.

Die Kritik „KI-Design sieht generisch aus“ – und warum sie bald überholt ist

Seien wir ehrlich, die Kritik war berechtigt. Bis vor Kurzem stimmte sie fast immer.

Du kennst die Anzeichen. Der immer gleiche Hero-Bereich mit zentrierter Überschrift, einem Farbverlauf-Button und drei Feature-Karten darunter. Lila-zu-Pink-Verlauf. Abstrakte Blob-Illustration. Ein Testimonial-Karussell mit drei generischen Zitaten. Jede KI-generierte Website wirkte, als wäre sie vom selben leicht überforderten Praktikanten gestaltet worden, der nur einen einzigen Dribbble-Shot gesehen hat.

Der Grund ist unspektakulär. Modelle mitteln. Wenn du ein Modell bittest: „Gestalte eine SaaS-Landingpage“, spuckt es den statistischen Mittelwert aller SaaS-Landingpages aus, die es im Training gesehen hat. Was eben meist ein lila Farbverlauf ist. Niemandes Schuld. Einfach Mathematik.

Doch das hat sich geändert. Coding Agents sind im Frontend inzwischen so gut, dass der Engpass weiter nach oben gewandert ist – zu den Anweisungen. Und jemand hat erkannt: Wenn du dem Agenten eine ausreichend detaillierte Spezifikation gibst, wie gutes Design in deiner spezifischen Markensprache aussieht, löst sich das Mittelwert-Problem auf. Das Ergebnis ist nicht mehr „der Durchschnitt aller Designs“, sondern „eine kompetente Anwendung deines spezifischen Systems“.

Genau das sind DESIGN.md-Dateien. Markdown-Dokumente, die ein Designsystem abbilden – visuelles Thema, Farbpalette mit semantischen Namen, Typografie-Hierarchie, Komponenten-Zustände, Layout-Prinzipien, Elevation-Regeln, Abstands-Skalen. Das VoltAgent-Repository wurde am 31. März 2026 veröffentlicht. Es erreichte innerhalb von zwei Wochen rund 50.000 GitHub-Stars. Über 55 Brand-Systeme sind enthalten – Claude, Stripe, GitHub, Notion, Vercel, Apple, Figma, Spotify und viele weitere, sodass man fast immer etwas findet, das zum eigenen Projekt passt.

Lege die DESIGN.md in dein Projekt. Referenziere sie in einem Skill. Claude Code verfügt nun über ein kohärentes, meinungsstarkes Design-Vokabular. Das Problem des generischen KI-Designs verschwindet – größtenteils.

Und nein, ich kann die „91 % bessere Conversion bei hochwertigen Sites“-Statistik, die derzeit durch die Pitch-Präsentationen geistert, nicht verifizieren – ich habe nachgesehen, die Quelle hält nicht stand. Was ich sehr wohl belegen kann: Baymards Forschung über 200.000 Stunden UX-Studien und die vielzitierte Erkenntnis, dass Nutzer sich innerhalb von etwa 50 Millisekunden einen visuellen Eindruck einer Website bilden. Design ist längst nicht mehr nur Kosmetik – es ist die Grundlage jeder Conversion. Dafür braucht es keine erfundene Prozentzahl.

Warum „Code-First Design“ eine größere Idee ist, als es scheint

Bleiben Sie dran, denn es hat auch bei mir eine Weile gedauert, das ganze Ausmaß zu erkennen.

Die Designbranche steckt seit fünfzehn Jahren im Paradigma der visuellen Leinwand fest. Man öffnet Figma. Man zeichnet Rechtecke. Man schiebt sie zurecht. Man wendet Stile an. Die Datei ist das Artefakt, und der Code wird später von Entwicklern extrahiert – meist schlecht, mit viel Nacharbeit.

Code-first Design kehrt dieses Prinzip um. Das Designsystem ist Code (Tokens, Komponenten, Patterns – bereits strukturiert). Die KI liest diesen Code, liest Ihre DESIGN.md-Brandregeln und generiert ein neues Artefakt in derselben Sprache. Wenn Sie ein Figma-Mockup brauchen, exportieren Sie es. Wenn Sie eine Landingpage benötigen, veröffentlichen Sie sie. Wenn Sie ein Pitchdeck brauchen, generieren Sie HTML-Slides. Wenn Sie einen gebrandeten Report als PDF benötigen – gleiche Quelle der Wahrheit. Das Artefakt wird zur Projektion des Systems, nicht umgekehrt.

Das ist zumindest die Behauptung. Was mich überzeugt hat, dass es mehr als nur ein Pitch ist, war die Bandbreite der Formate. Hier ist, was ich Claude Code inzwischen sauber aus demselben kodifizierten Brand-Know-how habe erzeugen sehen:

• Komplette Landingpages in der visuellen Sprache von Spotify, Stripe oder Nike – ein Prompt, lokaler Dev-Server läuft in Minuten
• HTML-Slide-Decks mit konsistenter Typografie, Layout-Grids und Markenfarben über zwanzig Slides hinweg
• Gebrandete Reports und Angebote, die aussehen, als hätte eine Designagentur das Template gebaut
• Datenvisualisierungen, die das Farbsystem der Marke automatisch übernehmen – keine abweichenden Chart-Paletten mehr
• Partielle Identity-Systeme – Logomarken, Farb-Tokens, Typografie-Skalen, Abstände – gebündelt im Handoff-Ordner

Im Implementierungsteil zeige ich Ihnen einen vollständigen Durchlauf davon. Zuerst aber der Prozess – denn genau diesen Teil überspringen die meisten „AI Design“-Artikel.

Der 5-Schritte-Prozess, den ich jetzt verwende (und warum jeder Schritt zählt)

Ich habe das in den ersten Tagen ständig vermasselt. Ich bin direkt zu „generiere eine Landingpage“ gesprungen und habe dann eine Stunde damit verbracht, die Fehler zu beheben. Der folgende Prozess ist nicht ausgefallen. Es ist einfach das, was passiert, wenn man aufhört, Schritte zu überspringen.

Schritt 1 — Zuerst das Ausgabeformat wählen

Nicht „designe mir irgendwas“. Nicht „eine Website“. Sondern ganz konkret: Landingpage, Pitch Deck, One-Pager-Report, Identity Kit, Data Dashboard, E-Mail-Template. Das Format bestimmt die Rahmenbedingungen, und die Rahmenbedingungen bestimmen, was wichtig ist. Ein Pitch Deck braucht Typografie, die aus zwei Metern Entfernung lesbar ist; eine Landingpage braucht eine klare Conversion-Hierarchie; ein Identity Kit braucht ein anpassungsfähiges Logo.

Das Format zuerst aufzuschreiben, fixiert auch das mentale Modell. Man hört auf, „irgendein Ding“ zu designen, und beginnt, genau diese Art von Ding zu gestalten.

Schritt 2 — Die tatsächlich genutzten Konnektoren integrieren

Hier setzt Claude Code sich von jedem visuellen Tool ab, denn die Integrationen sind einfach MCP-Server und Plugins, die man dem Projekt hinzufügt. Die, die ich inzwischen bei fast jedem Design-Job nutze:

• Firecrawl für Brand Scraping. Ihr branding-Format extrahiert die Farben, Typografie, Abstände, das Logo und UI-Komponenten einer Zielseite als strukturierte Daten, auf die man sich beziehen kann. Dauert etwa drei Sekunden. Ersetzt das, was früher eine Stunde „Hex-Codes händisch vom Wettbewerber klauen“ war.
• NanoBanana 2 via Kie API für Bildgenerierung. Die echten Preise sind $0,045 für 0,5K, $0,067 für 1K, $0,101 für 2K und $0,151 für 4K — etwa die Hälfte des Google-Direktpreises. Ich hatte auf Twitter „$0,06 pro Bild“ gehört; das stimmt ungefähr für 1K-Auflösung, aber man zahlt nach Auflösungsstufe, nicht pauschal. Gut zu wissen, bevor man hundert Assets generiert.
• Gmail- und Google-Calendar-Konnektoren — klingt für Design-Workflows seltsam, aber so verschicke ich Proofs, plane Review-Calls direkt aus derselben Session und ziehe Kunden-Brandnotes aus per E-Mail gesendeten PDFs.
• Figma MCP — weiterhin nützlich, um bestehenden Datei-Kontext zu übernehmen, wenn der Kunde bereits ein Figma-System hat, das ich respektieren muss.

Einmal im Projekt einrichten. Sie stehen dann für jede künftige Session bereit.

Schritt 3 — Referenzmaterial als erstklassigen Input behandeln

Hier hören die meisten auf. „Referenzmaterial“ ist kein Moodboard nach Gefühl. Es ist strukturierter Input:

• Die DESIGN.md-Datei für die Markenästhetik, auf die du hinarbeitest
• Konkrete Font-Dateien oder Google Fonts-URLs (Claude lädt sie im generierten HTML)
• Logo-Assets oder bestehende Markenzeichen, die respektiert werden müssen
• Zwei oder drei visuelle Referenzen — ein MidJourney-Board, ein Canva-Template, das dir gefallen hat, eine Wettbewerberseite, die du anspielen, aber nicht kopieren willst

Lege das alles in einen /design-input/-Ordner im Projekt. Sag Claude, er soll es vor der Generierung lesen. Diese eine Gewohnheit hat meine Output-Qualität mehr verändert als jeder Prompt-Trick.

Schritt 4 — Das initiale Design generieren

Jetzt, und nur jetzt, das Artefakt anfordern. Ein Absatz, konkret:

„Erstelle eine Landingpage für ein Series-A-Fintech namens Folio. Verwende die DESIGN.md in /brand/stripe.md als visuelle Sprache. Enthält einen Hero, ein dreispaltiges Feature-Grid, einen Pricing-Bereich mit drei Stufen, Social Proof mit vier Logo-Platzhaltern und einen CTA-Footer. Verwende das Logo in /design-input/logo.svg. Ziehe unterstützende Bilder über NanoBanana 2 — keine Stockfoto-URLs.“

Du bekommst einen ersten Entwurf, der wirklich zu 70–80 % fertig ist. Nicht perfekt. Nie perfekt in Runde eins. Aber gut genug, dass der nächste Schritt Verfeinerung und nicht Rettung ist.

Schritt 5 — Das Ergebnis als wiederverwendbare Skill kodifizieren

Das ist der Schritt, der sich auszahlt. Sobald du zu etwas iteriert hast, das dir gefällt — die Typografie stimmt, die Abstände sind deine Abstände, die Komponenten-Muster passen zur Markenpersönlichkeit — wirfst du diese Arbeit nicht weg, wenn die Session endet.

Du speicherst sie als Skill. Ein Ordner mit der DESIGN.md, deinen Anpassungen, deinen Prompt-Mustern, den verwendeten Konnektoren und den freigegebenen Beispiel-Outputs. Beim nächsten Mal, wenn du etwas in dieser Markenstimme brauchst — Deck, Seite, Report, Identity-Erweiterung — verweist du auf den Skill und das Qualitätsniveau ist bereits gesetzt.

Das ist der Teil, den Figma nicht kopieren kann. Nicht, weil Figma schlecht ist. Sondern weil Figma Dateien speichert und Claude Code Systeme. Anderes Substrat, andere Skalierung.

Profi-Tipp: Nutze Sub-Agents, um generierten Text bei jedem Design mit echten Claims zu fact-checken. Ich habe letzte Woche drei erfundene Statistiken in einem Pitch Deck gefunden, indem ich einen Research-Sub-Agent über das finale HTML laufen ließ, bevor ich es exportiert habe. Dauert dreißig Sekunden. Rettet die Kundenbeziehung.

Was ich tatsächlich getestet habe — Drei Durchläufe, ehrliche Ergebnisse

Abstrakte Prozesse sind günstig. Hier ist, was passiert ist, als ich am vergangenen Wochenende echte Aufgaben durchlaufen ließ.

Durchlauf 1: One-Shot-Landingpage im Lovable-Stil

Ziel: Eine Landingpage für ein fiktives KI-Produkt in der visuellen Sprache von Lovable (weiche Farbverläufe, großzügiger Weißraum, freundliche serifenlose Schrift). Ich habe design-md/lovable.md ins Projekt eingefügt, das Produkt in einem Absatz beschrieben und um eine einseitige Marketingseite mit Hero, drei Vorteilsblöcken, einer Testimonial-Reihe und einem Preisteil gebeten.

Ergebnis: Eine funktionierende Next.js-Seite in etwa vier Minuten. Typografie: exakt getroffen. Abstands-Rhythmus: stimmig, keine beengten Bereiche. Der Farbverlauf wurde einmal, im Hero, eingesetzt – genau die richtige Lovable-Disziplin, nicht „Gradient überall“, wie es KI-Tools standardmäßig machen. Die Testimonial-Avatare kamen als von NanoBanana generierte Porträts zurück, die wie echte Menschen aussahen, statt der Uncanny-Valley-Renderings, die ich vor sechs Monaten noch bekam.

Was nicht passte: Die Preiskarten hatten anfangs einen Drop Shadow, der im Lovable-System nicht vorgesehen ist. Ich habe auf den Elevation-Abschnitt in DESIGN.md verwiesen und gesagt: „Verwendet das Card-Treatment aus der Komponentenbibliothek, keinen Schatten.“ In einem Durchgang behoben.

Durchlauf 2: SpaceX-Style Missionsseite

Schwierigere Probe — das SpaceX-Design ist spezifisch und kompromisslos. Dünne, schmale Typografie, konsequente Dark-Mode-Disziplin, zurückhaltende Akzentfarben, kontrastreiche Bildsprache. Die meisten „KI-Designs“ scheitern daran, weil sie die Zurückhaltung, die SpaceX ausmacht, einfach wegrechnen.

Mit dem passenden DESIGN.md: Das Ergebnis war sauber. Nicht so gut wie das echte SpaceX-Designteam (ich würde nie das Gegenteil behaupten), aber wirklich brauchbar. Die Typografie-Skala blieb erhalten. Die schwarzen Hintergründe blieben schwarz und drifteten nicht ins Standard-Dunkelgrau ab. Die Bilder kamen über NanoBanana 2 in 2K-Auflösung und hatten das richtige cineastische Feeling. Gesamtdauer vom Prompt bis zum versandfertigen ersten Entwurf: etwa sieben Minuten, inklusive Bildgenerierung.

Durchlauf 3: Llama-Style Developer-Docs-Landingpage

Das war die Überraschung. Ich hatte angenommen, dass Landingpages für Dokumentationen der einfache Fall für KI-Design-Tools wären – sie sind kastig, vorhersehbar, funktional. Tatsächlich ist der „einfache“ Fall gar nicht so einfach, sondern „verzeiht keine Details“. Der Spielraum für schlampige Typografie schrumpft, wenn es kaum visuelle Spielereien gibt, hinter denen man sich verstecken kann.

Genau hier zahlte sich der DESIGN.md-Ansatz aus. Weil das Meta/Llama-Brand-System kodifiziert ist – Monospace-Codeblöcke, spezifischer blauer Akzent, disziplinierte Überschriftenhierarchie – wurden diese Regeln automatisch eingehalten. Kein abweichendes Lila. Kein „KI-Design-Docs“-Look. Einfach … Docs. Die langweilige Sorte, die gute Dokumentation eben ausmacht.

Wo das Ganze noch scheitert

Ich möchte hier ehrlich sein, denn jeder „AI Design ist gelöst“-Thread verschweigt die Schwachstellen.

Speicher und Kontext sind weiterhin eine Einschränkung. Das Kontextfenster von Claude Code, selbst mit der 1M-Option auf Opus 4.6, ist schnell erschöpft, wenn dein Designprojekt zwanzig Screens, sechs Konnektoren und ein langes DESIGN.md umfasst. Du bekommst dann inkonsistente Entscheidungen zwischen Screens, die in verschiedenen Teilen der Session generiert wurden. Die Lösung ist, Sessions nach Artefakt zu splitten und nur den Kontext einzubinden, den das jeweilige Artefakt benötigt. Nicht elegant. Nur pragmatisch.

Echte Identitätssysteme brauchen einen Menschen. Logodesign – das eigentliche Logozeichen, nicht eine Wortmarken-Variation – ist nach wie vor nichts, was ich ohne die Hand eines echten Designers veröffentlichen würde. Claude Code generiert etwas. Es sieht „okay“ aus. Es sieht aber nicht aus wie die Arbeit von jemandem, der fünfzehn Jahre über Marken nachgedacht hat. Wenn dein Brand vom Logomark abhängt, engagiere für diesen Teil einen Menschen. Alles um das Zeichen herum (Typografie-System, Farb-Tokens, Abstände, Nutzungsregeln, Brand Extensions) ist der Bereich, in dem dieser Workflow glänzt.

Die Qualität des Referenzmaterials ist entscheidend. Wenn du mittelmäßige Referenzen fütterst, bekommst du mittelmäßige Ergebnisse. Das überrascht niemanden, und trotzdem versuchen Leute immer wieder, Designs aus einem leeren Prompt heraus zu erstellen. Der Engpass bist jetzt du – was du sammelst, was du im DESIGN.md kodierst, welche Constraints du dem Agenten gibst.

Firecrawls Branding-Format ist gut, aber kein Zauberwerk. Farben und Typografie werden zuverlässig extrahiert. Das System liest manchmal Abstands-Systeme falsch (verwechselt Margin-Rhythmus mit beliebigem Padding) und erfasst nicht immer Interaktionszustände. Sieh es als Starthilfe, nicht als fertiges Brand-Audit.

Bildgenerierung trifft weiterhin seltsame Entscheidungen. NanoBanana 2 in 4K ist wirklich beeindruckend, aber gelegentlich entsteht ein Hero-Image, das eine Stilvorgabe ignoriert und auf die bevorzugte Ästhetik zurückfällt. Plane für jedes kommerzielle Projekt einen zweiten Durchlauf für die Bild-Qualitätskontrolle ein.

Wo das Figma und Canva hinführt

Heikle Frage. Lassen Sie mich ehrlich antworten, statt auszuweichen.

Canva hat 260 Millionen monatlich aktive Nutzer und eine Bewertung von 42 Milliarden Dollar laut dem Mitarbeiteraktienverkauf im August 2025. Sie werden nicht so schnell verschwinden. Die Nutzung von Magic Studio steigt – allein bei Universitätsnutzern gab es einen Anstieg von 42 % im Jahresvergleich. Canvas Burggraben ist die Distribution und die Breite der Vorlagen, nicht das Design-Prinzip selbst. Sie werden weiterhin den Markt „Nicht-Designer braucht in vier Minuten einen Social-Media-Post“ dominieren.

Figma ist schwerer einzuschätzen. Für professionelle Produktteams, die an lebendigen Interfaces mit Entwicklerübergabe arbeiten, sind Figmas Komponentenmodell und Dev-Mode nach wie vor das beste verfügbare Tool. Aber für einen Großteil der Arbeit, die ich früher in Figma erledigt habe – Marken-Explorationen, erste Layouts, Marketingseiten, Pitch-Decks, einmalige Reports – greife ich inzwischen zuerst zu Claude Code. Nicht, weil es besser Rechtecke zeichnen kann (das kann es nicht). Sondern weil es besser darin ist, das finale Artefakt direkt in der Sprache zu generieren, die ich benötige.

Eine aktuelle Branchenumfrage ergab, dass 53 % der Fachleute bereits den spürbaren Einfluss von KI auf Design-Ergebnisse erkennen. Das ist keine Zukunftsprognose. Das ist Gegenwart. Die Design-Tools, die in den nächsten achtzehn Monaten angenommen werden, sind diejenigen, die am nächsten am codifizierten System-Workflow sitzen – egal, ob das letztlich Claude Code mit Skills ist, Figma mit tieferer Agenten-Integration, oder etwas, das noch keinen Namen hat.

Meine Prognose für dieses Jahr: Figma bleibt führend beim Produktdesign im Teammaßstab. Canva bleibt führend bei Geschwindigkeit für Nicht-Designer. Aber es öffnet sich eine neue Spur – „Code-First-Design“ – und Claude Code ist aktuell das stärkste Tool in diesem Bereich.

Was sich bei mir tatsächlich geändert hat

Konkret, nach drei Wochen damit:

• Marketing-Seiten, für die ich früher vier Stunden in Figma plus weitere vier Stunden im Code gebraucht habe, dauern jetzt insgesamt etwa neunzig Minuten – und ich liefere direkt den Code aus, statt ein Mockup zu übergeben.
• Kundenpräsentationen sind von einem halben Tag Template-Gefrickel auf eine vierzigminütige Generierung plus Feinschliff geschrumpft.
• Brand-Explorationsrunden – also die Anfrage „Gib mir drei Richtungen für eine neue Identität“ – sind jetzt tatsächlich eine einstündige Übung statt eines zweitägigen Sprints, weil jede Richtung eine Skill-Variation ist und keine Datei komplett neu erstellt werden muss.
• Die Arbeit meiner Junior-Designerin hat sich verschoben. Sie erstellt keine ersten Entwürfe mehr, sondern kuratiert Referenzmaterial, optimiert DESIGN.md-Dateien und prüft generierte Ergebnisse. Mehr Hebelwirkung, bessere Nutzung ihres Geschmacks.

Ich behaupte keine allgemeingültige Produktivitätszahl, denn meine ist meine und deine wird deine sein. Aber das Muster – weniger Stunden im Canvas-Tool, mehr Stunden beim Prompten und Reviewen – wird für Menschen, die diese Art von Arbeit machen, nahezu universell gelten.

Die eigentliche Veränderung

Hier ist das, worauf die Jack Roberts-Demo, das DESIGN.md-Repository und die NanoBanana-Integrationen alle hindeuten, auch wenn es niemand offen ausspricht.

Design hört auf, nur von Tools zu handeln, und wird zu einer Frage von Geschmack plus Systemverständnis. Wenn du beschreiben kannst, wie gutes Design aussieht – in strukturierter Form: Farben, Typografie, Abstände, Komponentenregeln, Anwendungsbeispiele – kann die Maschine das in jedes gewünschte Format übertragen. Was die Maschine nicht kann, ist, den Geschmack überhaupt erst zu haben. Sie kann dir nicht sagen, dass die Zurückhaltung von Lovable dessen ganze Persönlichkeit ausmacht, oder dass das Schwarz von SpaceX kein „Dark Mode“, sondern ein visuelles Statement ist, oder dass Claudes Typografie wärmer wirkt als die von Stripe, obwohl die Unterschiede mikroskopisch klein sind.

Das ist die Fähigkeit, für die Designer im nächsten Jahrzehnt bezahlt werden. Nicht für das Verschieben von Pixeln. Sondern für das Kodieren von Urteilsvermögen. Alles andere – das Rendern, das Replizieren, die Formatübersetzung – ist jetzt ein gelöstes Problem, das ein CLI für 20 $/Monat erledigen kann.

Also mach heute Abend oder am Wochenende eines: Wähle eine Marke, die du bewunderst. Schreibe ihr DESIGN.md selbst, von Grund auf, in einer einfachen Markdown-Datei. Lade nicht die Version von VoltAgent herunter. Denke wirklich über die Typografie-Hierarchie, die Farbsemantik, den Rhythmus der Abstände, die Disziplin der Komponenten nach. Schreibe es in Worte.

Wenn du fertig bist, weißt du etwas, das die meisten Designer noch nicht wissen: wie es sich anfühlt, den eigenen Geschmack zu Software werden zu sehen.

Häufig gestellte Fragen

Was ist eine DESIGN.md-Datei und wie funktioniert sie mit Claude Code?

Eine DESIGN.md-Datei ist eine Markdown-basierte Spezifikation eines Designsystems einer Marke – Farbtokens, Typografieskala, Abstandsregeln, Komponentenstatus und Layoutprinzipien – geschrieben in einem Format, das LLMs nativ parsen können. Sie wird einfach ins Projekt gelegt und von Claude Code beim Generieren von UI gelesen, sodass das Ergebnis konsequent an die jeweilige Markensprache angepasst bleibt, statt sich an generischen KI-Ästhetiken zu orientieren. Im awesome-design-md Repo gibt es über 55 sofort einsetzbare Beispiele.

Kann Claude Code Figma tatsächlich für Designarbeit ersetzen?

Für einen bestimmten Bereich – Marketingseiten, Pitch Decks, Marken-Exploration, Reports, erste UI-Entwürfe – ja, besonders wenn du dich im Code wohlfühlst. Für Team-Produktdesign mit Entwicklerübergabe und lebenden Komponentenbibliotheken bleibt Figma das richtige Tool. Realistisch lautet die Antwort: „Claude Code ersetzt vielleicht 40 % dessen, wofür ich Figma genutzt habe“ – und dieser Anteil wächst von Monat zu Monat.

Was kostet NanoBanana 2 über die Kie API tatsächlich pro Bild?

Die Preise sind nach Auflösung gestaffelt: $0,045 für 0,5K, $0,067 für 1K, $0,101 für 2K und $0,151 für 4K, mit einem 50 % Batch-API-Rabatt. Das ist etwa die Hälfte des direkten Gemini 3.1 Flash Image-Preises von Google. Die auf Twitter kursierende Zahl „$0,06 pro Bild“ stimmt ungefähr für 1K-Ausgaben – siehe die Kie-Preisseite für die aktuelle Übersicht.

Wie extrahiert das Branding-Format von Firecrawl eine Markenidentität?

Das branding-Format von Firecrawl crawlt eine Ziel-URL und liefert strukturierte Markendaten: Farbpalette, Typografiestapel, Abstandsbeobachtungen, Logo-Assets und wiederkehrende UI-Komponentenmuster. Der Aufruf erfolgt als firecrawl_scrape mit formats: ["branding"] und liefert eine JSON-Antwort, die dein Agent als Referenzmaterial nutzen kann. Es ist schnell und bei Farben und Typografie meist präzise – weniger zuverlässig bei Abstands-Systemen und Interaktionszuständen.

Ist Claude Code für Designer:innen ohne Entwicklerkenntnisse geeignet?

Ehrlich gesagt: noch nicht. Der Workflow setzt Vertrautheit mit Terminal, Ordnerstrukturen und das Lesen von generiertem Code voraus, um Probleme zu erkennen. Designer:innen ohne jeglichen Code-Hintergrund stoßen auf Hürden. Wer ein Jahr mit HTML/CSS experimentiert hat, wird das System an einem Wochenende verstehen. Canva und Figma AI sind für reine Nicht-Coder:innen weiterhin die besseren Einstiege. Einen tieferen Einblick in die strukturierte Seite bietet mein AI-Designsystem-Workflow-Walkthrough zum gleichen Thema.

Lassen Sie uns zusammenarbeiten

Möchten Sie KI-Systeme entwickeln, Workflows automatisieren oder Ihre technische Infrastruktur skalieren? Ich unterstütze Sie gerne dabei.

• Fiverr (individuelle Lösungen & Integrationen): fiverr.com/s/EgxYmWD
• Portfolio: mejba.me
• Ramlit Limited (Enterprise-Lösungen): ramlit.com
• ColorPark (Design & Branding): colorpark.io
• xCyberSecurity (Sicherheitsdienstleistungen): xcybersecurity.io