Claude Design ermöglicht es dir, Designs, interaktive Prototypen, Präsentationen und mehr zu erstellen, indem du mit Claude ein Gespräch führst. Diese Anleitung führt dich durch die Erstellung deines ersten Projekts, die Iteration von Designs und die optimale Nutzung des Tools.
Claude Design ist jetzt in der Beta-Version für Pro-, Max-, Team- und Enterprise-Pläne verfügbar. Diese Funktion ist für Enterprise-Pläne standardmäßig deaktiviert. Du kannst sie im Web unter claude.ai/design oder über die Seitenleiste in Claude Desktop verwenden.
Diese Anleitung setzt voraus, dass das Design-System deiner Organisation bereits eingerichtet ist, sodass alles, was du erstellst, automatisch die Farben, Typografie und Komponentenmuster deiner Marke verwendet. Wenn du ein Design-Lead bist, der das Design-System selbst einrichten oder ändern muss, siehe Design-System in Claude Design einrichten.
So funktioniert Claude Design
Claude Design hat zwei Hauptbereiche: eine Chat-Schnittstelle auf der linken Seite und eine Canvas auf der rechten Seite. Du beschreibst, was du möchtest, im Chat, und Claude generiert ein funktionierendes Design auf der Canvas. Von dort aus iterierst du – verfeinern durch Gespräche, Inline-Kommentare und direkt auf der Canvas, bis es richtig ist.
Der typische Ablauf ist:
Erstelle ein Projekt.
Füge das Design-System an oder importiere es, mit dem Claude arbeiten soll.
Füge relevanten Kontext hinzu (Screenshots, eine Codebasis).
Beschreibe, was du erstellen möchtest.
Überprüfe, was Claude auf der Canvas generiert.
Verfeinere durch Chat, bearbeite direkt auf der Canvas oder hinterlasse Inline-Kommentare.
Exportiere oder teile, wenn du mit dem Ergebnis zufrieden bist.
Wechsel zwischen Claude Design und Claude Code
Du kannst zwischen Claude Design und Claude Code wechseln und deine Arbeit synchronisiert halten. Verwende /design-sync, um dein Design-System zu importieren, sodass alles, was du in Claude Design erstellst, von deinen vorhandenen Komponenten ausgeht. Wenn ein Design bereit ist, Software zu werden, kannst du es an Claude Code übergeben, das von deiner vorhandenen Arbeit aus fortfährt, anstatt von vorne anzufangen.
Wenn du lieber von Claude Code aus arbeiten möchtest, verbinde den Claude Design MCP-Server, um Designs zu erstellen und zu bearbeiten, ohne dein Terminal zu verlassen:
Füge den Server hinzu:
claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp
2. Führe /design-login aus, um dich anzumelden.
Sobald du verbunden bist, kannst du ein Design in deine Codebasis importieren, deinen Code als Live-Prototyp exportieren oder Claude das Ganze von Anfang bis Ende erstellen lassen.
Erstelle ein neues Projekt
Wenn du ein Projekt erstellst, erbt es automatisch das Design-System deiner Organisation. Du musst keine Brand-Assets hochladen oder etwas konfigurieren – deine Markenfarben, Schriftarten und Komponenten sind bereits vorhanden.
Füge dein Design-System an oder importiere es
Bringe ein oder mehrere Design-Systeme aus einem GitHub-Repository, Design-Dateien, Raw-Uploads oder deiner lokalen Codebasis mit dem Befehl /design-sync in Claude Code ein. Claude erstellt mit deinen echten Design-System-Komponenten, überprüft seine eigene Ausgabe anhand deines Design-Systems und nimmt Korrektionen vor, bevor du sie siehst.
Für größere Teams ermöglicht die benutzerdefinierte Rolle Claude Design Admin einem Admin, ein Standardsystem zu genehmigen und Bearbeitungen zu sperren, sodass die Arbeit immer deinen Unternehmensrichtlinien entspricht.
Füge Kontext zu deinem Projekt hinzu
Je mehr Kontext du Claude gibst, desto besser wird deine Ausgabe. Du kannst Referenzmaterial jederzeit während eines Projekts anhängen.
Screenshots, Bilder oder vorhandene Assets: Lade Screenshots von vorhandenen Designs, Konkurrenzprodukten, Wireframes oder visueller Inspiration hoch. Du kannst auch ein vorhandenes Foliendeck oder Dokument mit einem Design-Stil anhängen, den du replizieren möchtest. Nützlich für „mach es so aussehen"-Anfragen."
Codebases und vorhandene Design-Dateien: Verlinke ein Code-Repository, damit Claude deine 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.
Schreibe effektive Prompts
Du musst kein Designer sein, um großartige Ergebnisse zu erzielen. Sei spezifisch darüber, was du erstellst, für wen es ist und was am wichtigsten ist.
Ein guter Prompt enthält das Ziel (was du erstellst), das Layout (wie Dinge angeordnet sein 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:
„Erstelle ein Dashboard, das monatliche Einnahmen mit Filtern für Region und Produktlinie anzeigt.
„Entwerfe einen mobilen App-Onboarding-Flow mit 4 Bildschirmen, der Benutzer durch unsere Kernfunktionen führt.
„Erstelle eine Landing Page für unser neues API-Produkt mit einem Hero-Bereich, Code-Beispielen und Preisen.
„Erstelle ein Formular zum Sammeln von Kundenfeedback mit bedingten Fragen basierend auf der Kategorie.
„Entwerfe ein internes Tool für dein Ops-Team, um Inhaltseinreichungen zu überprüfen und zu genehmigen.
Verfeinere dein 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:
„Mache das Farbschema dunkler und minimalistischer.
„Ordne das Dashboard so an, dass Metriken in der oberen Reihe und das Diagramm darunter sind.
„Füge ein Einstellungsfenster auf der rechten Seite hinzu.
„Zeige mir 2–3 alternative Layouts für diese Seite.
Du kannst 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 kannst du 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:
„Mache diesen Button-Abstand größer.
„Ändere dies in ein Dropdown-Menü statt Optionsschaltflächen.
„Verwende hier die primäre Markenfarbe.
„Mache diesen Bereich einklappbar.
Hinweis: Wenn deine Kommentare nicht aufgegriffen werden, füge das Feedback direkt in den Chat ein. Dies ist eine bekannte Problemumgehung für ein gelegentliches Problem, bei dem Kommentare verschwinden können, bevor Claude sie liest.
Bearbeite direkt auf der Canvas
Verwende umfangreiche Layout-Steuerelemente für schnelle visuelle und ästhetische Verschiebungen, insbesondere zum Ziehen, Ändern der Größe und Ausrichten von Elementen direkt.
Wann Chat vs. Kommentare vs. direkte Bearbeitung verwendet werden
Verwende Kommentare für gezielte, komponentenebene Änderungen („repariere diesen Button
Verwalte Versionen und Überarbeitungen
Wenn du eine andere Richtung erkunden möchtest, ohne deine aktuelle Arbeit zu verlieren, sag Claude: „Speichere, was wir haben, und versuche einen völlig anderen Ansatz.
Exportiere und teile
Sobald dein Design fertig ist, kannst du es mit Kollegen teilen oder exportieren, um es anderswo zu verwenden. Das richtige Format hängt von deinem Anwendungsfall ab – ob du Feedback von Stakeholdern erhältst, an Engineering übergibst oder einer Gruppe präsentierst.
Verwende die Schaltfläche „Exportieren
Als .zip herunterladen
Als PDF exportieren
Als PPTX exportieren
An Canva senden
Als eigenständiges HTML exportieren
Sende an die Tools, die du bereits verwendest, einschließlich Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel und Wix, mit mehr Zielen in Kürze.
Übergabe an Claude Code
An lokalen Coding-Agent senden
An Claude Code Web senden
Du kannst Projekte auch innerhalb deiner Organisation über einen teilbaren Link teilen. Die Freigabeoptionen umfassen Nur-Ansicht-, Kommentar- und Bearbeitungszugriff.
Nutzung und Preisgestaltung
Claude Design zählt zu den gleichen Nutzungslimits wie der Rest von Claude. Die Design-Aktivität wird aus dem gemeinsamen Pool gezogen, den du für Chat, Claude Code und Cowork verwendest, sodass es keine separate Claude Design-Zuteilung zu verfolgen gibt. Komplexe Projekte mit großen Codebases oder vielen Iterationen verbrauchen mehr Nutzung.
Wenn du deine Nutzungslimits erreichst, ist Claude Design nicht verfügbar, bis deine Limits zurückgesetzt werden. Wenn du Nutzungsguthaben aktiviert hast, kannst du nach Erreichen deiner enthaltenen Limits weiterarbeiten. Erfahre mehr über wie Nutzungs- und Längenlimits funktionieren.
Hinweis: Claude Design hatte zuvor eine eigene wöchentliche Zuteilung, getrennt von deinen anderen Nutzungslimits. Alle Claude Design-Aktivitäten zählen jetzt zu den gemeinsamen Limits deines Plans.
Tipps für beste Ergebnisse
Importiere ein vollständiges Design-System. Importiere ein vollständiges Design-System, das deine Stile, Schriftarten und Komponenten enthält.
Beginne einfach, dann schichte Komplexität ein. Beginne mit dem Kern-Layout und Inhalt, dann füge Interaktionen, Grenzfälle und Verfeinerungen hinzu. Claude reagiert gut auf inkrementelle Anfragen.
Sei spezifisch in deinem Feedback. „Das sieht nicht richtig aus" ist schwer umzusetzen. „Straffe den Abstand zwischen Formularfeldern auf 8px" gibt Claude genau das, was es braucht.
Referenziere dein Design-System. Wenn du weißt, dass eine Komponente in deinem Brand-System existiert, erwähne sie namentlich: „Verwende die Primary Button-Komponente" oder „Wende das Card-Layout-Muster an."
Denke früh an Responsivität. Erwähne, ob dein Design auf Mobilgeräten, Tablets und Desktops oder nur auf einem davon funktionieren muss.
Frage nach Variationen. Wenn du dir über eine Richtung unsicher bist, bitte Claude, dir 2–3 Optionen zu zeigen. Der Vergleich von Alternativen ist viel schneller als zu raten.
Frage Claude um Feedback. Claude kann dein Design auf Barrierefreiheit, Kontrastverhältnisse, Informationshierarchie und allgemeine Benutzerfreundlichkeit überprüfen. Behandle es als Design-Mitarbeiter, nicht nur als Generator.
Bekannte Einschränkungen
Claude Design ist jetzt in der Beta-Version verfügbar. Ein paar Dinge, die du beachten solltest:
Kommentar-Persistenz: Inline-Kommentare erscheinen gelegentlich nicht auf der Seite, aber du kannst sie immer noch sehen, indem du die Kommentaransicht öffnest.
Große Codebases: Erwäge, sehr große Repositories von Claude Code aus zu verlinken, um Verzögerungen oder Browser-Probleme zu vermeiden. Um ein Design-System zu synchronisieren, verwende
/design-syncvon Claude Code.Chat-Fehler: Wenn du einen „Chat-Upstream-Fehler
Verfügbarkeit: Claude Design ist nur im Web und auf dem Desktop verfügbar.
Mehrpersonen-Bearbeitung: Zwei oder mehr Personen, die gleichzeitig ein Design-Projekt bearbeiten, ist immer noch grundlegend und funktioniert möglicherweise nicht zuverlässig.
Design-System-Import: Der Design-System-Import ist nur so gut wie seine Quelle. Eine unordentliche Codebasis oder eine unvollständige Datei wird in der Ausgabe angezeigt.