Einrichten eines Designsystems in Claude

Ein Designsystem bringt Claude deine Marke bei. Sobald es eingerichtet und mit deiner Organisation geteilt ist, können die Präsentationen, Designs und Prototypen, die dein Team mit Claude erstellt, von deinen Farben, deiner Schrift und deinen Komponenten ausgehen.

1. Was ein Designsystem ist

Ein Designsystem sind die Designentscheidungen eines Unternehmens, einmal schriftlich festgehalten, in einer Form, die sowohl Menschen als auch Software wiederverwenden können. In Claude besteht es aus diesen Hauptteilen:

2. Was sich ändert, wenn Claude dein Designsystem hat

Claude kann aus einem Prompt ohne jegliche Einrichtung eine gute Präsentation oder einen guten Screen erstellen. Aber es hat deine Marke noch nicht gesehen, also verwendet es seine eigenen Standardwerte, und das Ergebnis sieht nicht wie dein Unternehmen aus.

Mit deinem Designsystem verwendet Claude deine Farben und deine Schrift sowie die echten Komponenten deines Teams, sofern das Designsystem sie enthält.

Claude verwendet dein Designsystem, wenn es Präsentationen, Designs und Prototypen erstellt. Deine Farben, Schriftstile und Schriftarten gelten für alle davon, und Designs und Prototypen können außerdem deine echten Komponenten verwenden. Um zu sehen, welche Komponente Claude in einem Design verwendet hat, wähle diesen Teil des Designs aus. Sein Umriss hat eine andere Farbe, und die Ebenen-Liste zeigt seinen Namen.

3. Bevor du beginnst

• Designsysteme befinden sich in der Beta-Phase bei Pro-, Max-, Team- und Enterprise-Plänen. Sie sind im Free-Plan nicht verfügbar.
• Bei Team- und Enterprise-Plänen steuern Owner die Vorlage Designsysteme unter Organisationseinstellungen > Artefakte. Bei Enterprise ist sie zunächst ausgeschaltet. Wenn du Designsystem an den unten beschriebenen Stellen nicht siehst, ist diese Einstellung als Erstes zu prüfen.
• Jeder mit Zugriff kann ein Designsystem erstellen, verwenden und mit bestimmten Personen teilen. Um eines mit der gesamten Organisation zu teilen oder es zum Standard zu machen, ist ein Owner deiner Organisation erforderlich (Abschnitt 7).
• Wenn dein Team bereits ein Designsystem im eigenständigen Claude Design (claude.ai/design) hat, kannst du es übernehmen, anstatt es neu aufzubauen. Siehe Migration vom eigenständigen Claude Design weiter unten.

4. Ein Designsystem erstellen

Ein neues starten

Du kannst ein Designsystem aus dem Nachrichtenfeld in jeder Unterhaltung oder über die Einstellungen starten.

Aus dem Nachrichtenfeld: Öffne das +-Menü, wähle Designsystem und dann Neues Designsystem. Du hast zwei Möglichkeiten:

• Mit Claude öffnet ein leeres Designsystem neben einer neuen Unterhaltung, in der du Markendateien hochladen, Inhalte aus deinen verbundenen Tools abrufen oder die Marke beschreiben kannst.
• Mit Claude Code ist für ein Designsystem gedacht, das bereits in einem Code-Repository existiert. Claude Code liest die Tokens und Komponenten deines Repos.

Über die Einstellungen: Einstellungen > Designsysteme listet die Designsysteme auf, die du verwenden kannst, und enthält eine Schaltfläche Neues Designsystem.

Ein Designsystem ist selbst ein Artefakt. Es ist eine Seite, die du öffnen, bearbeiten und teilen kannst, und sie erscheint auf der Artefakte-Seite zusammen mit dem Rest deiner Arbeit.

Eine Methode zum Ausfüllen wählen

Ein neues Designsystem öffnet sich als leere Seite mit der Frage Nicht sicher, wo du anfangen sollst? und einer Karte für jede Methode zum Ausfüllen. Wähle eine Karte, und Claude beginnt in der Unterhaltung neben der Seite. Bei Markendateien hochladen fügst du zuerst deine Dateien hinzu und wählst dann Designsystem erstellen.

Von GitHub synchronisieren

Verwende dies, wenn deine Farben, Schrift und Komponenten bereits im Code existieren. Claude fragt, welches Repository es lesen soll und was du übernehmen möchtest. Es liest den Code, füllt die Seite aus und ist so konzipiert, dass es dein Repository unverändert lässt.

• Farben, Schriftstile, Abstände, Eckenradien, Schriftarten, Logos und Dokumentation werden importiert.
• Komponenten sind deine Wahl. Claude listet die gefundenen Komponenten auf und fragt, welche einbezogen werden sollen. Um sie zu übernehmen, muss Claude den Build deines Projekts ausführen, daher fragt es dich zuerst.
• Sag Claude, welcher Ordner den Interface-Code enthält, damit es weniger lesen muss als das gesamte Repository.
• Du kannst später erneut synchronisieren. Geänderte Werte werden aktualisiert, neue werden hinzugefügt, und deine Nutzungshinweise, der Übersichtstext, Schriftarten und Assets bleiben erhalten. Wenn der Code ein Token nicht mehr definiert, listet Claude es auf und fragt nach, bevor es entfernt wird.

Aus Konnektoren erstellen

Verwende dies, wenn deine Marke in einem Design-Tool, einem gemeinsamen Laufwerk oder einem Wiki aufbewahrt wird, das du mit Claude verbunden hast. Claude prüft, welcher deiner Konnektoren Marken- oder Designarbeiten enthält, teilt dir mit, was es gefunden hat, und bietet an, daraus zu erstellen.

Wenn du nichts verbunden hast, stellt Claude dir ein paar kurze Fragen zu deiner Marke und erstellt einen Entwurf aus deinen Antworten.

Markendateien hochladen

Verwende dies, wenn deine Marke in Dateien aufbewahrt wird, etwa Logos, Schriftarten, ein Richtlinien-PDF, eine Token-Datei oder ein paar fertige Folien oder Screens. Claude liest die Dateien, die du hinzufügst, und schreibt daraus einen ersten Entwurf des Designsystems.

• Dateien, die deine Marke in Gebrauch zeigen, etwa fertige Präsentationen und Produkt-Screenshots, geben Claude mehr Material, mit dem es arbeiten kann, als ein Richtlinien-PDF allein.
• Der erste Entwurf ist bewusst klein gehalten. Claude fragt dann, ob das ausreicht oder ob es weiter ausgebaut werden soll.
• Claude ist so konzipiert, dass es nachfragt, bevor es einen Wert ausfüllt, den deine Dateien nicht zeigen.

Migration vom eigenständigen Claude Design

Wenn dein Team Designsysteme im eigenständigen Claude Design (claude.ai/design) erstellt hat, kannst du sie in Claude übernehmen, anstatt sie neu aufzubauen. Bis sie migriert sind, tragen sie ein Standalone-Tag in Einstellungen > Designsysteme, und Claude kann sie in Unterhaltungen nicht verwenden.

Eine Migration deckt deine gesamte Organisation ab, sodass eine Person sie für alle durchführt, und diese Person muss kein Owner sein. Sie beginnt auf der Seite Artefakte. Die Originale ändern sich nicht.

Jedes migrierte Designsystem hat noch einen Schritt übrig. Der Owner des Designsystems öffnet es, wählt Migration abschließen und sendet die Anfrage an Claude. Wenn eine Meldung besagt, dass die Anfrage kopiert wurde, füge sie in eine Unterhaltung mit Claude ein und sende sie. Claude organisiert die Dateien dann neu, sodass du jeden Abschnitt in der Vorschau ansehen und auf der Seite bearbeiten kannst. Bis dahin kannst du Claude weiterhin bitten, Änderungen vorzunehmen.

Die eigenständige Version wird eingestellt. Für das Datum, was geteilt wird und was zu tun ist, wenn ein Designsystem nicht migriert werden kann, siehe den Help-Center-Artikel zur Migration.

5. Die Seite durchsehen und Hinweise für Claude hinterlassen

Die Seite des Designsystems ist der Ort, an dem dein Team es überprüft und bearbeitet, und an dem du Nutzungshinweise hinterlässt, die Claude sagen, wie es zu verwenden ist.

Die Seite

Du kannst den Übersichtstext, Token-Werte, Hinweise, Schriftarten und Assets direkt auf der Seite bearbeiten. Um ein Theme hinzuzufügen oder den Code einer Komponente zu ändern, frage Claude in der Unterhaltung neben der Seite.

Nutzungshinweise

Während du dein Designsystem überprüfst, kannst du Nutzungshinweise für Claude hinterlassen. Ein Hinweis sagt Claude, wie eine Farbe, ein Schriftstil oder eine Komponente zu verwenden ist – und wann nicht. Claude liest den Hinweis einer Komponente, bevor es mit dieser Komponente baut.

6. Wie Claude es beim Erstellen verwendet

Bei jeder Anfrage liest Claude zuerst die Übersicht und dann nur die Teile deines Designsystems, die für die Aufgabe benötigt werden.

Wenn deine Organisation ein Standard-Designsystem hat, verwendet Claude es, ohne zu fragen. Wenn sie Designsysteme, aber keinen Standard hat, fragt Claude, welches verwendet werden soll.

7. Mit deiner Organisation teilen

Zunächst kannst nur du ein neues Designsystem verwenden. Du kannst es mit bestimmten Personen teilen, und ein Owner deiner Organisation kann es mit allen teilen und zum Standard machen.

Schritt für Schritt

1. Probiere es zuerst selbst aus: Dein Designsystem befindet sich in deinem Menü + > Designsystem, sobald Inhalte darin gespeichert sind. Bitte um eine gewöhnliche Präsentation und sage nichts über die Marke. Wenn die Präsentation wie dein Unternehmen aussieht, funktioniert das Designsystem.
2. Teile es mit den Personen, die es überprüfen sollen: Wähle Teilen oben auf der Seite des Designsystems und lade sie ein. Es erscheint in ihrem Menü + > Designsystem unter Mit dir geteilt. Gib Bearbeitungszugriff an alle, die es ändern können sollen.
3. Lass einen Owner deiner Organisation es mit allen teilen: Lade ihn zuerst über Teilen ein und gib ihm Owner-Zugriff. In Teilen stellt er dann die Zielgruppe auf Jeder bei [deine Organisation] ein und bestätigt. Danach befindet sich das Designsystem im Menü jedes Teammitglieds.
4. Mache es zum Standard, wenn du einen möchtest: Sobald es mit allen geteilt ist, schaltet ein Owner deiner Organisation Standard-Designsystem in Teilen ein oder wählt Als Standard festlegen daneben in Einstellungen > Designsysteme. Es gibt einen Standard pro Organisation, und das Festlegen eines neuen ersetzt den alten.

Alle deine Designsysteme an einem Ort sehen

Einstellungen > Designsysteme listet deine eigenen Designsysteme auf, die mit dir geteilten und die mit deiner Organisation geteilten. Designsysteme verwalten, am unteren Rand des Menüs + > Designsystem, öffnet dieselbe Seite.

• Die Spalte Nutzbar von gibt an, wer jedes davon verwenden kann, und der Standard trägt ein Standard-Abzeichen.
• Designsysteme, die sich noch im eigenständigen Claude Design befinden, tragen ein Standalone-Tag.
• Du kannst deine eigenen über das Zeilenmenü öffnen, teilen, umbenennen oder löschen.

Owner von Team- und Enterprise-Organisationen sehen außerdem jedes mit der Organisation geteilte Designsystem unter Organisationseinstellungen > Artefakte und können dort den Standard festlegen oder entfernen.

8. Im Alltag verwenden

Was deine Teammitglieder sehen

Sobald ein Designsystem mit allen geteilt ist, befindet es sich im Menü + > Designsystem jedes Teammitglieds. Sobald es der Standard ist, ist es bereits ausgewählt, wenn sie eine Präsentation oder ein Design starten.

Der Standard ersetzt kein Designsystem, das du auf demselben Gerät bereits ausgewählt hast. Um in einer Unterhaltung keines zu verwenden, deaktiviere jedes Kontrollkästchen, und der Chip unter dem Nachrichtenfeld zeigt Kein Designsystem.

Aktuell halten

Du kannst dein Designsystem auf verschiedene Weise aktualisieren:

• Kleine Änderungen: Bearbeite die Seite. Werte, Übersichtstext und Hinweise werden fortlaufend gespeichert.
• Größere Änderungen: Frage Claude in der Unterhaltung neben der Seite. So fügst du ein Theme hinzu oder änderst eine Komponente.
• Ein Designsystem, das aus Code stammt: Ändere den Code und synchronisiere dann erneut von GitHub. Deine Hinweise und Seitenbearbeitungen bleiben erhalten.
• Präsentationen und Designs, die du bereits erstellt hast: Jedes behält seine eigene Kopie des Designsystems vom Zeitpunkt der Erstellung. Bitte Claude, sie zu aktualisieren.

Fehlerbehebung

Weitere Ressourcen

• Folien und Präsentationen mit Claude erstellen und Claude für Prototypen und UX verwenden zeigen das Designsystem im Einsatz.
• Mit deinem Team in Claude-Artefakten zusammenarbeiten zum Teilen und Bearbeiten von Präsentationen und Designs.
• Besuche das Help Center für mehr zu Designsystemen in Claude Design und der Migration vom eigenständigen Claude Design. Owner finden die Einstellungen für ihre Organisation im Artefakte-Admin-Leitfaden.