Stell dir vor, du startest ein neues Projekt und musst bei jedem Entwurf neu festlegen, welche Farbe die Buttons haben oder welche Schrift für Überschriften gilt. Genau dafür gibt es in Claude Design das Designsystem. In dieser Anleitung lernst du, wie du aus wenigen Vorgaben ein solches System aufbaust, mit Markenfarben, Schriften, Buttons, Karten und Abständen befüllst und danach für alle weiteren Designs nutzt. Als Beispiel dient die fiktive AI Marketing Academy, die Premium-Onlinekurse für Entrepreneurs, Marketer und Creator anbietet.
Das Video wird erst beim Abspielen von YouTube geladen – dabei werden Daten (u. a. deine IP-Adresse) an YouTube bzw. Google übertragen. Mehr dazu in der Datenschutzerklärung
Wichtigste Erkenntnisse
- Ein Designsystem legst du einmal an und wendest es danach auf jedes neue Projekt an.
- Ein textbasiertes KI-Tool hilft dir, alle Vorgaben strukturiert zusammenzustellen.
- Farben, Typografie, Buttons, Karten, Abstände und Layout gehören in das System. Jede Vorgabe braucht einen klaren Verwendungszweck.
- Hex- und RGB-Codes sowie Color Picker sorgen dafür, dass Farben exakt übernommen werden.
- Nach der Prüfung veröffentlichst du das System und setzt es als Standard, damit neue Projekte es automatisch nutzen.
Schritt 1: Vorbereitung mit einem textbasierten KI-Tool
Bevor du in Claude Design etwas eintippst, lohnt sich ein kleiner Vorbereitungsschritt. Bitte ein textbasiertes KI-Tool wie ChatGPT, Gemini oder die Textversion von Claude, dir eine Liste aller Angaben zu erstellen, die ein Designsystem braucht. Das erspart dir später viel Sucherei und stellt sicher, dass nichts Wichtiges fehlt.
Schritt 2: Ein neues Designsystem anlegen und die Firmendaten eintragen
Wechsle im rechten Reiter auf „Design System“ und klicke auf „Create“. Das Formular ist umfangreich, doch du beginnst mit den Grundlagen: dem Firmennamen („Company Name“) und dem „Blurb“, einem kurzen Überblick über dein Unternehmen. Im Beispiel lautet der Eintrag: AI Marketing Academy, Premium-Onlinekurse für Entrepreneurs, Marketer und Creator. Zusätzlich kannst du Links, Dokumente, eine HTML-Version deiner Website sowie Fonts, Logos und weitere Assets hochladen.
Schritt 3: Farben mit Verwendungszweck festlegen
Im nächsten Abschnitt bestimmst du die Farbpalette. Überlege dir, welche Primärfarbe, Sekundärfarbe, Akzentfarben und Hintergrundfarbe dein Auftritt haben soll. Die entscheidende Frage lautet aber, wofür jede Farbe eingesetzt wird. Im Beispiel gilt: Die Primärfarbe (ein kräftiges Lila) ist ausschließlich für Buttons, Links und Überschriften vorgesehen. Die Akzentfarben, etwa Rot oder Gelb, dienen für Highlights, und die Hintergrundfarbe kommt für die Sections zum Einsatz. Wenn du diese Zuordnung direkt angibst, verwendet die KI jede Farbe gezielt und nicht nach Zufall.
Schritt 4: Typografie definieren
Als Nächstes legst du die Schriften fest. Im Beispiel kombiniert die Anleitung Poppins für Überschriften mit Inter in den Schnitten Bold und Regular für Fließtext und Oberflächen. Ergänze außerdem die Schriftgrößen der einzelnen Überschriften in Pixel. So weiß das System genau, wie groß eine H1 oder eine H2 zu sein hat. Wähle hier am besten nur wenige Schriften, denn je weniger Varianten du definierst, desto einheitlicher wirkt das Ergebnis.
Schritt 5: Buttons und Karten gestalten
Buttons sind die wichtigsten Elemente, wenn es um Conversion geht. Lege deshalb Varianten fest: welche Farbe der Button hat, wie die Schrift im Button aussieht und welches Ziel er verfolgt. Im Beispiel soll alles auf starke Conversion ausgerichtet sein. Danach definierst du die Kartenstile. Karten sind Inhaltsboxen, etwa für Features oder Testimonials. Bestimme, welche Hintergrundfarbe sie haben, ob sie Schatten besitzen und ob sie für Testimonials genutzt werden sollen.
Schritt 6: Abstände, Ränder und Layout festlegen
Abstände wirken unscheinbar, prägen aber den Gesamteindruck stark. Lege fest, wie viel Abstand Elemente zum Rand haben sollen, zum Beispiel 8, 16 oder 64 Pixel. Diese Werte gelten dann einheitlich für die komplette Landing Page, Website und jede UI. Ergänze außerdem das Layout. Im Beispiel stehen große, fette Headlines, zwei Call-to-Action-Bereiche, drei Abschnitte sowie ein FAQ- und ein Pricing-Bereich auf der Liste. Auch einen animierten Stil kannst du beschreiben.
Schritt 7: Farben und Schriften exakt übernehmen
Damit deine Farben präzise im System landen, arbeitest du mit Farbcodes. Hex- und RGB-Werte geben jede Farbe eindeutig wieder. Wenn du eine Farbe nicht kennst, nutze einen Color Picker, wähle die Farbe direkt im Werkzeug aus und übernimm den angezeigten Code. Eine weitere Möglichkeit: Lade deine bestehende Website hoch und lass dir die verwendeten Farben auslesen. Das klappt auch mit Farben, die du nur vom Bildschirm kennst. Die Schriften gibst du ebenso konkret an, im Beispiel etwa „Inter“.
Schritt 8: Markendokument hochladen und Hintergrundinformationen ergänzen
Erstelle nun ein Dokument mit deinen Markenrichtlinien, als Word- oder PDF-Datei. Das Format ist egal. Lade das Dokument anschließend über „Browse“ in das Designsystem hoch. Es erhält zunächst den Namen „Untitled Document“. Benenne es gleich um, zum Beispiel in „Brand Guidelines“, damit du es später schnell wiederfindest. Entferne außerdem Links, die nur zur Demonstration eingefügt wurden und für dein System keine Relevanz haben.
Im Feld „Other Notes“ ergänzt du den Hintergrund. Im Beispiel steht dort: ein Software-Service, ästhetisch inspiriert von Stripe, Linear und Notion. Ziele sind Klarheit (Clarity), Hierarchie und Conversion. Das Design soll modern, vertrauenswürdig und hierarchisch aufgebaut wirken. Sobald alles steht, klickst du auf „Continue to generate“. Die Generierung dauert einige Minuten und verbraucht einiges an Tokens, aber das Ergebnis lohnt sich.
Schritt 9: Ergebnis prüfen und Feedback geben
Nach der Generierung siehst du das Designsystem Abschnitt für Abschnitt. Prüfe dabei jeden Bereich: Primärfarben, Typografie, Abstände, Ränder, Schatten, Buttons inklusive Hover-Zustand, Formularfelder und Karten wie Testimonial-Cards. Jeder Schritt lässt sich öffnen und mit Feedback versehen oder zur Überarbeitung markieren. Im Beispiel erhalten alle Bereiche einen Daumen nach oben. Eine Brand-Font konnte noch fehlen, doch da das System insgesamt stimmig war, reichte der aktuelle Stand aus. Ob du zusätzliche Dateien hochlädst, entscheidest du selbst.
Schritt 10: Designsystem veröffentlichen und als Standard setzen
Gehe zurück zu „Designs“ und öffne den Bereich „Design Systems“. Dort findest du dein neues System. Das automatisch erstellte Standard-System, das du versehentlich angelegt hast, kannst du entfernen, falls du es nicht brauchst. Setze dann dein Designsystem auf „Published“. Du kannst es jederzeit wieder bearbeiten, wenn sich deine Vorgaben ändern. Der Hinweis, dass die neuen Projekte deines Teams das System automatisch nutzen, bedeutet, dass du bei jedem künftigen Entwurf denselben Stil erhältst.
Schritt 11: Eine Landing Page mit dem Designsystem erstellen
Starte ein neues Design und wähle unter den Optionen das gewünschte Designsystem aus. Gib dem Projekt einen sprechenden Namen, im Beispiel „Website full Test“. Anschließend fügst du einen Master-Prompt ein, zum Beispiel: „Create a conversion focus landing page“, gefolgt von der Beschreibung der Seite. Wichtig ist der Zusatz, dass alle Farben, Typografien und weiteren Vorgaben beibehalten werden sollen. Oben erscheint ein Banner mit dem Namen des angewandten Systems. Hochgeladene Dokumente werden zusätzlich als Attachment berücksichtigt.
Schritt 12: Ergebnis begutachten und Konsistenz für weitere Designs nutzen
Die Generierung dauert im Beispiel rund zwei Minuten. Anschließend siehst du die Landing Page mit Logo, Buttons, Social Proof, Features, Benefits, Pricing und Testimonials. Der Text fiel im Beispiel etwas umfangreich aus und wurde später gekürzt. Bilder musst du zusätzlich hochladen, und Funktionen wie Buttons sind im Entwurf nur als Design vorhanden. Den Code kannst du dir ausgeben lassen, um die Seite zu hosten.
Der eigentliche Vorteil zeigt sich bei weiteren Projekten. Wenn du beispielsweise fünf Social-Media-Ads erstellen lässt und dabei dasselbe Designsystem auswählst, teilen sich alle Grafiken die gleiche Schrift, Farbpalette und Hintergrundfarbe. So entsteht Konsistenz ganz automatisch.
Zusammenfassung – Designsystem mit Claude Design erstellen: Schritt-für-Schritt-Anleitung
Ein Designsystem bündelt Farben, Schriften, Buttons, Karten, Abstände und Layout in einer einzigen Vorlage. Du gibst die Vorgaben einmal ein, prüfst das Ergebnis, veröffentlichst es und wendest es anschließend auf Landing Pages, Grafiken und weitere Projekte an. Je klarer du Verwendungszwecke und konkrete Werte wie Hex-Codes oder Pixelgrößen festlegst, desto einheitlicher und zuverlässiger fallen deine Designs aus.
FAQ
Wie lange dauert die Generierung eines Designsystems?Je nach Umfang der Angaben kann sie einige Minuten dauern, und dabei werden mehrere Tokens verbraucht.
Muss ich unbedingt Hex- oder RGB-Codes verwenden?Nein, du kannst auch einen Color Picker nutzen oder die Farben aus deiner Website auslesen lassen. Die Codes sind jedoch präziser und vermeiden Abweichungen.
Kann ich ein Designsystem nach der Veröffentlichung noch ändern?Ja, du kannst es jederzeit bearbeiten, wenn sich deine Markenvorgaben ändern.
Warum sollte ich bei den Farben den Verwendungszweck angeben?Weil die KI dann jede Farbe gezielt einsetzt, etwa Primärfarbe für Buttons und Akzentfarbe für Highlights, statt sie beliebig zu verteilen.
Muss ich eine Brand-Font hochladen?Nein, eine Brand-Font ist optional. Im Beispiel war das Designsystem auch ohne sie vollständig nutzbar.
Kann ich das Designsystem auch für Grafiken wie Social-Media-Ads verwenden?Ja, sobald du das Designsystem beim Erstellen auswählst, übernehmen die Grafiken Schriftarten, Farben und Hintergrundfarben automatisch.
