Guide · Setup & Grundlagen

Deine Marke einmal hinterlegen

Danach baut Claude in deinem Stil weiter, ohne dass du ihn erklärst.

Ein System: Statt jedes Mal neu erklären
Selbstprüfung: Vor der Ausgabe, nicht danach
PDF + PPTX: Export direkt aus Claude

Der Unterschied ist nicht, dass Claude Farben erkennt.

Der Unterschied ist, dass du ihm ein Design-System übergibst und Claude sein eigenes Ergebnis dagegen prüft, bevor du es überhaupt zu sehen bekommst. Du bekommst also nicht etwas, das ungefähr nach deiner Marke aussieht, sondern etwas, das aus deinen Bausteinen gebaut wurde.

Als PDF laden0 Seiten

DER KERN

Woher das System kommt

Drei Wege hinein, ein Verhalten danach

Aus einem GitHub-Repo

Wenn dein Code schon Komponenten und Farbwerte enthält, ist das die sauberste Quelle. Claude baut dann mit genau diesen Bausteinen weiter.

Aus Design-Dateien

Bestehende Design-Dateien oder ein Styleguide lassen sich direkt importieren, ebenso Word-, PowerPoint- und Excel-Dateien.

Aus einer Webseite

Gibt es weder Code noch Dateien, nimmst du eine Erfassung deiner Webseite. Daraus liest Claude Farben, Schriften, Abstände und den Tonfall der Texte.

Danach: die Selbstprüfung

Egal woher es kommt — Claude erzeugt mit den Komponenten des Systems und gleicht das Ergebnis dagegen ab, bevor es dir angezeigt wird.

Im Team: eine verbindliche Fassung

Für größere Teams gibt es eine Rolle, die ein Design-System als Standard freigibt und Änderungen daran sperrt. Damit baut niemand mehr aus Versehen mit einer alten Palette.

PROMPT 1

Marke einlesen

Wenn du nur eine Webseite hast und sonst nichts

Hier ist unsere Webseite: [DEINE URL]

Lies sie aus und leg daraus ein Design-System an. Ich brauche:
- Farben mit Hex-Werten, getrennt nach Hintergrund, Text, Akzent
- Schriftfamilien mit Größen und Gewichten für Überschrift,
  Fließtext und Kleintext
- Abstände, Eckenradien und Schattenwerte
- Button-Zustände: normal, überfahren, deaktiviert
- Den Tonfall der Texte in drei Sätzen beschrieben

Regeln:
- Nimm nur, was wirklich auf der Seite steht. Erfinde keine
  Zwischenwerte und keine fehlenden Zustände.
- Wo du unsicher bist, schreib es als offene Frage ans Ende,
  statt zu raten.
- Leg alles als eine Datei an, die ich wiederverwenden kann.

Zeig mir danach die Farbpalette und die Schriftskala als Übersicht,
bevor wir irgendetwas damit bauen.

Der letzte Absatz ist die Sicherung.

Eine falsch erkannte Akzentfarbe zieht sich sonst durch jede Präsentation, die du danach baust. Einmal draufschauen kostet dich zehn Sekunden und spart dir das Nacharbeiten an zwanzig Folien.

PROMPT 2

Damit bauen

Erst wenn die Palette stimmt

Nimm das eben angelegte Design-System und bau mir daraus:
[eine Präsentation über X / einen Prototyp für Y / ein Angebot]

Bedingungen:
- Verwende ausschließlich Farben, Schriften und Abstände aus dem
  System. Keine neuen Werte.
- Prüf das Ergebnis gegen das System, bevor du es mir zeigst, und
  sag mir, an welchen Stellen du abweichen musstest und warum.
- Halte dich beim Text an den beschriebenen Tonfall.

Zum Schluss: exportier es als PDF und als PowerPoint.

/design       Design-Projekte anlegen, ändern und abgleichen
/design-sync  Holt das Design-System in Claude Code hinein

Warum der Terminal-Weg zählt.

Mit /design-sync startet Claude Code nicht mehr bei null, sondern bei deinen vorhandenen Komponenten. Aus einem Design wird damit direkt Code in deiner Handschrift, statt dass jemand das Layout hinterher nachbaut.

DER ÜBERGANG

Vom Design zur App

Hier hört das Gestalten auf und das Bauen fängt an

Ich habe in Claude Design ein Interface für [WAS ES WERDEN SOLL]
gebaut. Zieh das Design-System mit /design-sync hier herein und mach
daraus ein lauffähiges Projekt.

Stack: [DEIN STACK, z.B. Vite mit React und Tailwind, SQLite]

Wichtig:
- Verwende die Komponenten und Werte aus dem Design-System.
  Keine neuen Farben, keine neuen Abstände.
- Bau zuerst nur die Oberfläche mit Beispieldaten. Noch keine
  Datenbank, noch keine Anmeldung.
- Sag mir danach, welche Daten du brauchst und welche Felder,
  bevor du die Datenbank anlegst.
- Alles, was im Design nur angedeutet ist, fragst du nach,
  statt es dir auszudenken.

Sag mir am Ende den Befehl, mit dem ich es starte.

Ein Design beantwortet drei Fragen nicht.

Was passiert, wenn nichts da ist. Was passiert, wenn etwas schiefgeht. Und wer was sehen darf. Diese drei Punkte stehen in keinem Entwurf, und genau daran scheitern die meisten Projekte, die aus einem Design entstanden sind. Klär sie, bevor du die Datenbank anlegen lässt, nicht danach.

ÜBERSICHT

Wo es rausgeht

Export und angebundene Werkzeuge

WEG

PDF
PowerPoint
Canva, Adobe
Miro, Gamma
Vercel, Wix, Replit
Lovable, Base44

WOFÜR

Angebot, Konzept, alles zum Verschicken
Wenn beim Kunden weitergearbeitet wird
Für die Grafikleute im Team
Workshops und Präsentationen
Wenn aus dem Entwurf eine Seite wird
Prototyp direkt weiterbauen

Zwei Dinge, die dich sonst überraschen.

Claude Design ist Beta und läuft ab dem Pro-Abo. In Firmenkonten sind sowohl das Produkt als auch die Anbindungen standardmäßig aus — das muss eure Verwaltung freischalten. Und es teilt sich das Nutzungslimit mit Chat, Cowork und Claude Code: wer viel gestaltet, merkt das an anderer Stelle.

NÄCHSTER SCHRITT

Direkt umsetzen

Eine halbe Stunde, dann hast du deine Marke hinterlegt

Quelle wählen

Code vorhanden? Dann das Repo. Sonst Design-Dateien. Wenn beides fehlt, nimm deine Webseite.

System anlegen und prüfen

Prompt von Seite 3 nutzen und die Palette einmal ansehen, bevor du weiterbaust.

Eine echte Sache bauen

Nimm etwas, das du diese Woche ohnehin brauchst — ein Angebot, eine Präsentation. Nicht ein Testprojekt.

Einmal ins Terminal holen

Mit /design-sync das System in Claude Code ziehen. Ab da entsteht Code direkt in deinem Stil.

Grundlage: Anthropic zu Claude Design (Beta, verfügbar ab Pro; Design-System-Import aus Repo, Dateien oder Upload mit Abgleich vor der Ausgabe; Export als PDF und PowerPoint; Anbindungen an Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel, Wix; /design und /design-sync in Claude Code). Beta-Produkte ändern sich schnell — prüf im Zweifel, was bei dir angezeigt wird.

Zurück zur Bibliothek PDF-Version