Ein Design-System ermöglicht es Claude Design, Ausgaben zu erstellen, die Ihren Spezifikationen entsprechen. Es extrahiert wiederverwendbare Komponenten, Farben, Typografie und Muster aus den Assets, die Sie bereitstellen – Codebases, Präsentationen oder andere Design-Referenzen – und nutzt sie als Grundlage für jedes Projekt, das in Ihrem Konto erstellt wird.
Claude Design ist in der Beta-Phase für Pro-, Max-, Team- und Enterprise-Pläne verfügbar. Es ist nicht im kostenlosen Plan verfügbar. Es ist standardmäßig in Pro- und Max-Plänen aktiviert und kann unter Einstellungen > Funktionen deaktiviert werden. Es ist auch standardmäßig in Team-Plänen aktiviert. In Enterprise-Plänen ist es standardmäßig deaktiviert, bis ein Inhaber es unter Organisationseinstellungen > Artefakte aktiviert. Die eigenständige Claude Design-Erfahrung unter claude.ai/design funktioniert weiterhin und hat eine eigene separate Einstellung.
Diese Anleitung ist für den Designer oder Markeninhaber, der das Design-System einrichtet. Sie müssen dies nur einmal tun; nach der Einrichtung verwenden alle Projektmitglieder automatisch das System (für Team- und Enterprise-Pläne).
Hinweis: Wenn Sie Claude Design außerhalb von claude.ai/design verwenden, verwalten Sie Design-Systeme unter Einstellungen > Design-Systeme. Um ein vorhandenes Design-System zu migrieren, klicken Sie auf "Team-Design-Systeme migrieren" im Banner auf der Registerkarte Design. Migrierte Design-Systeme benötigen möglicherweise eine Bereinigung, daher zeigt jedes ein Banner an, in dem Sie auf "Claude aufräumen lassen" klicken können, und Claude bereinigt die Anleitung, Token und Komponenten. Die folgenden Schritte verwenden das eigenständige Claude Design unter claude.ai/design.
Voraussetzungen
Berechtigungen von Ihrem Organisationsadministrator für die Einrichtung des Design-Systems.
Mindestens eines der folgenden als Quellmaterial:
Eine Codebase mit Ihrem Design-System oder einer Komponentenbibliothek
Eine Präsentation oder ein Dokument, das Ihre visuelle Identität widerspiegelt
Markenrichtlinien-Assets (Logos, Farbpaletten, Typografie-Spezifikationen)
Schritt 1: Erstellen oder wechseln Sie zu Ihrer Organisation
So richten Sie das Design-System Ihrer Organisation ein:
Ö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.
Sie werden zum Onboarding-Prozess weitergeleitet. Schließen Sie ihn ab.
Schritt 2: Laden Sie Ihre Marken- und Produkt-Assets hoch
Laden Sie während des Onboarding (oder später in Ihren Organisationseinstellungen) die Assets hoch, die Ihre Marke und Ihr Produkt definieren. Claude analysiert sie und extrahiert ein wiederverwendbares Design-System.
Was hochzuladen ist:
Codebases: Wenn Ihr Design-System im Code vorhanden ist (z. B. eine React-Komponentenbibliothek), können Sie das Repository verlinken oder hochladen. Claude liest die Komponenten und Stile.
Prototypen: Screenshots, Web-Flows und vorhandene Design-Dateien.
Präsentationen oder Dokumente: Auch eine gut gestaltete PowerPoint oder PDF, die Ihre Marke widerspiegelt, kann funktionieren. Claude extrahiert Farben, Layout-Muster und typografische Entscheidungen.
Einzelne Assets: Logos, Farbpaletten-Dateien, Typografie-Muster.
Sie benötigen nur eine Quelle zum Einstieg, aber mehrere Quellen geben Claude mehr Material zum Arbeiten.
Schritt 3: Überprüfen Sie das generierte Design-System
Nach dem Hochladen generiert Claude ein Design-System (UI-Kit) 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 Ihr Design-System zu validieren, erstellen Sie ein Test-Projekt und prüfen Sie, ob die Ausgabe Ihren Markenerwartungen 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]."
Schritt 4: Machen Sie es Ihrem Team verfügbar
Wenn Sie mit der Qualität des Design-Systems zufrieden sind, stellen Sie sicher, dass der Schalter "Veröffentlicht" aktiviert ist. Nach der Veröffentlichung verwenden alle Projekte, die vom Claude Design-Startbildschirm aus erstellt werden, während Sie sich in Ihrer Organisation befinden, Ihr Design-System anstelle des Standards.
Andere Möglichkeiten, ein Design-System zu erstellen
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 Token und Komponenten direkt und funktioniert am besten für Produkt-Design-Systeme im Code.
Aus einer Konversation: Bitten Sie Claude, ein Design-System aus Ihren verbundenen Apps, hochgeladenen Dateien, Figma-Dateien, Präsentationen, Logos und Schriftarten zu erstellen. Dies funktioniert am besten für Marken-Design-Systeme mit Schriftarten, Farben und Richtlinien.
Tipps für beste Ergebnisse
Beziehen Sie echte Beispiele ein, nicht nur Spezifikationen. Eine fertige Landing Page oder Marketing-Website sagt Claude mehr über das Gefühl Ihrer Marke aus als nur eine Farbpalette.
Iterieren Sie. Wenn die erste Extraktion Ihre Marke nicht gut erfasst, versuchen Sie, zusätzliche oder andere Assets hochzuladen.
Aktualisieren Sie Ihr Design-System
Marken entwickeln sich weiter. Wenn sich Ihr Design-System ändert, können Sie es in Claude Design aktualisieren. Klicken Sie in Ihren Claude Design-Organisationseinstellungen 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.