Ein Designsystem ermöglicht es Claude Design, Ausgaben zu erstellen, die Ihren Spezifikationen entsprechen. Es extrahiert wiederverwendbare Komponenten, Farben, Typografie und Muster aus den von Ihnen bereitgestellten Assets – Codebases, Präsentationen oder andere Designreferenzen – und nutzt sie als Grundlage für jedes Projekt, das in Ihrem Konto erstellt wird.
Claude Design von Anthropic Labs ist jetzt in der Forschungsvorschau für Pro-, Max-, Team- und Enterprise-Pläne verfügbar. Diese Funktion ist für Enterprise-Pläne standardmäßig deaktiviert.
Diese Anleitung richtet sich an den Designer oder Markeninhaber, der das Designsystem einrichtet. Sie müssen dies nur einmal tun; nach der Einrichtung verwenden alle Projekte der Teammitglieder es automatisch (für Team- und Enterprise-Pläne).
Voraussetzungen
Berechtigungen, die von Ihrem Organisationsadministrator für die Einrichtung des Designsystems gewährt werden.
Mindestens eines der folgenden als Quellmaterial:
Eine Codebasis mit Ihrem Designsystem 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 Designsystem 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 Onboardings (oder später in Ihren Organisationseinstellungen) die Assets hoch, die Ihre Marke und Ihr Produkt definieren. Claude analysiert sie und extrahiert ein wiederverwendbares Designsystem.
Was Sie hochladen sollten:
Codebases: Wenn Ihr Designsystem 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 Designdateien.
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 Designsystem
Nach dem Hochladen generiert Claude ein Designsystem (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 Designsystem zu validieren, erstellen Sie ein Testprojekt und prüfen Sie, ob die Ausgabe Ihren Markenerwartungen entspricht. Versuchen Sie Prompts wie:
"Erstellen Sie eine Landingpage für [Ihr Produkt]."
"Entwerfen Sie ein Dashboard mit [relevanten Metriken]."
"Erstellen Sie eine Präsentation ü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 Designsystems 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 Designsystem anstelle des Standards.
Tipps für beste Ergebnisse
Fügen Sie echte Beispiele ein, nicht nur Spezifikationen. Eine fertige Landingpage 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 Designsystem
Marken entwickeln sich weiter. Wenn sich Ihr Designsystem ändert, können Sie es in Claude Design aktualisieren. Klicken Sie in Ihren Claude Design-Organisationseinstellungen auf die Schaltfläche "Öffnen" neben dem Designsystem, 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 Designsystem zu ändern.