Ein Design-System erfasst Ihre Farben, Typografie, Komponenten und Layout-Muster, damit Claude diese auf jedes neue Design und Deck anwendet. Claude extrahiert sie aus den Assets, die Sie bereitstellen, wie Codebases, Slide Decks oder andere Design-Referenzen.
Design-Systeme sind in der Beta-Phase auf Pro-, Max-, Team- und Enterprise-Plänen verfügbar. Sie sind standardmäßig auf Pro-, Max- und Team-Plänen aktiviert. Bei Enterprise-Plänen sind sie deaktiviert, bis ein Besitzer Design-Systeme in Organisationseinstellungen > Artifacts aktiviert. Standalone Claude Design unter claude.ai/design hat eine eigene separate Einstellung.
Diese Anleitung ist für den Designer oder Brand Owner, der das Design-System einrichtet. Bei Team- und Enterprise-Plänen müssen Sie dies nur einmal tun, und die Arbeit aller anderen wird danach automatisch aktualisiert.
Bevor Sie beginnen
Bei Team- und Enterprise-Plänen muss Design-Systeme für Ihre Organisation aktiviert sein, und ein Besitzer kann einschränken, wer veröffentlichen oder den Standard festlegen kann.
Sie benötigen mindestens eines der folgenden Elemente als Quellmaterial:
Eine Codebase mit Ihrem Design-System oder einer Komponentenbibliothek
Ein Slide Deck oder Dokument, das Ihre visuelle Identität widerspiegelt
Brand-Guideline-Assets (Logos, Farbpaletten, Typografie-Spezifikationen)
Erstellen Sie ein Design-System
Aus einem Chat
Bitten Sie Claude, ein Design-System aus Ihren verbundenen Apps, hochgeladenen Dateien, Figma-Dateien, Decks, Logos und Schriftarten zu erstellen. Dies funktioniert am besten für Brand-Design-Systeme mit Schriftarten, Farben und Richtlinien.
Aus Claude Code
Wenn Ihr Design-System bereits als React-Komponenten vorhanden ist, führen Sie /design-sync in Claude Code aus. Es liest Ihre Tokens und Komponenten direkt und funktioniert am besten für Produkt-Design-Systeme im Code.
Bringen Sie ein Design-System von claude.ai/design mit
Öffnen Sie die Registerkarte "Design" am unteren Ende der Seitenleiste.
Klicken Sie auf "Team-Design-Systeme migrieren" im Banner.
Jedes Design-System wird zu einem Artifact, das Claude in jedem Chat verwenden kann, auch in Claude Code. Migrierte Design-Systeme benötigen möglicherweise etwas Bereinigung, daher zeigt jedes einen Banner an, in dem Sie auf "Lass Claude es aufräumen" klicken können, und Claude räumt seine Anleitung, Tokens und Komponenten auf.
Verwalten Sie Ihre Design-Systeme
Verwalten Sie Ihre Design-Systeme in Einstellungen > Design-Systeme. Bei Enterprise-Plänen können Administratoren das Veröffentlichen, das Festlegen des Organisationsstandardwerts und das Löschen von Design-Systemen für bestimmte Benutzer reservieren. Weitere Informationen finden Sie im Artifacts-Administratorhandbuch für Team- und Enterprise-Pläne.
Richten Sie ein Design-System unter claude.ai/design ein
Diese Schritte verwenden Standalone Claude Design.
Erstellen oder wechseln Sie zu Ihrer Organisation
Öffnen Sie Claude Design.
Klicken Sie in der unteren linken Ecke der Projektauswahl auf den Namen der aktuellen Organisation.
Wählen Sie Ihre Organisation aus, oder erstellen Sie eine neue.
Schließen Sie den Onboarding-Prozess ab, zu dem Sie weitergeleitet werden.
Laden Sie Ihre Brand- und Produkt-Assets hoch
Laden Sie während des Onboardings oder später über Ihre Organisationseinstellungen die Assets hoch, die Ihre Brand und Ihr Produkt definieren. Claude analysiert sie und extrahiert ein wiederverwendbares Design-System.
Codebases: Wenn Ihr Design-System im Code vorhanden ist, wie eine React-Komponentenbibliothek, verknüpfen oder laden Sie das Repository hoch. Claude liest die Komponenten und Stile.
Prototypen: Screenshots, Web-Flows und vorhandene Design-Dateien.
Slide Decks oder Dokumente: Auch eine gut gestaltete PowerPoint oder PDF, die Ihre Brand widerspiegelt, kann funktionieren. Claude extrahiert Farben, Layout-Muster und typografische Entscheidungen.
Einzelne Assets: Logos, Farbpaletten-Dateien, Typografie-Muster.
Sie benötigen nur eine Quelle, um zu beginnen, aber mehr Quellen geben Claude mehr Material zum Arbeiten.
Überprüfen Sie das generierte Design-System
Nach dem Hochladen generiert Claude ein Design-System für Ihre Organisation. Dies umfasst normalerweise:
Farbpalette: Primäre, sekundäre und Akzentfarben, die aus Ihren Assets extrahiert wurden.
Typografie: Schriftfamilien, Größen und Gewichte.
Komponenten: Schaltflächen, Karten, Navigationselemente und andere wiederverwendbare UI-Muster.
Layout-Muster: Abstände, Rastersysteme und Seitenstrukturen.
Um es zu validieren, erstellen Sie ein Testprojekt und überprüfen Sie, ob die Ausgabe Ihrer Brand entspricht. Versuchen Sie Prompts wie:
"Erstellen Sie eine Landing Page für [Ihr Produkt]."
"Entwerfen Sie ein Dashboard mit [relevanten Metriken]."
"Erstellen Sie ein One-Pager über [ein Thema, das Ihr Team häufig präsentiert]."
Machen Sie es für Ihr Team verfügbar
Wenn Sie mit dem Design-System zufrieden sind, aktivieren Sie den Schalter "Veröffentlicht". Nach der Veröffentlichung verwenden Projekte, die vom Claude Design-Startbildschirm in Ihrer Organisation erstellt werden, Ihr Design-System anstelle des Standards.
Aktualisieren Sie Ihr Design-System
Wenn sich Ihr Design-System ändert, können Sie es in Claude Design aktualisieren. Klicken Sie in den Organisationseinstellungen von Claude Design auf die Schaltfläche "Öffnen" neben dem Design-System, das Sie bearbeiten möchten. Klicken Sie auf die Schaltfläche "Remix" in der oberen rechten Ecke, um die Chat-Schnittstelle auf der linken Seite des Fensters zu öffnen. Von hier aus können Sie mit Claude zusammenarbeiten, um Ihr Design-System zu ändern.
Tipps für beste Ergebnisse
Fügen Sie echte Beispiele ein, nicht nur Spezifikationen. Eine fertige Landing Page oder Marketing-Website sagt Claude mehr über das Gefühl Ihrer Brand aus als nur eine Farbpalette.
Iterieren Sie. Wenn die erste Extraktion Ihre Brand nicht gut erfasst, versuchen Sie, zusätzliche oder andere Assets hochzuladen.