Claude Design — Designen im Gespräch
Designs, interaktive Prototypen und Präsentationen erstellen, indem Du mit Claude sprichst. Links der Chat, rechts die Canvas. In 7 Stufen vom ersten Prompt über Dein Design-System bis Export, Teilen und der Brücke zu Claude Code.
claude.ai/design oder die Seitenleiste der Claude-Desktop-App.Worum geht's?
Claude Design ist Anthropics Werkzeug, um per Gespräch zu gestalten: Du beschreibst im Chat, was Du brauchst, Claude erzeugt es auf einer Canvas, und Du verfeinerst es Schritt für Schritt — per Chat, per Klick-Kommentar oder durch direktes Bearbeiten auf der Fläche.
Damit baust Du Designs (Landingpages, UI-Screens, One-Pager), interaktive Prototypen (klickbar und teilbar — ohne Code-Review oder Pull-Request) und Präsentationen. Am Ende exportierst Du (ZIP, PDF, PPTX, eigenständiges HTML) oder reichst direkt an Claude Code weiter.
Zur Einordnung: Es geht um das Werkzeug „Claude Design" — nicht darum, fertige Designs vorzuführen. Dein Fortschritt in diesem Tutorial wird lokal in Deinem Browser gespeichert.
? Für wen ist das spannend?
Für alle, die schnell von der Idee zu etwas Sichtbarem wollen — auch ohne Erfahrung mit klassischer Designsoftware.
/design und /design-sync.🪟 Das Grundprinzip: Chat + Canvas
Eine geteilte Oberfläche — links wird gesprochen, rechts entsteht das Design.
Roter Faden dieses Tutorials: ein fiktives Demo-Projekt — Website und Pitch-Deck für das erfundene Café-Studio „Nordwerk". So bleiben alle Screenshots frei von echten Kundendaten.
🪜 Die 7 Stufen
/design und /design-sync) ein Plus — Pflicht ist sie nicht.Was ist Claude Design?
Das Produkt verstehen: Chat + Canvas, Zugang, Voraussetzungen — und was es ist (und was nicht).
1 Ein Designwerkzeug, das Du beschreibst
Claude Design (Anthropic Labs, Beta) erstellt Designs, interaktive Prototypen und Präsentationen im Gespräch.
Statt Werkzeugleisten und Ebenen sagst Du in normaler Sprache, was Du brauchst. Claude entwirft es, Du gibst Feedback, es wird besser. Die Oberfläche hat zwei Hälften:
Gesamtansicht: Chat-Panel links, Canvas mit einem Design rechts
2 Zugang & Voraussetzungen
- Wo: unter
claude.ai/designoder in der Seitenleiste der Claude-Desktop-App. - Wer: verfügbar in den Plänen Pro, Max, Team und Enterprise.
- Enterprise: standardmäßig deaktiviert — eine Administratorin aktiviert „Claude Design (Anthropic Labs)" in den Organisations-Einstellungen.
- Kosten: Die Nutzung zählt zum gemeinsamen Kontingent Deines Plans (geteilt mit Chat, Claude Code und Cowork) — kein separates Budget.
3 Was es ist — und was nicht
- Gespräch + Canvas, um zu gestalten
- Designs, klickbare Prototypen, Decks
- nutzt Dein Design-System (Stufe 3)
- Export & Übergabe an Claude Code
- kein klassisches Vektor-/Pixel-Tool mit Ebenen
- keine fertige Galerie „von Claude gemachter" Designs
- kein Ersatz für tiefe Code-Reviews/PRs
- (noch) keine Mobile-App, eingeschränkte Mehrpersonen-Bearbeitung
✓ Kurz-Check
Projekt anlegen & erster Prompt
Vom leeren Projekt zum ersten Entwurf auf der Canvas — und wie ein guter erster Prompt aussieht.
1 Ein Projekt anlegen
Jedes Vorhaben lebt in einem Projekt — es erbt automatisch das Design-System Deiner Organisation (mehr dazu in Stufe 3).
- In Claude Design ein neues Projekt anlegen und benennen (z. B. „Nordwerk — Website").
- Optional gleich Kontext anhängen (Screenshots, Assets, Code) — siehe Stufe 3.
- Im Chat beschreiben, was entstehen soll — Claude erzeugt den ersten Entwurf auf der Canvas.
2 Der erste Prompt — Anatomie
Je klarer Du Ziel, Layout, Inhalt und Zielgruppe benennst, desto näher trifft der erste Entwurf.
Entwirf eine Landingpage für „Nordwerk", ein Café mit Kreativ-Studio. Ziel: Reservierungen. Aufbau: Hero mit Foto-Platzhalter, 3 Angebote, Galerie, Öffnungszeiten, Kontakt-CTA. Ton: warm, handgemacht, ruhig. Zielgruppe: kreative Locals 25–45.
Erzeugt einen kompletten Landingpage-Entwurf auf der Canvas — mit den genannten Abschnitten, passender Typografie und Platzhaltern — und fragt nach, wo Du zuerst verfeinern willst.
3 Versionen & Verlauf
Jede Runde ist nachvollziehbar: Du kannst zu früheren Ständen zurück, Varianten vergleichen und Schritt für Schritt weiterbauen, ohne Angst, etwas zu zerstören.
Erster Prompt im Chat + erzeugte Nordwerk-Landingpage auf der Canvas
Kontext & Design-System
Damit das Ergebnis nach Dir aussieht: Kontext geben und ein Design-System aus echten Komponenten aufbauen.
1 Kontext geben
Je mehr Material Claude kennt, desto treffender der Entwurf.
Anhang-/Upload-Menü für Bilder, Dateien, Code
2 Das Design-System
Ein Design-System bündelt Farben, Typografie, Komponenten und Muster — Claude baut damit mit Deinen echten Bausteinen und gleicht die Ausgabe dagegen ab.
Quellen für ein System: eine Codebase (z. B. React-Repo), Design-Dateien/Screenshots, Dokumente (PPTX/PDF) oder einzelne Assets (Logo, Palette, Schrift).
- In der Organisation Assets/Quellen hochladen.
- Das generierte System prüfen (Farben, Typo, Komponenten stimmen?).
- Auf „Published" schalten → ab dann nutzen es alle Projekte im Team.
- Später per „Remix" aktualisieren.
Generiertes System: Farbpalette, Typografie, Komponenten
Organisations-Einstellung mit dem „Published"-Schalter
3 Mit System vs. ohne
- funktional, aber generisch
- passt nicht automatisch zur Marke
- viel Nacharbeit von Hand
- echte Komponenten & Markenfarben
- Claude prüft die Ausgabe dagegen
- konsistent über alle Projekte des Teams
/design-sync (siehe Stufe 6).Iterieren: drei Wege
Chat, Inline-Kommentare und direkte Canvas-Bearbeitung — und wann Du welchen Weg nimmst.
1 Die drei Methoden
2 Wann was?
Folge-Prompt im Chat + geänderte Canvas
Kommentar direkt an einer Komponente (z. B. dem CTA-Button)
Auswahl mit Ziehpunkten + Live-Knöpfe für Abstand/Farbe
Prototypen & Präsentationen
Aus einem Entwurf einen klickbaren Prototyp machen — und in Minuten ein markenkonformes Deck.
1 Interaktive Prototypen
Aus statischen Mockups werden klickbare, teilbare Prototypen — ideal für Feedback und User-Tests.
- Screens verknüpfen (Klick führt zum nächsten Bildschirm).
- Vorschau starten und selbst durchklicken.
- Teilen-Link verschicken — ohne Code-Review oder Pull-Request.
Verlinkte Screens / Prototyp-Vorschau
2 Präsentationen & One-Pager
Von einer kurzen Gliederung zu einem markenkonformen Deck in Minuten — Claude legt Folien an, übernimmt Dein Design-System und Du verfeinerst wie gewohnt.
Mehrere Slides eines Nordwerk-Pitch-Decks
Export, Teilen & Claude Code
Das Ergebnis rausbringen — als Datei, in andere Tools oder direkt in den Code.
1 Exportieren
Über den Export bekommst Du Dein Design in gängigen Formaten heraus.
Dazu Direkt-Integrationen in andere Tools — u. a. Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel und Wix.
Export-Menü mit Formaten + Integrations-Zielen
2 Teilen in der Organisation
Projekte lassen sich teilen mit klaren Stufen: privat, ansehen, kommentieren oder bearbeiten.
Teilen-Dialog mit Zugriffsstufen
3 Brücke zu Claude Code
Wer programmiert, verbindet Design und Code direkt — in beide Richtungen.
# im Projektordner: /design # startet Claude Design für dieses Projekt /design-sync # zieht das Design-System aus der Codebase nach Claude Design
Grenzen & Einordnung
Ehrlich bleiben: Limits, Beta-Status und eine sachliche Einordnung zu Datenschutz und Souveränität.
1 Nutzung & Limits
- Die Nutzung zählt zum gemeinsamen Kontingent Deines Plans (Chat + Claude Code + Cowork) — kein eigenes Budget.
- Große Code-Repositories kosten mehr und können an Grenzen stoßen.
- Bei intensiver Arbeit kann zusätzliche Nutzung nötig werden.
2 Beta — was das heißt
- Beta, Pläne, Chat+Canvas
- Export-Formate & Integrationen
/design,/design-sync
- keine Mobile-App
- nur einfache Mehrpersonen-Bearbeitung
- vereinzelt Kommentar-Persistenz-Probleme
3 Datenschutz & Souveränität
Claude Design ist ein Dienst des US-Anbieters Anthropic. Alles, was Du hochlädst — Screenshots, Assets, ganze Codebases — wird dort verarbeitet und gespeichert; eine EU-Daten-Residency gibt es derzeit nicht. Für sensible, personenbezogene oder regulierte Inhalte ist das eine bewusste Abwägung wert.
✓ Vor dem Hochladen kurz prüfen
Cheat-Sheet & Quellen
Das Wichtigste auf einen Blick — plus die Belege.
★ Schnellüberblick
claude.ai/design / Desktop-Seitenleiste./design startet · /design-sync holt das System aus dem Code.🔗 Quellen (offiziell)
Dieses Tutorial bildet den Stand Juni 2026 ab. Maßgeblich ist immer die Anthropic-Hilfe:
- Erste Schritte mit Claude Design (Anthropic-Hilfe)
- Set up your design system (Anthropic-Hilfe)
- Claude Design — Admin-Leitfaden für Team & Enterprise (Anthropic-Hilfe)
- Introducing Claude Design (Anthropic Labs)
Quiz
7 Fragen quer durch die Stufen. Ab 6 richtigen Antworten schaltest Du Dein Zertifikat frei.
Dein Zertifikat
Glückwunsch! Trage deinen Namen ein und drucke das Zertifikat (oder speichere als PDF).