Claude Design von Anthropic Labs ermöglicht es Ihnen, Designs, interaktive Prototypen, Präsentationen und mehr zu erstellen, indem Sie mit Claude ein Gespräch führen. Diese Anleitung führt Sie durch die Erstellung Ihres ersten Projekts, die Iteration von Designs und die optimale Nutzung des Tools.
Claude Design von Anthropic Labs ist jetzt in der Forschungsvorschau für Pro-, Max-, Team- und Enterprise-Pläne verfügbar. Diese Funktion ist standardmäßig für Enterprise-Pläne deaktiviert.
Diese Anleitung setzt voraus, dass das Design-System Ihrer Organisation bereits eingerichtet wurde, sodass alles, was Sie erstellen, automatisch die Farben, Typografie und Komponentenmuster Ihrer Marke verwendet. Wenn Sie ein Design-Lead sind, der das Design-System selbst einrichten oder ändern muss, siehe Design-System in Claude Design einrichten.
Wie Claude Design funktioniert
Claude Design hat zwei Hauptbereiche: eine Chat-Schnittstelle auf der linken Seite und eine Canvas auf der rechten Seite. Sie beschreiben, was Sie möchten, im Chat, und Claude generiert ein funktionierendes Design auf der Canvas. Von dort aus iterieren Sie – verfeinern Sie durch Gespräche und Inline-Kommentare, bis es richtig ist.
Der typische Ablauf ist:
Erstellen Sie ein Projekt und fügen Sie relevante Kontexte hinzu (Screenshots, eine Codebasis).
Beschreiben Sie, was Sie erstellen möchten.
Überprüfen Sie, was Claude auf der Canvas generiert.
Iterieren Sie mit Chat-Nachrichten und Inline-Kommentaren.
Exportieren oder teilen Sie, wenn Sie mit dem Ergebnis zufrieden sind.
Neues Projekt erstellen
Wenn Sie ein Projekt erstellen, erbt es automatisch das Design-System Ihrer Organisation. Sie müssen keine Brand-Assets hochladen oder etwas konfigurieren – Ihre Brand-Farben, Schriftarten und Komponenten sind bereits vorhanden.
Kontext zu Ihrem Projekt hinzufügen
Je mehr Kontext Sie Claude geben, desto besser wird Ihre Ausgabe. Sie können Referenzmaterial jederzeit während eines Projekts anhängen.
Screenshots, Bilder oder vorhandene Assets: Laden Sie Screenshots von vorhandenen Designs, Konkurrenzprodukten, Wireframes oder visueller Inspiration hoch. Sie können auch ein vorhandenes Foliendeck oder Dokument mit einem Design-Stil anhängen, den Sie replizieren möchten. Nützlich für „Mach es so aussehen"-Anfragen."
Codebases und vorhandene Design-Dateien: Verknüpfen Sie ein Code-Repository, damit Claude Ihre vorhandenen Komponenten, Architektur und Styling-Muster versteht. Dies macht Prototypen von Anfang an produktionsreifer. Der Import unterstützt auch mehrere Möglichkeiten zum Hochladen vorhandener Produktdesign-Arbeiten.
Schreiben Sie effektive Prompts
Sie müssen kein Designer sein, um großartige Ergebnisse zu erzielen. Seien Sie spezifisch darüber, was Sie erstellen, für wen es ist und was am wichtigsten ist.
Ein guter Prompt enthält das Ziel (was Sie erstellen), das Layout (wie Dinge angeordnet werden sollten), den Inhalt (welche Informationen angezeigt werden sollen) und die Zielgruppe (wer es verwenden wird). Claude wird auch Klärungsfragen stellen, wenn es mehr Informationen benötigt.
Hier sind einige Beispiele für Prompts, die gut funktionieren:
„Erstellen Sie ein Dashboard, das monatliche Einnahmen mit Filtern für Region und Produktlinie anzeigt.
„Entwerfen Sie einen mobilen App-Onboarding-Flow mit 4 Bildschirmen, der Benutzer durch unsere Kernfunktionen führt.
„Erstellen Sie eine Landing Page für unser neues API-Produkt mit einem Hero-Bereich, Code-Beispielen und Preisen.
„Erstellen Sie ein Formular zum Sammeln von Kundenfeedback mit bedingten Fragen basierend auf der Kategorie.
„Entwerfen Sie ein internes Tool für Ihr Ops-Team, um Inhaltseinreichungen zu überprüfen und zu genehmigen.
Iterieren Sie Ihr Design
Die erste Generation ist ein Ausgangspunkt. Der echte Wert kommt aus der Iteration.
Chat verwenden
Chat ist am besten für umfangreiche Änderungen, die das Gesamtdesign beeinflussen:
„Machen Sie das Farbschema dunkler und minimalistischer.
„Ordnen Sie das Dashboard so an, dass Metriken in der oberen Reihe und das Diagramm darunter sind.
„Fügen Sie ein Einstellungsfenster auf der rechten Seite hinzu.
„Zeigen Sie mir 2–3 alternative Layouts für diese Seite.
Sie können Claude auch bitten, seine Design-Entscheidungen zu erklären, Verbesserungen vorzuschlagen oder das Design auf Barrierefreiheit zu überprüfen.
Inline-Kommentare verwenden
Mit Inline-Kommentaren können Sie direkt auf einen bestimmten Teil der Canvas klicken und eine gezielte Änderung anfordern. Dies ist schneller, als den Ort im Chat zu beschreiben.
Beispiele für gute Inline-Kommentare:
„Machen Sie diesen Button-Abstand größer.
„Ändern Sie dies in ein Dropdown-Menü statt Optionsschaltflächen.
„Verwenden Sie hier die primäre Brand-Farbe.
„Machen Sie diesen Bereich einklappbar.
Hinweis: Wenn Ihre Kommentare nicht aufgegriffen werden, fügen Sie das Feedback stattdessen direkt in den Chat ein. Dies ist eine bekannte Umgehung für ein intermittierendes Problem, bei dem Kommentare verschwinden können, bevor Claude sie liest.
Wann Chat vs. Kommentare verwendet werden
Verwenden Sie Kommentare für gezielte, komponentenebene Änderungen („Beheben Sie diesen Button
Verwalten Sie Versionen und Überarbeitungen
Wenn Sie eine andere Richtung erkunden möchten, ohne Ihre aktuelle Arbeit zu verlieren, sagen Sie Claude: „Speichern Sie, was wir haben, und versuchen Sie einen völlig anderen Ansatz.
Exportieren und teilen
Sobald Ihr Design fertig ist, können Sie es mit Kollegen teilen oder für die Verwendung an anderer Stelle exportieren. Das richtige Format hängt von Ihrem Anwendungsfall ab – ob Sie Feedback von Stakeholdern erhalten, an Engineering übergeben oder einer Gruppe präsentieren.
Verwenden Sie die Schaltfläche „Exportieren
Als .zip herunterladen
Als PDF exportieren
Als PPTX exportieren
An Canva senden
Als eigenständiges HTML exportieren
An Claude Code übergeben
An lokalen Coding-Agent senden
An Claude Code Web senden
Sie können Projekte auch innerhalb Ihrer Organisation über einen teilbaren Link teilen. Die Freigabeoptionen umfassen Nur-Ansicht-, Kommentar- und Bearbeitungszugriff.
Abonnementnutzung und Preisgestaltung
Weitere Details finden Sie hier: Claude Design-Abonnementnutzung und Preisgestaltung.
Tipps für beste Ergebnisse
Beginnen Sie einfach, dann schichten Sie Komplexität ein. Beginnen Sie mit dem Kern-Layout und Inhalt, dann fügen Sie Interaktionen, Grenzfälle und Verfeinerungen hinzu. Claude reagiert gut auf inkrementelle Anfragen.
Seien Sie spezifisch in Ihrem Feedback. „Das sieht nicht richtig aus" ist schwer umzusetzen. „Reduzieren Sie den Abstand zwischen Formularfeldern auf 8 Pixel" gibt Claude genau das, was es braucht.
Referenzieren Sie Ihr Design-System. Wenn Sie wissen, dass eine Komponente in Ihrem Brand-System vorhanden ist, erwähnen Sie sie namentlich: „Verwenden Sie die Primary Button-Komponente" oder „Wenden Sie das Card-Layout-Muster an."
Denken Sie früh an Responsivität. Erwähnen Sie, ob Ihr Design auf Mobilgeräten, Tablets und Desktops oder nur auf einem davon funktionieren muss.
Fragen Sie nach Variationen. Wenn Sie sich über eine Richtung unsicher sind, bitten Sie Claude, Ihnen 2–3 Optionen zu zeigen. Der Vergleich von Alternativen ist viel schneller als zu raten.
Fragen Sie Claude um Feedback. Claude kann Ihr Design auf Barrierefreiheit, Kontrastverhältnisse, Informationshierarchie und allgemeine Benutzerfreundlichkeit überprüfen. Behandeln Sie es als Design-Mitarbeiter, nicht nur als Generator.
Bekannte Einschränkungen
Claude Design ist als experimentelle Vorschau von Anthropic Labs verfügbar. Einige Dinge, die Sie beachten sollten:
Kommentar-Persistenz: Inline-Kommentare verschwinden gelegentlich, bevor Claude sie liest. Um dies zu umgehen, fügen Sie den Kommentartext in den Chat ein.
Fehler beim Speichern in kompakter Ansicht: Der kompakte Layout-Modus kann Speicherfehler auslösen. Wenn dies geschieht, wechseln Sie zur Vollansicht und versuchen Sie es erneut.
Große Codebases: Das Verknüpfen sehr großer Repositories kann zu Verzögerungen oder Browser-Problemen führen. Verknüpfen Sie bestimmte Unterverzeichnisse statt ganzer Monorepos.
Chat-Fehler: Wenn Sie einen „Chat-Upstream-Fehler