Claude für Prototypen und UX verwenden

Eine Feature-Idee lässt sich leichter beurteilen, wenn Menschen sich durchklicken können. Mit Claude Design beschreibst du das Feature in einer Unterhaltung, und Claude erstellt einen Prototyp, den dein Team öffnen und ausprobieren kann. Wenn Claude dein Designsystem hat, baut es den Prototyp aus deinen eigenen Komponenten, also den echten Buttons und Formularen deines Produkts.

1. Ein Design starten

Du kannst ein Design von überall dort starten, wo du mit Claude arbeitest.

• In jeder Unterhaltung: Bitte um einen Prototyp, ein Mockup oder eine Reihe von Bildschirmen, im Web oder in der Desktop-App.
• Über die Seitenleiste: Öffne Artefakte, wähle Design unter Etwas Neues erstellen und beschreibe in der sich öffnenden Unterhaltung, was du möchtest.
• In Claude Code, innerhalb deines Repositorys: Frage auf die gleiche Weise. Dort kann Claude auch den Code deines Produkts lesen, wie Abschnitt 3 erklärt.

Das Design öffnet sich neben der Unterhaltung auf einer Leinwand, die du schwenken und zoomen kannst. Jeder Bildschirm befindet sich auf seinem eigenen Artboard. Das Design wird unter Artefakte gespeichert, und andere Personen können es erst öffnen, wenn du es teilst.

2. Das Feature prototypisieren

Hier sind einige Arten von Prototypen, um die du bitten kannst, mit Prompts zum Ausprobieren.

Ein neues Feature

Beschreibe den Bildschirm, seine Abschnitte und wie sie sich verhalten.

• „Entwirf eine neue Einstellungsseite für unsere SaaS-App mit Abschnitten für Konto, Abrechnung, Benachrichtigungen und Integrationen. Füge eine Seitenleisten-Navigation hinzu und mache jeden Abschnitt ausklappbar."
• „Prototypisiere eine Sucherfahrung mit Filtern, facettierten Ergebnissen und einem Detailbereich, der von rechts einblendet, wenn man auf ein Ergebnis klickt. Mach es klickbar."
• „Baue eine Genehmigungs-Workflow-UI, in der Manager eingereichte Anfragen in einer Warteschlange prüfen, kommentieren und genehmigen oder ablehnen können."

Alternativen für eine Design-Review

Bitte um jeden Ansatz auf seinem eigenen Artboard. Du und deine Reviewer könnt sie dann nebeneinander vergleichen.

• „Zeig mir drei verschiedene Layouts für eine Benutzerprofilseite: eines kartenbasiert, eines mit einer linken Seitenleiste und eines mit oberer Tab-Navigation. Setze jedes auf sein eigenes Artboard."
• „Erstelle zwei Versionen dieses Checkout-Flows auf separaten Artboards, eine einseitig und eine mehrstufig, damit ich sie in einer Design-Review vergleichen kann."

Ein ganzer Flow

Beschreibe die Journey Schritt für Schritt.

„Zeichne den Flow für einen Nutzer auf, der von einem kostenlosen Plan auf einen kostenpflichtigen Plan upgraden möchte. Beginne beim Dashboard, wo er die Upgrade-Aufforderung sieht, über die Plan-Vergleichsseite, das Zahlungsformular, die Bestätigung, bis zum aktualisierten Dashboard mit freigeschalteten Premium-Funktionen."

Interne Tools und Admin-Panels

Claude Design eignet sich gut für interne Tools wie Admin-Panels und Moderationswarteschlangen. Menschen können sich durch den Prototyp klicken und sehen, ob die Schritte funktionieren, bevor die Bildschirme ausgefeilt sind.

„Entwirf ein Admin-Panel zur Verwaltung von Benutzerkonten: eine durchsuchbare Tabelle mit Filtern für Plantyp und Status sowie eine Detailschublade, die den Kontoverlauf zeigt und das Ändern von Berechtigungen erlaubt."

Claude hat möglicherweise nicht jede Tatsache, etwa deine tatsächlichen Preise. Es fragt dich vielleicht oder trifft eine Annahme. Überprüfe Claudes Arbeit immer und kontrolliere die Details, bevor du das Design teilst. Um mehr darüber zu erfahren, wie man Claudes Ausgabe bewertet, lies Wie Menschen Claudes Arbeit überprüfen, unseren Bildungsbericht.

3. Mit deinen eigenen Komponenten bauen

Claude kann einen Prototyp mit deinen echten Komponenten bauen, denselben Buttons und Formularen, die dein Produkt bereits verwendet. Der Prototyp entspricht dann dem, was Entwickler bauen werden. Ohne deine Komponenten zeichnet Claude seine eigene Version, die nur ähnlich aussieht.

Du kannst auf eine der folgenden Arten einen Prototyp erhalten, der zu deinem Produkt passt:

• Ein Designsystem einrichten (empfohlen): Ein Designsystem hält deine Farben, Schriftarten und Komponenten an einem Ort in Claude. Sobald deine Organisation einen Standard festgelegt hat, verwendet Claude ihn für jedes Design, das dein Team startet. Siehe Ein Designsystem in Claude einrichten.
• Aus Claude Code im Repository arbeiten: Bitte um das Design aus einer Claude-Code-Sitzung innerhalb deines Projekts. Claude kann den Code lesen und die Farben, Schriftarten und Abstände übernehmen, die dein Produkt bereits verwendet. Dies erfordert keine Einrichtung.

Egal, wofür du dich entscheidest, diese Gewohnheiten helfen:

• Benenne Komponenten in deinen Prompts: „verwende die ProductCard-Komponente" oder „folge demselben Layout wie die Einstellungsseite" sagt Claude, welche es verwenden soll.
• Weise Claude auf den Interface-Code hin: In einem großen Repository sag Claude, welches Paket oder welcher Ordner die Komponenten enthält.
• Um eine Komponente zu ändern, frag Claude: Deine echten Komponenten erscheinen auf dem Artboard genau so, wie sie in deinem Code sind.
• Aktualisiere nach Änderungen an der Bibliothek: Ein aus deinem Code synchronisiertes Designsystem behält eine Kopie deiner Komponenten vom letzten Sync. Synchronisiere es nach einem Release erneut.

4. Auf den Artboards verfeinern

Du kannst ein Design selbst ändern, einen Kommentar für Claude hinterlassen oder in der Unterhaltung fragen. Änderungen werden gespeichert, während du sie vornimmst, es gibt also keinen Speichern-Button.

• Von Hand: Klicke auf ein Element, um es auszuwählen, doppelklicke auf Text, um ihn neu einzugeben, und ziehe, um es zu verschieben. Verwende die Symbolleiste, um Text, Notizen, Formen und neue Artboards hinzuzufügen. Eigenschaften zeigt die Einstellungen für das ausgewählte Element.
• Mit einem Kommentar: Um ein einzelnes Element zu ändern, schalte Kommentare ein, klicke auf das Element, schreibe, was du möchtest, und lasse An Claude senden aktiviert. Claude nimmt die Änderung vor und antwortet im Kommentar-Thread.
• Durch Fragen: Für eine größere Änderung, etwa einen neuen Zustand oder eine weitere Alternative, frag in der Unterhaltung.

Zum Beispiel: „Zeig, wie diese Seite den leeren Zustand, den Fehlerzustand und einen Ladezustand behandelt. Setze jeden auf sein eigenes Artboard neben dem aktuellen."

5. Mit deinem Team überprüfen

Mit Teilen wählst du, wer das Design öffnen kann und ob diese Personen es ansehen, kommentieren oder bearbeiten können. Eingeladene Personen benötigen ein Claude-Konto. Für die Optionen in jedem Plan siehe Artefakte teilen im Help Center.

Was jede Person tun kann, hängt vom Zugriff ab, den du ihr gibst:

• Kann ansehen: Sie öffnen das Design, klicken auf ein beliebiges Element, um dessen Größe, Abstand und Farben zu lesen, und führen ein klickbares Artboard mit Play aus. Sie können nichts ändern.
• Kann kommentieren: Dasselbe, plus Kommentare zu den Elementen, auf die sie klicken.
• Kann bearbeiten: Sie ändern das Design selbst und fügen Notizen auf der Leinwand hinzu. Personen in deiner Organisation, die bearbeiten können, können auch einen Kommentar als Anfrage an Claude senden.

Personen mit Bearbeitungszugriff können gleichzeitig auf der Leinwand arbeiten, und ihr seht die Änderungen der anderen, während sie passieren.

Bei Team- und Enterprise-Plänen entscheidet ein Owner deiner Organisation, ob du außerhalb davon teilen kannst. Für jemanden, der den Link nicht öffnen kann, verwende Exportieren. Du kannst exportieren:

• Ein Artboard als PNG-, PDF- oder HTML-Datei (.zip)
• Den gesamten Prototyp als eine Webseite (HTML), über Teilen > Exportieren
• Jedes Artboard in einer PDF

6. In Claude Code fortfahren

Claude Code kann einen in Claude Design erstellten Prototyp öffnen. Ein Entwickler kann dann von den tatsächlichen Artboards und den darin enthaltenen Komponenten aus bauen, nicht von einem Screenshot.

• Wenn du in Claude Code entworfen hast: Bleib in derselben Sitzung und bitte Claude, es zu bauen. Um später zurückzukommen, öffne das Design über Artefakte und verwende den Button neben Teilen, um die Sitzung, die es erstellt hat, wieder zu öffnen.
• Wenn du woanders entworfen hast: Gib dem Entwickler Bearbeitungszugriff auf das Design. In Claude Code, innerhalb des Repositorys, fügt er den Link des Designs ein und bittet Claude, es umzusetzen.

Bevor du mit dem Build beginnst

Ein paar Schritte machen das Design leichter umsetzbar:

• Benenne Artboards und Komponenten klar: Claude Code liest diese Namen im Design.
• Halte Entscheidungen fest, während du sie triffst: Wenn du dich für Tabs statt einer Seitenleiste entschieden hast, sag warum in einer Notiz auf dem Artboard, wo Claude Code sie lesen kann.
• Bitte zuerst um die leeren, Fehler- und Ladezustände: Frag auch, wie sich der Bildschirm mit sehr wenigen Daten und mit weit mehr als erwartet verhält.

7. Ein Beispiel von der Idee zur Umsetzung

1. Ein PM beschreibt das Feature in einer Unterhaltung. Es handelt sich um ein Benachrichtigungszentrum mit Filterung und Massenaktionen.
2. Claude baut einen ersten Prototyp aus dem Designsystem der Organisation, und ein Designer verfeinert ihn auf den Artboards.
3. Der PM teilt das Design für eine asynchrone Review, und das Team spielt den Prototyp durch und kommentiert.
4. Ein Entwickler öffnet das Design in Claude Code und bittet Claude, es umzusetzen.

Wenn etwas nicht stimmt

Weitere Ressourcen

• Folien und Präsentationen mit Claude erstellen für Präsentationen.
• Ein Designsystem in Claude einrichten, damit Designs deine Komponenten und Schriftarten verwenden.
• Mit deinem Team in Claude-Artefakten zusammenarbeiten dafür, wie Designs mit deinem Team geteilt und bearbeitet werden.
• Besuche das Help Center für weitere Unterstützung und Fehlerbehebung.