Selbstlern-Tutorial

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 8 Stufen vom ersten Prompt über Dein Design-System bis Export, Teilen, der Brücke zu Claude Code — und einem echten Website-Redesign als Praxisbeispiel.

Versionsstand: Claude Design ist ein Produkt der Anthropic Labs und steckt in einer Beta / Research Preview — Oberfläche und Funktionen ändern sich schnell. Stand dieses Tutorials: August 2026. Belegt aus der offiziellen Anthropic-Hilfe (Quellen am Ende im Bonus).
Voraussetzung: Claude Design ist in den Abos Pro, Max, Team und Enterprise verfügbar. Bei Enterprise ist es standardmäßig deaktiviert — eine Administratorin schaltet es unter Organisationseinstellungen → Funktionen (Anthropic Labs) frei. Aufruf über 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.

🚀
Gründer:innen & Solo
Schnell von der Idee zu Landingpage, Pitch-Deck und Prototyp.
🎨
Designer:innen
Erste Entwürfe in Sekunden, dann gezielt verfeinern statt bei null zu starten.
📋
Produkt & PM
Klickbare Prototypen fürs Team und für User-Tests — ohne Entwicklung.
📣
Marketing
One-Pager, Kampagnen-Visuals und Decks im eigenen Markenlook.
💻
Mit Claude Code
Design und Code zusammenbringen über /design-sync und Handoff-Bundles.
🏷️
KMU & Vereine
Professionelle Außenwirkung ohne teure Designprogramme.

🪟 Das Grundprinzip: Chat + Canvas

Eine geteilte Oberfläche — links wird gesprochen, rechts entsteht das Design.

Skizze
1 BeschreibenChat (links)
2 ErzeugenCanvas (rechts)
3 VerfeinernChat · Kommentar · direkt
4 Teilen / ExportPDF · PPTX · HTML · Claude Code

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. Einzige Ausnahme: Stufe 8 zeigt mit Einverständnis des Betreibers ein Redesign der echten Website raum-fuer-beruehrung.eu.

🪜 Die 8 Stufen

Kein Vorwissen nötig. Wenn Du mit Claude Code arbeitest, ist die Integration in Stufe 6 (/design-sync und das Handoff-Bundle) ein Plus — Pflicht ist sie nicht.
Stufe 1

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:

💬
Chat (links)
Hier beschreibst Du, stellst Rückfragen und steuerst große Änderungen.
🖼️
Canvas (rechts)
Hier entsteht und wächst Dein Design — sichtbar, klickbar, bearbeitbar.
claude.ai/design
Geteilte Oberfläche von Claude Design: links der Chat mit Claudes Erläuterungen zum Nordwerk-Design, rechts die Canvas mit der fertigen Café-Website „Erst Kaffee. Dann Handwerk.
Abb. 1 · Die geteilte Oberfläche von Claude Design: Chat links, Canvas rechts (Demo-Projekt „Nordwerk"). Avatar maskiert.

2 Zugang & Voraussetzungen

  • Wo: unter claude.ai/design oder 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 den „Claude Design"-Schalter unter Organisationseinstellungen → Funktionen (Anthropic Labs).
  • Kosten: Die Nutzung zählt zum gemeinsamen Kontingent Deines Plans (geteilt mit Chat, Claude Code und Cowork) — kein separates Budget.
Modell: Claude Design wird von Anthropics aktuellem Vision-Modell angetrieben (zum Launch: Opus 4.7). Welche Version genau läuft, kann sich ändern — verlasse Dich auf die App, nicht auf eine feste Nummer.

3 Was es ist — und was nicht

✓ Das ist Claude Design
  • Gespräch + Canvas, um zu gestalten
  • Designs, klickbare Prototypen, Decks
  • nutzt Dein Design-System (Stufe 3)
  • Export & Übergabe an Claude Code
✗ Das ist es nicht
  • kein klassisches Vektor-/Pixel-Tool mit Ebenen
  • keine fertige Galerie „von Claude gemachter" Designs
  • kein Ersatz für tiefe Code-Reviews/PRs
  • nur im Web verfügbar (keine Mobile-App), eingeschränkte Mehrpersonen-Bearbeitung

✓ Kurz-Check

Stufe 2

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).

  1. In Claude Design ein neues Projekt anlegen und benennen (z. B. „Nordwerk — Website").
  2. Optional gleich Kontext anhängen (Screenshots, Assets, Code) — siehe Stufe 3.
  3. Im Chat beschreiben, was entstehen soll — Claude erzeugt den ersten Entwurf auf der Canvas.
claude.ai/design · Neues Projekt
Claude-Design-Startbildschirm „What should we create?
Abb. 2 · Der Einstieg: Prompt beschreiben, optional Design-System und Vorlage wählen — daraus entsteht das Projekt.

2 Der erste Prompt — Anatomie

Je klarer Du Ziel, Layout, Inhalt und Zielgruppe benennst, desto näher trifft der erste Entwurf.

Du

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.

Claude

Erzeugt einen kompletten Landingpage-Entwurf auf der Canvas — mit den genannten Abschnitten, passender Typografie und Platzhaltern — und fragt nach, wo Du zuerst verfeinern willst.

Faustregel: Lieber ein, zwei Sätze mehr Kontext als ein Wort zu wenig. „Mach was Schönes" führt zu generisch — Ziel + Aufbau + Ton + Zielgruppe führen zu brauchbar.

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.

claude.ai/design · Nordwerk
Projekt „Nordwerk Landingpage
Abb. 3 · Erster Entwurf aus einem Prompt — Claude erklärt links, was es gebaut hat, und bietet Live-Regler für Feinheiten an. Avatar maskiert.
Stufe 3

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.

🖼️
Bilder & Screenshots
Wireframes, Wettbewerber-Designs, vorhandene Assets.
📄
Dokumente
Briefings und Vorlagen — auch PPTX/PDF.
💻
Code-Repositories
Bestehende Komponenten und Web-Flows als Grundlage.
claude.ai/design · Kontext anhängen
Anhäng-Menü im Prompt-Feld: Attach file/folder, Reference another project, Connect GitHub, Link local code, Upload .fig file, Design system, Skills, Manage connectors
Abb. 4 · Das Anhäng-Menü im Prompt-Feld: Dateien und Ordner, GitHub oder lokaler Code, Figma-Datei (.fig), Design-System und Skills.

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 (GitHub-Repo oder lokaler Ordner), eine Figma-Datei (.fig), Dokumente (PPTX/PDF) oder einzelne Assets (Logo, Palette, Schrift) — oder einfach eine gute Beschreibung Deiner Marke, alles Weitere ist optional.

  1. Im Bereich „Design systems" ein neues System anlegen: Marke in ein, zwei Sätzen beschreiben und optional Quellen anhängen.
  2. Auf „Continue to generation" — Claude baut Tokens, Komponenten, Specimen-Cards und UI-Kits (dauert ein paar Minuten).
  3. Das generierte System prüfen (Readme, Farben, Typo, Komponenten stimmen?).
  4. Auf „Published" schalten → ab dann nutzen es neue Projekte im Team; weiterbearbeiten kannst Du es jederzeit im Chat.
Enterprise: Über eine eigene Rolle „Claude Design Admin" lässt sich steuern, wer Systeme veröffentlichen, als Organisations-Standard setzen oder löschen darf. Ohne diese Rolle haben alle Mitglieder gleiche Design-System-Rechte.
claude.ai/design · Design-System anlegen
Setup-Flow „Set up your design system
Abb. 5 · Das Setup: Marke beschreiben, optional Quellen anhängen — „Continue to generation" startet den Bau.
claude.ai/design · Nordwerk Design System
Generiertes Nordwerk-Design-System: Struktur-Navigation mit Templates, Brand, Colors und Components, Readme mit Markenbeschreibung — und oben der „Published
Abb. 6 · Das generierte System (Nordwerk): Templates, Brand, Farben, Komponenten und Readme — oben der „Published"-Schalter fürs Team.

3 Mit System vs. ohne

Ohne Design-System
  • funktional, aber generisch
  • passt nicht automatisch zur Marke
  • viel Nacharbeit von Hand
Mit Design-System
  • echte Komponenten & Markenfarben
  • Claude prüft die Ausgabe dagegen
  • konsistent über alle Projekte des Teams
Tipp: Wer mit Claude Code arbeitet, kann das System direkt aus dem Code ziehen — /design-sync (siehe Stufe 6).
Stufe 4

Iterieren: drei Wege

Chat, Inline-Kommentare und direkte Canvas-Bearbeitung — und wann Du welchen Weg nimmst.

1 Die drei Methoden

💬
Chat
Für breite Änderungen: „Mach das Layout luftiger", „andere Bildsprache".
📌
Inline-Kommentar
Für gezielte Anpassungen an einer Komponente — direkt drangeheftet.
🖱️
Direkt auf der Canvas
Für schnelle visuelle Feinheiten: ziehen, skalieren, Abstand/Farbe per Live-Knopf.

2 Wann was?

Faustregel: grob → Chat, gezielt an einem Element → Inline-Kommentar, ästhetische Feinheit → direkt auf der Canvas. Im Zweifel beschreibst Du im Chat, was Du erreichen willst, statt es mühsam von Hand zu schieben.
claude.ai/design · Iteration (Chat)
Folge-Prompt „Mach das Layout luftiger
Abb. 7 · Breite Änderung über den Chat — Claude benennt präzise, was es geändert hat. Avatar maskiert.
claude.ai/design · Inline-Kommentar
Kommentar-Modus: Kommentar am „Tisch reservieren
Abb. 8 · Gezielter Inline-Kommentar am CTA-Button — „Send to Claude" macht daraus direkt einen Änderungsauftrag. Avatar maskiert.
claude.ai/design · Canvas bearbeiten
Edit-Modus: Ebenenbaum (Header, Hero, Grid), Auswahl mit Ziehpunkten auf der Canvas und Eigenschaften-Panel mit Appearance, Sizing und Position
Abb. 9 · Direkte Bearbeitung auf der Canvas — inzwischen ein vollwertiger Editor mit Ebenenbaum und Eigenschaften-Panel. Avatar maskiert.
Stufe 5

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.

  1. Screens verknüpfen (Klick führt zum nächsten Bildschirm).
  2. Vorschau starten und selbst durchklicken.
  3. Teilen-Link verschicken — ohne Code-Review oder Pull-Request.
Tiefer: Es gibt auch code-getriebene Prototypen (mit Interaktion bis hin zu Voice/Video/3D) — gut, wenn ein Klick-Dummy nicht reicht.
claude.ai/design · Prototyp
Prototyp-Vorschau im Present-Modus: Klick auf „Tisch reservieren
Abb. 10 · Klickbarer Prototyp im Present-Modus — die Navigation funktioniert, das Reservierungsformular validiert (alle Kontaktdaten fiktiv).

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.

claude.ai/design · Präsentation
Pitch-Deck-Projekt bei 50 % Zoom: Titel-Folie „Vorne Kaffee, hinten Werkbank
Abb. 11 · Präsentation aus einer Gliederung — fünf Folien im Nordwerk-Look, hier zwei davon in der Canvas-Übersicht. Avatar maskiert.
Stufe 6

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.

🗜️
.zip
Gebündelte Assets zum Weitergeben.
📕
PDF
Zum Teilen und Drucken.
📊
PPTX
Decks in PowerPoint weiterbearbeiten.
🌐
HTML
Eigenständige Webseite, direkt nutzbar.

Dazu Direkt-Integrationen in andere Tools — u. a. Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel und Wix.

claude.ai/design · Export
Export-Untermenü „More formats and apps
Abb. 12 · Weitere Export-Formate — inklusive Claude Code als direktem Handoff-Ziel. Avatar maskiert.

2 Teilen in der Organisation

Projekte lassen sich teilen mit klaren Stufen: privat, ansehen, kommentieren oder bearbeiten.

claude.ai/design · Teilen
Share-Dialog: „Who can access
Abb. 13 · Teilen und Export sitzen im selben Dialog: Zugriff steuern, Link kopieren — oder direkt als PDF, HTML und PPTX herausgeben. Avatar maskiert.

3 Brücke zu Claude Code

Wer programmiert, verbindet Design und Code direkt — in beide Richtungen.

Im Claude-Code-Terminal
# einmalig: den Claude-Design-MCP-Server verbinden
claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp

# danach im Claude-Code-Chat:
/design-login   # bei Claude Design anmelden
/design-sync    # importiert Dein Design-System — z. B. aus der Codebase
/design-login verbindet Claude Code mit Claude Design; /design-sync importiert Dein Design-System (aus Codebase, Design-Dateien oder Uploads) — alles, was Du danach in Claude Design erstellst, geht von Deinen vorhandenen Komponenten aus. Fertige Entwürfe lassen sich zudem als Handoff-Bundle an Claude Code (lokal oder im Web) übergeben.
Plattformneutral: Die Befehle funktionieren überall, wo Claude Code läuft (Terminal/IDE) — kein OS-spezifischer Schritt nötig. Versionsstand: August 2026 — Befehle/Abläufe können sich ändern (ältere Anleitungen nennen noch einen /design-Befehl, der ist aus der Doku verschwunden).
Stufe 7

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

Research Preview: Funktionen und Oberfläche ändern sich. Bei Enterprise ist Claude Design standardmäßig aus. Laut Anthropics Admin-Hinweisen gibt es (Stand jetzt) keine Daten-Residency-Optionen und keine Audit-Logs; ein Nutzungs-Dashboard existiert inzwischen (Analytics → Claude Design, aktive Nutzer pro Tag/Woche/Monat). Hochgeladene Assets werden dauerhaft gespeichert. Die Qualität eines importierten Design-Systems hängt von der Quelle ab.
✓ Belegt (Anthropic-Hilfe)
  • Beta, Pläne, Chat+Canvas
  • Export-Formate & Integrationen
  • /design-login, /design-sync
  • nur Web-Oberfläche, keine Mobile-App
⚠ Nur berichtet
  • 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.

Praktisch: Für öffentliche/unkritische Designs (Landingpages, Decks, Marketing) ist das meist unproblematisch. Bei vertraulichem Material vorher prüfen, was hochgeladen wird — und ob ein datensouveräner Weg passt. Wer das systematisch klären will: bei FL Pro Consulting ist Datensouveränität ein Schwerpunkt.

✓ Vor dem Hochladen kurz prüfen

Stufe 8

Praxis: eine echte Website verbessern

Alles aus den Stufen 2–4 an einem echten Fall: die Startseite von raum-fuer-beruehrung.eu — vom Screenshot zum Redesign-Entwurf, als Vorher/Nachher.

1 Die Ausgangslage

Der häufigste Praxisfall ist nicht das leere Blatt, sondern: Es gibt schon eine Website — sie könnte besser aussehen.

Als Beispiel dient hier die echte Startseite von raum-fuer-beruehrung.eu, einer Kurs- und Community-Seite. Sie gehört zum Umfeld des Autors und wird mit Einverständnis des Betreibers gezeigt. Der Weg funktioniert für jede Website gleich: Screenshot rein, Ziel beschreiben, iterieren.

Wichtig: Lade nur Websites hoch, die Dir gehören oder für die Du eine Erlaubnis hast — fremde Seiten und Marken sind tabu (siehe auch die Checkliste in Stufe 7: was hochgeladen wird, landet dauerhaft bei einem US-Dienst).

2 Der Ablauf

Drei Schritte — Du kennst sie alle schon einzeln, hier greifen sie ineinander.

  1. Vorher festhalten: einen Screenshot der aktuellen Startseite aufnehmen (ganz normale Bildschirmaufnahme im Browser).
  2. Als Kontext anhängen: in einem neuen Claude-Design-Projekt den Screenshot hochladen (Stufe 3) — Claude „sieht" damit den Ist-Zustand.
  3. Verbesserungs-Prompt schreiben: sagen, was bleiben soll und was besser werden soll — dann iterieren wie in Stufe 4.
Du

Hier ist die aktuelle Startseite von raum-fuer-beruehrung.eu (Screenshot angehängt) — eine Kurs- und Community-Seite rund um achtsame Berührung. Ziel: mehr Anmeldungen für Kurse und Events. Behalte: Inhalte, Sprache und die ruhige, warme Grundstimmung. Verbessere: klarere Hierarchie im Hero mit deutlichem Termin-CTA, luftigere Abstände, einheitliche Karten für die Angebote, harmonische Farbpalette. Zielgruppe: Neubesucher, die in zehn Sekunden verstehen sollen, was hier angeboten wird.

Claude

Analysiert den Screenshot, liest zusätzlich die Live-Seite (inklusive der echten Termine) und stellt erst Rückfragen: Wie viel neu bauen? Wie soll der Termin-CTA funktionieren? Welche Abschnitte bleiben? Danach entsteht der überarbeitete Entwurf auf der Canvas — mit neuem Hero, Termin-Karte und Karten-Raster. Von dort verfeinerst Du per Chat, Kommentar oder direkt auf der Canvas.

Merkformel für Redesign-Prompts: Behalten + Verbessern + Ziel + Zielgruppe. Ohne das „Behalte …" verwirft Claude gern zu viel — gerade bei Seiten mit gewachsenem Charakter.
claude.ai/design · Redesign-Projekt
Redesign-Projekt: links im Chat der angehängte Vorher-Screenshot und der Verbesserungs-Prompt, Claudes Analyse („Ich habe die Live-Seite und alle Inhalte gelesen
Abb. 14 · Der Ist-Zustand als Kontext plus Verbesserungs-Prompt. Bemerkenswert: Claude las zusätzlich die Live-Seite und stellte erst Rückfragen (Umfang? CTA-Variante?), bevor es baute. Avatar maskiert.

3 Vorher / Nachher

Links die echte Live-Seite, rechts der Claude-Design-Entwurf nach dem Prompt.

raum-fuer-beruehrung.euVorher
Live-Startseite von raum-fuer-beruehrung.eu: Navigation mit Buchungs-Button, Aktions-Banner und Hero „Tantrische Berührung in Augsburg und Umgebung
Abb. 15 · Vorher: die Live-Startseite zum Aufnahmezeitpunkt.
claude.ai/design · CanvasNachher — Entwurf
Redesign-Entwurf der RfB-Startseite auf der Canvas: klarere Hero-Hierarchie, Termin-Karte „Nächster Termin: 29. Aug — Kuschel-Picknick am Kuhsee
Abb. 16 · Nachher: Design-Vorschlag aus Claude Design — nicht die live geschaltete Seite. Der Termin-CTA zeigt den echten nächsten Termin von der Live-Seite.
Einordnung: Das „Nachher" ist ein Design-Vorschlag auf der Canvas, nicht die echte Website. Live ginge er erst über Export bzw. Handoff an Claude Code (Stufe 6) — und über eine bewusste Entscheidung des Betreibers, ihn umzusetzen.

4 Was Du daraus mitnimmst

📸
Screenshot = Kontext
Der Ist-Zustand als Bild ist der schnellste Weg, Claude eine bestehende Seite zu zeigen.
⚖️
Behalten + Verbessern
Ein gutes Redesign-Briefing sagt beides — sonst wird zu viel verworfen.
📝
Entwurf ≠ Live
Die Canvas liefert Vorschläge; live geht es erst über Export/Umsetzung.

✓ Kurz-Check

Bonus

Cheat-Sheet & Quellen

Das Wichtigste auf einen Blick — plus die Belege.

★ Schnellüberblick

🪟
Oberfläche
Chat links, Canvas rechts. Zugang: claude.ai/design / Desktop-Seitenleiste.
✍️
Guter Prompt
Ziel + Layout + Inhalt + Zielgruppe.
🎯
Iterieren
grob → Chat · gezielt → Kommentar · ästhetisch → Canvas.
📦
Export
.zip · PDF · PPTX · HTML + Integrationen (Vercel, Canva …).
🧩
Design-System
Erst System (Published), dann skaliert es über alle Projekte.
💻
Claude Code
/design-login verbindet · /design-sync holt das System aus dem Code.
🔁
Redesign-Rezept
Screenshot → Kontext → „Behalten + Verbessern + Ziel + Zielgruppe" → iterieren. Ergebnis = Entwurf, nicht Live-Site.

🔗 Quellen (offiziell)

Dieses Tutorial bildet den Stand August 2026 ab. Maßgeblich ist immer die Anthropic-Hilfe:

Hinweis: Claude Design ist Beta — einzelne Funktionen, Limits und Integrationen können sich kurzfristig ändern. Im Zweifel die App und die verlinkten Artikel prüfen.
Lernkontrolle

Quiz

8 Fragen quer durch die Stufen. Ab 7 richtigen Antworten schaltest Du Dein Zertifikat frei.

Frage 1 von 8
…
Abschluss

Dein Zertifikat

Glückwunsch! Trage deinen Namen ein und drucke das Zertifikat (oder speichere als PDF).

FL
Florian Ludwig
AI Consultant · Kutzschbach INNOVATIONS
Zertifikat
Claude Design
Hiermit wird bestätigt, dass
Dein Name hier
den Kurs „Claude Design — Designen im Gespräch (Chat & Canvas)" erfolgreich abgeschlossen hat.
—Datum
★GEPRÜFT
Florian LudwigAI Consultant · Kutzschbach INNOVATIONS