Claude Design ermöglicht es dir, Designs, interaktive Prototypen, One-Pager und andere visuelle Arbeiten zu erstellen, indem du mit Claude chattest. Es ist eine der Vorlagen, aus denen du ein Artefakt starten kannst, sodass du es in jedem Chat, in Claude Code und auf der Registerkarte Artefakte mit direkter Canvas-Bearbeitung und deinem Design-System verwenden kannst. Diese Anleitung führt dich durch die Erstellung deines ersten Designs, die Iteration und die optimale Nutzung. Erfahre mehr über was Artefakte sind und wie man sie verwendet.
Claude Design ist in den Plänen Free, Pro, Max, Team und Enterprise verfügbar und ist standardmäßig aktiviert. Bei Enterprise-Plänen wird es am 15. Oktober 2026 standardmäßig aktiviert, und Besitzer können es vorher in Organisationseinstellungen > Artefakte aktivieren. Die eigenständige Version unter claude.ai/design wird am 14. Dezember 2026 eingestellt. Erfahre mehr unter Migration von eigenständigem Claude Design zu Claude.
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 Richte dein Design-System in Claude Design ein.
Wo du Claude Design verwenden kannst
In einem Gespräch: Frage Claude nach einem Design, z. B. „Erstelle einen One-Pager aus diesem Vorschlag
Auf der Registerkarte „Artefakte": Gehe zur Registerkarte Artefakte und wähle eine Design-Vorlage."
In Claude Code: Bitte Claude, deine Idee in ein Design umzuwandeln, oder verwende /design, um Designs zu erstellen, zu bearbeiten und zu synchronisieren, auf dem Desktop oder im Terminal.
In der Claude-App für iOS und Android: Frage in jedem Gespräch nach einem Design und überprüfe später das Ergebnis. Dann kannst du es im Vollbildmodus auf der Registerkarte Artefakte anzeigen. Du kannst auch ein Design bearbeiten. Um die Freigabeeinstellungen zu ändern, verwende Claude im Web oder auf dem Desktop.
Unter claude.ai/design: Die eigenständige Version funktioniert weiterhin, bis sie am 14. Dezember 2026 eingestellt wird, und deine vorhandenen Projekte bleiben bis dahin dort. Migriere deine Design-Systeme zu Claude, bevor es eingestellt wird. Erfahre mehr unter Migration von eigenständigem Claude Design zu Claude.
So funktioniert Claude Design
Claude Design verbindet ein Gespräch mit einer Canvas. Du beschreibst, was du möchtest, und Claude generiert ein funktionierendes Design auf der Canvas neben dem Gespräch. Von dort aus iterierst du – verfeinerst durch Gespräch, Inline-Kommentare und direkt auf der Canvas, bis es richtig ist.
Der typische Ablauf ist:
Starte ein Design aus einem Gespräch oder der Registerkarte „Artefakte"."
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 ausgeht, anstatt von vorne anzufangen.
Verwende in Claude Code /design, um ein Design in deine Codebasis zu importieren, exportiere deinen Code als Live-Prototyp oder lass Claude alles von Anfang bis Ende erstellen.
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.
Bei Enterprise-Plänen können Administratoren das Veröffentlichen, Festlegen des Standards und Löschen von Design-Systemen für bestimmte Benutzer reservieren. Erfahre mehr im Administratorhandbuch für Artefakte für Team- und Enterprise-Pläne.
Bringe ein Design-System von claude.ai/design mit
Design-Systeme, die du in der eigenständigen Version unter claude.ai/design erstellt hast, können übertragen werden, sodass Claude sie in jedem Chat, einschließlich Claude Code, verwenden kann. Migriere sie, bevor die eigenständige Version am 14. Dezember 2026 eingestellt wird. Erfahre mehr unter Migration von eigenständigem Claude Design zu Claude.
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 erhalten. 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 das Publikum (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 Mobile-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ü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 Designentscheidungen 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 Markenfarbe.
„Machen Sie diesen Bereich einklappbar.
Hinweis: Wenn Ihre Kommentare nicht erkannt werden, fügen Sie das Feedback direkt in den Chat ein. Dies ist ein bekannter Workaround für ein zeitweiliges Problem, bei dem Kommentare verschwinden können, bevor Claude sie liest.
Direkt auf der Canvas bearbeiten
Verwenden Sie umfangreiche Layout-Steuerelemente für schnelle visuelle und ästhetische Änderungen, insbesondere zum Ziehen, Ändern der Größe und Ausrichten von Elementen direkt.
Wann Chat vs. Kommentare vs. direkte Bearbeitung verwendet werden
Verwenden Sie Kommentare für gezielte, komponentenebene Änderungen („diesen Button reparieren
Claude Design mit einer Tastatur verwenden
Um in das Artefakt-Panel zu gelangen und es zu verlassen sowie um vom Header des Panels aus zu kommentieren, siehe Artefakte mit einer Tastatur oder einem Bildschirmleser verwenden. Dieser Artikel erklärt auch, was Fokus bedeutet, was auf einem Mac-Laptop oder in Safari zu tun ist, und wie die Tabellen Tasten anzeigen.
Ein Design ist eine Canvas mit Artboards. Jeder Artboard enthält Ebenen wie Text, Formen und Bilder, und eine Ebene kann andere Ebenen in sich enthalten.
Zwischen den Bereichen des Editors wechseln
Drücken Sie F6, um zum nächsten Bereich zu wechseln, und Shift+F6, um zum vorherigen zu wechseln. Cmd+F6 (Ctrl+F6 unter Windows) funktioniert anstelle von F6, mit oder ohne Shift. Die Bereiche sind die obere Leiste, die Canvas und das Eigenschaftenfenster. Wenn etwas ausgewählt ist und das Eigenschaftenfenster geschlossen ist, stoppt F6 auch in der Symbolleiste, die über der Auswahl schwebt.
Hinweis: Beenden Sie die Textbearbeitung, bevor Sie F6 drücken. Drücken Sie zuerst Escape oder Tab, um die Bearbeitung zu beenden. F6 bringt Sie aus einer Textbearbeitung heraus, ohne sie zu beenden.
Innerhalb eines Artboards arbeiten
Drücken Sie Tab, bis Sie den Titel eines Artboards erreichen. Sein Name enthält seine Position, z. B. Artboard 1 von 7. Vom Titel aus wählt Space den Artboard aus, und Return geht hinein, zu seinen Ebenen. Einmal drinnen:
Tab und Shift+Tab wechseln zwischen Ebenen. Home und End wechseln zur ersten und letzten Ebene.
Return auf einer Ebene, die andere Ebenen enthält, geht hinein. Auf einer Textebene startet Return die Bearbeitung.
Shift+Return geht eine Ebene nach oben.
Escape verlässt den Artboard, und der Artboard bleibt ausgewählt. Escape erneut löscht die Auswahl.
Wenn Sie eine Textebene bearbeiten, drücken Sie Escape oder Tab, wenn Sie fertig sind. Während Sie sich bewegen, teilt der Editor Bildschirmlesern mit, was ausgewählt ist und seine Position, z. B. 1 von 5.
Verschieben, duplizieren und löschen
Um einen Artboard zu verschieben, wählen Sie ihn aus (Space auf seinem Titel) und drücken Sie die Pfeiltasten. Er bewegt sich um ein Pixel auf einmal oder 10 mit Shift. Innerhalb eines Artboards tun die Pfeiltasten etwas anderes: Mit oder ohne Shift bewegen sie Sie zur nächsten oder vorherigen Ebene und verschieben die Ebene selbst nie. Um die Ebene zu verschieben, auf der Sie sich befinden, halten Sie Option (Alt unter Windows) gedrückt und drücken Sie eine Pfeiltaste. Eine frei platzierte Ebene bewegt sich um ein Pixel oder 10 mit Shift. Eine Ebene, die Teil einer Zeile, Spalte oder eines Gitters ist, tauscht stattdessen Plätze mit ihrem Nachbarn: Auf oder Links verschiebt sie früher, und Unten oder Rechts verschiebt sie später. Der Editor sendet eine kurze Bestätigung der Bewegung an Bildschirmleser.
Wenn ein Artboard oder eine Ebene ausgewählt ist, drücken Sie Cmd+D (Ctrl+D unter Windows), um es zu duplizieren, und Delete oder Backspace, um es zu löschen. Drücken Sie Cmd+Z (Ctrl+Z unter Windows), um rückgängig zu machen. Der Editor sendet eine kurze Bestätigung für jede dieser Aktionen an Bildschirmleser.
Verwenden Sie die Symbolleiste über einer Auswahl
Die Symbolleiste, die über einer Auswahl schwebt, ist nur vorhanden, während das Eigenschaftenfenster geschlossen ist, und F6 erreicht sie. Darin bewegen die Pfeiltasten zwischen seinen Steuerelementen, Home und End bewegen sich zum ersten und letzten, und Escape geht zurück zur Canvas mit Ihrer Auswahl beibehalten. Sie können auch jedes Steuerelement mit Tab erreichen.
Verwenden Sie das Eigenschaftenfenster und die Liste der Ebenen
Cmd+\ (Ctrl+\ unter Windows) öffnet das Eigenschaftenfenster und verschiebt den Fokus hinein. Wenn Sie es erneut drücken, wird das Fenster geschlossen und der Fokus kehrt zur Schaltfläche „Eigenschaften
In der Liste der Ebenen des Eigenschaftenfensters: Die Pfeiltasten Nach oben und Nach unten bewegen sich zwischen Zeilen, die Pfeiltaste Nach rechts erweitert eine Zeile und geht dann hinein, die Pfeiltaste Nach links bricht sie zusammen und geht dann hinaus, Return oder Space wählt diese Ebene auf der Canvas aus, und Return erneut auf einer Textebene bearbeitet sie.
Warnung: In der Liste der Ebenen wirken Delete, Backspace und Cmd+X (Ctrl+X unter Windows) auf das, was auf der Canvas ausgewählt ist, was möglicherweise nicht die Zeile ist, zu der Sie gewechselt haben. Drücken Sie zuerst Return auf der Zeile.
Claude Design Tastaturkürzel
Aktion | Mac | Windows |
Nächster Bereich | F6 oder Cmd+F6 | F6 oder Ctrl+F6 |
Vorheriger Bereich | Shift+F6 oder Cmd+Shift+F6 | Shift+F6 oder Ctrl+Shift+F6 |
Zum Titel eines Artboards wechseln | Tab | Tab |
Artboard auswählen (auf seinem Titel) | Space | Space |
In das Artboard gehen, sich in einer Ebene bewegen oder Text bearbeiten | Return | Enter |
Nächste Ebene, vorherige Ebene (innerhalb eines Artboards) | Tab, Shift+Tab oder Pfeiltasten | Tab, Shift+Tab oder Pfeiltasten |
Erste Ebene, letzte Ebene | Home, End | Home, End |
Eine Ebene nach oben (innerhalb eines Artboards) | Shift+Return | Shift+Enter |
Artboard verlassen | Escape | Escape |
Ausgewähltes Artboard verschieben (auf seinem Titel) | Pfeiltasten (Shift für 10 Pixel) | Pfeiltasten (Shift für 10 Pixel) |
Ebene verschieben oder neu anordnen (innerhalb eines Artboards) | Option+Pfeiltasten | Alt+Pfeiltasten |
Duplizieren | Cmd+D | Ctrl+D |
Löschen | Löschen oder Rücktaste | Löschen oder Rücktaste |
Kopieren, einfügen | Cmd+C, Cmd+V | Ctrl+C, Ctrl+V |
Ausschneiden (eine Ebene) | Cmd+X | Ctrl+X |
Gruppieren, Gruppierung aufheben (Ebenen) | Cmd+G, Cmd+Shift+G | Ctrl+G, Ctrl+Shift+G |
Horizontal spiegeln, vertikal spiegeln | Shift+H, Shift+V | Shift+H, Shift+V |
Alles auswählen | Cmd+A | Ctrl+A |
Rückgängig machen, wiederherstellen | Cmd+Z, Cmd+Shift+Z | Ctrl+Z, Ctrl+Shift+Z |
Eigenschaftenbereich öffnen oder schließen | Cmd+\ | Ctrl+\ |
Vergrößern, verkleinern, an Fenster anpassen | Cmd+Plus, Cmd+Minus, Cmd+0 | Ctrl+Plus, Ctrl+Minus, Ctrl+0 |
Layout-Hilfslinien anzeigen oder ausblenden | Shift+G | Shift+G |
Versionen und Überarbeitungen verwalten
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 freigeben
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 einholen, an Engineering übergeben oder einer Gruppe präsentieren.
Verwenden Sie die Schaltfläche „Exportieren
Als .zip herunterladen
Als PDF exportieren
Als PPTX exportieren
In Google Slides exportieren
Als eigenständiges HTML exportieren
An die Tools senden, die Sie bereits verwenden: Adobe Experience Manager, Adobe for Creativity, Adobe Journey Optimizer, Base44, Canva, Gamma, HubSpot, Hyperframes, Lovable, Miro, Netlify, Replit, v0, Vercel und Wix
An Claude Code übergeben
An lokalen Coding-Agent senden
An Claude Code Web senden
Designs sind standardmäßig privat für Sie. Um eines freizugeben, klicken Sie auf „Freigeben
Nutzung und Preisgestaltung
Claude Design wird auf die gleichen Nutzungslimits wie der Rest von Claude angerechnet. Die Design-Aktivität wird aus dem gleichen Pool wie der Rest Ihrer Arbeit mit Claude gezogen, einschließlich Claude Code, daher gibt es keine separate Claude Design-Zuteilung zum Nachverfolgen. Komplexe Projekte mit großen Codebases oder vielen Iterationen verbrauchen mehr Nutzung.
Wenn Sie Ihre Nutzungslimits erreichen, ist Claude Design nicht verfügbar, bis Ihre Limits zurückgesetzt werden. Wenn Sie Nutzungsguthaben aktiviert haben, können Sie nach Erreichen Ihrer enthaltenen Limits weiterarbeiten. Erfahren Sie mehr über wie Nutzungs- und Längenlimits funktionieren.
Hinweis: Claude Design hatte zuvor eine eigene wöchentliche Zuteilung, getrennt von Ihren anderen Nutzungslimits. Alle Claude Design-Aktivitäten werden jetzt auf Ihre gemeinsamen Limits des Plans angerechnet.
Tipps für beste Ergebnisse
Importieren Sie ein vollständiges Design-System. Importieren Sie ein vollständiges Design-System, das Ihre Stile, Schriftarten und Komponenten enthält.
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 px" 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 Komponente ‚Primary Button'" oder „Wenden Sie das Muster ‚Card Layout' 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
Einige Dinge, die Sie beachten sollten:
Kommentar-Persistenz: Inline-Kommentare erscheinen gelegentlich nicht auf der Seite, aber Sie können sie trotzdem sehen, indem Sie die Kommentaransicht öffnen.
Große Codebases: Erwägen Sie, sehr große Repositories von Claude Code zu verlinken, um Verzögerungen oder Browserfehler zu vermeiden. Um ein Design-System zu synchronisieren, verwenden Sie /design-sync von Claude Code.
Chat-Fehler: Wenn Sie einen „Chat-Upstream-Fehler
Mobilgeräte: Es ist nicht möglich, Freigabeeinstellungen in der Claude-App für iOS und Android zu ändern. Sie müssen Claude im Web oder auf dem Desktop verwenden.
Bearbeitung durch mehrere Personen: Zwei oder mehr Personen, die gleichzeitig ein Design-Projekt bearbeiten, ist noch grundlegend und funktioniert möglicherweise nicht zuverlässig.
Design-System-Import: Der Design-System-Import ist nur so gut wie seine Quelle. Eine ungeordnete Codebase oder eine unvollständige Datei wird in der Ausgabe angezeigt.
Versionsverlauf: Claude Design hat noch keinen Versionsverlauf.
Löschen aus der Ebenen-Liste: In der Ebenen-Liste des Eigenschaftsfensters wirken sich Löschen, Rücktaste und Ausschneiden auf das aus, was auf der Canvas ausgewählt ist, nicht auf die Zeile, zu der Sie gewechselt haben. Drücken Sie zuerst Return auf der Zeile.
Hinzufügen zu einem Design mit einer Tastatur: Das Platzieren einer neuen Textebene, eines Artboards, einer Form oder einer Notiz auf der Canvas erfordert eine Maus oder ein Trackpad. Bitten Sie Claude, es hinzuzufügen.