Was ist Claude Design? Ein vollständiger Leitfaden zu Preisen, 7 Erstellungsmethoden und Prompt-Beispielen [Stand 2026]

Am 18. Juni 2026 erhielt Claude Design ein großes Update.

Die Funktionen wurden erweitert und die Benutzeroberfläche hat sich geändert.

Ich habe es selbst getestet, während ich es benutzt habe, und notiere hier der Reihe nach, wo man auf dem Bildschirm klicken muss.

Dieser Artikel richtet sich an alle, die „während des Lesens direkt mitmachen möchten."

Bitte öffnen Sie während des Lesens [claude.ai/design](//claude.ai/design).

Kann ich es kostenlos nutzen?

Nein, das ist nicht möglich.

Claude Design ist ausschließlich in den kostenpflichtigen Tarifen enthalten.

Sie können es nutzen, wenn Sie einen Pro-Tarif (20 $/Monat) haben. Es fallen keine zusätzlichen Gebühren an.

Was ist Claude Design?

Es ist ein KI-Tool, mit dem Sie Folien, Landingpages, App-Prototypen, Angebote und mehr erstellen können – allein durch grobe Anweisungen in deutscher Sprache.

Anthropic hat es am 17. April 2026 veröffentlicht. Dieses Update hat die Funktionalität erheblich erweitert.

Die Ausgabe ist „Live-HTML". Es handelt sich nicht um ein statisches Bild; es wird ein klickbares, animiertes Design generiert.

So lesen Sie den Bildschirm

Wenn Sie [claude.ai/design](//claude.ai/design) öffnen, wird dieser Bildschirm angezeigt.

Obere Registerkarten

Bereich „Neues erstellen"

Wählen Sie hier aus, welche Art von Inhalt Sie erstellen möchten. Es sind sieben Karten aufgereiht.

Unter „Designs" werden Ihre bisherigen Designs aufgelistet.

Wenn Claude Rückfragen stellt ( gilt für alle Karten )

Nachdem Sie eine Karte ausgewählt und eine Eingabeaufforderung gesendet haben, kann Claude, wenn es feststellt, dass Informationen fehlen, auf der rechten Bildschirmseite zusätzliche Fragen anzeigen.

Der Inhalt der Fragen ändert sich je nach eingegebener Aufforderung.

Es gibt Pflicht- und optionale Angaben.

Beantworten Sie die Punkte und drücken Sie auf „Weiter", um die Generierung zu starten.

So erstellen Sie Folien (Präsentationsmaterialien)

Erstellen Sie hier Seminarunterlagen, Präsentationsfolien und Pitchdecks.

Schritt 1. Klicken Sie auf dem Startbildschirm auf „Slides"

Klicken Sie auf die Karte mit der Aufschrift „Präsentationen & Pitchdecks."

Schritt 2. Geben Sie den Inhalt der gewünschten Folien ein

Nach dem Klicken gelangen Sie zu diesem Bildschirm.

In der linken Seitenleiste wird „Worum geht es in der Präsentation?" angezeigt.

Sie können zwischen drei Eingabemethoden wählen:

• Dokument hochladen: Erstellen Sie Folien aus vorhandenen Dokumenten wie Word oder PDF.
• Notizen einfügen: Fügen Sie Notizen oder Text ein und lassen Sie sie strukturieren.
• Vorhandenes Deck: Erstellen Sie auf Basis eines vorhandenen Folien-Decks neu.

Wenn Sie nichts anhängen, geben Sie den gewünschten Inhalt einfach in das Textfeld darunter ein und drücken Sie auf Senden.

Beispiele für Eingabeaufforderungen

1Bitte erstellen Sie eine Einführungsfolie für einen KI-Beratungsservice.
2Zielgruppe: Einzelunternehmer und Freiberufler, die sich mit PCs nicht gut auskennen
3Dauer: Für ein 20-minütiges Seminar
4Aufbau: Aktuelle Probleme → Was mit KI gelöst werden kann → Servicedetails → Preise → So bewerben Sie sich
5Atmosphäre: Freundlich, ohne Fachjargon
6Erscheinungsbild: Schlicht und gut lesbar, weißer Hintergrund

1Bitte erstellen Sie eine Selbstvorstellungsfolie.
2Ehemaliger SE, derzeit unterrichte ich die Nutzung von KI
3Erfolge: Automatisierung von Abläufen mit Claude Code, Aufbau eines Systems für 300.000 Yen/Monat
4Zielgruppe: KI-Anfänger, die Einzelunternehmer sind
5Anzahl Folien: 5–7, übersichtlich mit viel Weißraum

1Bitte erstellen Sie eine Einführungsfolie zur Nutzung von Claude Code.
2Zielgruppe: Anfänger, die noch nie programmiert haben
3Dauer: 10 Minuten
4Inhalt: Was ist Claude Code? → Installationsschritte → Erster Befehl → Häufige Fehler und Lösungen
5Ton: Höflich, sanft und nicht einschüchternd

Folienoptionen (Optional)

• Für Google Slides optimieren: Verwendet nur Google Fonts (praktisch beim Öffnen in Google Slides).
• Sprechernotizen hinzufügen: Fügt jeder Folie automatisch Notizen für den Vortragenden hinzu.

Schritt 3. Warten auf die Generierung

Es dauert ein paar Minuten. Sie können den Fortschritt im linken Bereich verfolgen.

Wenn sie fertig ist, sieht es so aus.

Schritt 4. Mit den Schaltflächen oben rechts anpassen

Sobald die Generierung abgeschlossen ist, erscheinen Schaltflächen oben rechts.

„Anpassungen" wird am häufigsten verwendet. Geben Sie einfach etwas wie „Den Titel auf der ersten Folie vergrößern" wie in einem Chat ein, und es wird für Sie korrigiert.

Wichtige Hinweise

Legen Sie zuerst das visuelle Erscheinungsbild der Folien fest.

Wenn Sie nachträglich „alle Farben ändern" möchten, leidet darunter oft die Konsistenz.

Es ist schneller, den groben Rahmen festzulegen und dann die Details zu korrigieren.

So erstellen Sie Produktprototypen (Interaktive Prototypen)

Sie können App-Bildschirme, Service-Buchungsabläufe und Webdienst-Mockups erstellen.

Wenn fertig, ist der Prototyp in einem Zustand, in dem Sie tatsächlich klicken und ihn bedienen können.

Schritt 1. Klicken Sie auf dem Startbildschirm auf „Produktprototyp"

Klicken Sie auf die Karte mit der Aufschrift „Interaktive App-Mockups."

Schritt 2. Geben Sie den Inhalt des gewünschten App-Bildschirms ein

Nach dem Klicken gelangen Sie zu diesem Bildschirm.

Genau wie bei Folien geben Sie den Inhalt in das Textfeld ein und drücken auf Senden.

Die Genauigkeit von Prototypen steigt, je detaillierter Sie schreiben. Die Angabe der folgenden Punkte verbessert die Qualität:

• Um welche Art von App handelt es sich?: Buchungssystem, Aufgabenverwaltung, Zahlungsbildschirm, etc.
• Anzahl der Bildschirme: Wie viele Bildschirme.
• Inhalt jedes Bildschirms: Was wird angezeigt.
• Bedienungsablauf: Wo klicken, um zum nächsten Schritt zu gelangen.
• Gerätegröße: Für Smartphone (390×844px) oder PC.
• Farbe/Stil: Dark Theme, helle Farbgebung, etc.

Beispiele für Eingabeaufforderungen

1Bitte erstellen Sie einen Prototyp für eine Reservierungs-App eines Schönheitssalons.
2Auf einem Smartphone-Bildschirm (390×844px).
34 Bildschirme:
41. Startseite: Salonname, Menüliste (Haarschnitt/Färben/Pflege)
52. Menüauswahl: Auswählen, um fortzufahren
63. Datums-/Uhrzeitauswahl: Kalender und Zeitfenster
74. Bestätigung/Abschluss: Reservierungsdetails und „Reservieren"-Button
8Stil: Weißer Hintergrund, pinkfarbene Akzente, abgerundetes Design
9Wenn der „Reservieren"-Button getippt wird, Übergang zum Bildschirm „Reservierung abgeschlossen! „.

Schritt 3. Warten auf die Generierung

Es dauert ein paar Minuten. Wenn fertig, sieht es so aus.

Es ist in einem Zustand, in dem Sie es durch Klicken tatsächlich bedienen können. Durch Drücken des „Reservieren"-Buttons gelangen Sie zum nächsten Bildschirm.

Schritt 4. Mit den Schaltflächen oben rechts anpassen

Sobald die Generierung abgeschlossen ist, erscheinen Schaltflächen oben rechts.

„Anpassungen" wird am häufigsten verwendet. Geben Sie einfach etwas wie „Hintergrundfarbe auf Weiß ändern" oder „Schrift vergrößern" wie in einem Chat ein, und es wird für Sie korrigiert.

Wenn Sie Animationen hinzufügen möchten

Claude Design fügt standardmäßig keine Animationen hinzu.

Wenn Sie Bewegung wünschen, geben Sie dies explizit an.

1Vergrößern Sie den Button beim Hovern auf das 1,05-fache, mit einem 200ms Übergang.
2Cards beim Laden der Seite einblenden und nach oben schieben, dabei in 150ms-Intervallen nacheinander anzeigen.

So erstellen Sie Produkt-Wireframes (Skelett-Design)

Verwenden Sie dies, wenn Sie zuerst die „Bildschirmstruktur" festlegen möchten.

Es erstellt nur das Layout-Skelett, kein detailliertes Design.

Es eignet sich, um den Ablauf „Der Benutzer geht in dieser Reihenfolge vor" zu bestätigen.

Schritt 1. Klicken Sie auf dem Startbildschirm auf „Produkt-Wireframe"

Klicken Sie auf die Karte mit der Aufschrift „Lo-fi-Bildschirme & Abläufe."

### Schritt 2. Geben Sie die Struktur des gewünschten Bildschirms ein

Nach dem Klicken gelangen Sie zu diesem Bildschirm.

Geben Sie den Inhalt einfach in das Textfeld ein und drücken Sie auf Senden. Wenn Sie einen Referenzbildschirm haben, können Sie ihn mit „Einen Screenshot hinzufügen" anhängen, um die Genauigkeit zu verbessern.

Beispiele für Eingabeaufforderungen

1Bitte erstellen Sie ein Wireframe für einen Bewerbungsablauf eines Beratungsservice.
2Schritte: Startseite → Servicebeschreibung → Preise → Bewerbungsformular → Abschluss
3Es reicht, wenn ich sehen kann, was auf jedem Bildschirm platziert werden soll. Detailliertes Design ist nicht nötig.

1Bitte erstellen Sie ein Wireframe für eine Seminar-Anmelde-Landingpage.
2Abschnitte: Hero-Bereich → Referentenvorstellung → Inhalt → Teilnahmegebühr → Anmeldeformular
3In der Smartphone-Ansicht.

Schritt 3. Warten auf die Generierung

Wenn fertig, sieht es so aus.

Das Bildschirm-Skelett wird mit grauen Boxen dargestellt. Verwenden Sie es, um die Platzierung zu bestätigen, z. B. „Button hier" und „Bild hier." Detaillierte Designs werden mit „Produktprototyp" oder „Dokument" erstellt.

Schritt 4. Mit den Schaltflächen oben rechts anpassen

Sobald die Generierung abgeschlossen ist, erscheinen Schaltflächen oben rechts.

Wenn Sie in „Anpassungen" etwas wie „Preisanzeige zum 3. Bildschirm hinzufügen" anweisen, werden entsprechende Korrekturen vorgenommen.

So erstellen Sie Dokumente (Landingpages, Angebote, Dokumente)

Erstellen Sie hier Landingpages, Angebote, Berichte und Lebensläufe.

Unter den 7 Kartentypen ist dies der vielseitigste.

Schritt 1. Klicken Sie auf dem Startbildschirm auf „Dokument"

Klicken Sie auf die Karte mit der Aufschrift „Lebensläufe, PDFs, etc."

### Schritt 2. Geben Sie den gewünschten Inhalt ein

Nach dem Klicken gelangen Sie zu diesem Bildschirm.

Eine Funktion, die nur die Dokumentkarte bietet, ist „Aussprechen."

Wenn Sie Ihre Gedanken wie im Gespräch eingeben, um sie zu ordnen, erfasst das Tool die Struktur so, wie Sie sie äußern.

Wenn Sie ein PDF oder Unterlagen haben, können Sie diese mit „PDF oder Notizen hochladen" hinzufügen.

Beispiele für Eingabeaufforderungen

1Bitte erstellen Sie eine Landingpage für einen KI-Beratungsservice für Privatpersonen.
2Zweck: LINE-Anmeldungen erhöhen
3Aufbau:
4- Hero-Bereich: Slogan + Anmelde-Button
5- Haben Sie diese Probleme? (3 Punkte)
6- Was mit dem Service gelöst werden kann (3 Punkte)
7- Preise
8- FAQ (3 Punkte)
9- Abschließender CTA: LINE-Anmelde-Button
10Zielgruppe: Einzelunternehmer, die sich mit PCs nicht gut auskennen, Frauen in ihren 50ern
11Stil: Schlicht und warm, Weiß + Korallakzente

1Bitte erstellen Sie ein Angebot für einen Beratungsservice für Unternehmen.
2Aufbau: Aktuelle Probleme → Angebotsinhalt → Erwartete Effekte → Preise → Implementierungsschritte → Über das nächste Treffen
3Stil: Schlicht und vertrauenswürdig, Marineblau x Weiß

1Bitte erstellen Sie eine Selbstvorstellungsmappe (Portfolio) als Freiberufler.
2Zu integrierende Inhalte: Profil, Fähigkeiten, Erfolge, Preise, Kontaktinformationen
3Stil: Monochrom + 1 Akzentfarbe, modern und sauber

Schritt 3. Warten auf die Generierung

Es dauert ein paar Minuten. Wenn fertig, sieht es so aus.

Sie können den Rest durch Scrollen überprüfen. Bei einer Landingpage werden alles von Preisen über FAQ bis zum Footer generiert.

Schritt 4. Mit den Schaltflächen oben rechts anpassen

Sobald die Generierung abgeschlossen ist, erscheinen Schaltflächen oben rechts.

Allein durch die Angabe des gewünschten Wortlauts oder der Farben der Landingpage in „Anpassungen" wird diese sofort korrigiert.

So erstellen Sie Animationen

Sie können animierte Banner und Motion Graphics erstellen.

Schritt 1. Klicken Sie auf dem Startbildschirm auf „Animation"

Klicken Sie auf die Karte mit der Aufschrift „Motion Graphics & Loops."

Schritt 2. Geben Sie den Inhalt der gewünschten Animation ein

Nach dem Klicken gelangen Sie zu diesem Bildschirm.

Wenn Sie ein Storyboard oder Bilder haben, können Sie diese mit „Storyboard oder Bilder ablegen" hochladen.

Wenn Sie ein Drehbuch (Text) haben, können Sie es auch mit „Drehbuch einfügen" einfügen.

Beispiele für Eingabeaufforderungen

1Bitte erstellen Sie ein animiertes Banner zur Servicevorstellung.
2Inhalt: Text „KI x Systematisierung" blendet sich ein → Servicename erscheint von unten → CTA-Button blinkt
3Hintergrund: Dunkel, Korallenakzent-Linien
4Größe: 1200×630px
5Wiederholte Wiedergabe

1Bitte erstellen Sie eine animierte Zählnummer.
2Mit dem Text „3.000 Personen eingeschrieben", zählen Sie in 2 Sekunden von 0 auf 3.000 hoch.
3Start beim Anzeigen der Seite.

Wenn fertig, sieht es so aus.

Schritt 3. Mit den Schaltflächen oben rechts anpassen

Sobald die Generierung abgeschlossen ist, erscheinen Schaltflächen oben rechts.

Im Gegensatz zu anderen Karten gibt es keinen „Bearbeiten"-Button. Da Animationen auf Code (CSS/JavaScript) basieren, können Sie Elemente nicht direkt durch Anklicken bearbeiten. Korrekturen sind nur möglich, indem Sie der KI in „Anpassungen" Anweisungen geben.

Wenn Sie eine Animation als PDF exportieren, geht die Bewegung verloren. Wenn Sie die Bewegung erhalten möchten, wählen Sie das HTML-Format.

So verwenden Sie die leere Leinwand ( Von Grund auf neu erstellen )

Keine Vorlagen, keine Fragen. Verwenden Sie dies, wenn Sie mit einer völlig leeren Leinwand beginnen möchten.

Wählen Sie dies für „Dinge, die in keine Karte passen" oder „wenn Sie alles selbst bestimmen möchten."

Geben Sie einfach ein, was Sie erstellen möchten, in das Texteingabefeld ein und drücken Sie auf Senden.

So verwenden Sie „Mit einer Datei beginnen" ( Aus Datei erstellen )

Diese Karte wandelt vorhandene Dateien in Designs um. Geben Sie Claude einfach eine Word-, PDF- oder PPTX-Datei, und es erstellt ein Design für Sie.

Schritt 1. Klicken Sie auf „Mit einer Datei beginnen"

Klicken Sie auf die Karte mit der Aufschrift „In ein Design verwandeln." Ein Dialog zur Dateiauswahl öffnet sich.

Unterstützte Dateiformate sind DOCX, PPTX, XLSX, PDF, JPG und PNG.

Schritt 2. Laden Sie die Datei hoch und geben Sie Anweisungen

Wenn Sie eine Datei auswählen, wird sie hochgeladen, und ein großes Texteingabefeld erscheint. Geben Sie ein, was Sie erstellen möchten, und drücken Sie auf die Schaltfläche „Projekt starten".

Andere Karten haben eine „Senden"-Schaltfläche, aber diese Karte hat „Projekt starten."

Beispiele für Eingabeaufforderungen

1Bitte konvertieren Sie das angehängte Word-Angebot in visuelle Angebotsfolien.
2Machen Sie es zu einer 5-7 Folien umfassenden Konfiguration mit einem schlichten und leicht lesbaren Design.

1Bitte konvertieren Sie die Ideen in dieser handschriftlichen Notiz in einen LP-Vorschlag.
2Zielgruppe: KI-Anfänger, die Einzelunternehmer sind
3Ziel: Beratungsantrag

Wenn fertig, sieht es so aus.

Schritt 3. Mit den Schaltflächen oben rechts anpassen

Nach der Generierung können Sie mit der Symbolleiste oben rechts Anpassungen vornehmen. Durch Drücken der Schaltfläche „+ Anpassungen" öffnet sich ein Chat-Eingabefeld, in dem Sie zusätzliche Anweisungen für feine Änderungen geben können.

So verwenden Sie Designsysteme [Neu in diesem Update]

Es gibt eine Schaltfläche „Designsystem einrichten" unterhalb der Kartenliste auf dem Startbildschirm.

Durch einmaliges Registrieren von Markenfarben, Schriftarten und Logos werden diese automatisch in nachfolgenden Designs berücksichtigt.

Dies löst das Problem, dass „die Farben jedes Mal inkonsistent sind."

Durch Drücken der Schaltfläche wird das Modal „Ein Designsystem hinzufügen" angezeigt.

Es gibt zwei Registrierungsmethoden.

① Hier erstellen ( Für Anfänger )

Sie können es einrichten, indem Sie einfach die erforderlichen Informationen in das Formular eingeben.

Was Sie registrieren können:

• Firmenname/Markenbeschreibung (Texteingabe)
• GitHub-Repository-URL
• Figma-Datei (.fig-Datei hochladen)
• Schriftart-, Logo- und Asset-Dateien

Sie können es ohne Code verwenden. Wenn Sie es zum ersten Mal ausprobieren, wird dies empfohlen.

② Erstellen mit Claude Code (BESTE QUALITÄT)

Dies ist eine Funktion, um Claude Code Markeninformationen lernen zu lassen.

Einmal registriert, müssen Sie nicht mehr jedes Mal „mit dieser Farbe und dieser Schriftart" angeben, wenn Sie eine Landingpage, Homepage oder Folie erstellen. Designs, die als Marke einheitlich sind, werden automatisch erstellt.

Hauptsächlich für Unternehmensentwicklungsteams. Dies ist eine Funktion zum automatischen Auslesen von Markeninformationen aus Servicecode, der mit React-Regeln erstellt wurde. Für den individuellen Gebrauch gibt es kaum Anwendungsfälle.

So wird es verwendet

Sie können es mit den folgenden Schritten von Grund auf neu erstellen.

Schritt 1. Node.js überprüfen

Schritt 2. Ordner und Dateien erstellen

1Beliebiger Ordner/
2　　└── design-system/
3　　　　　　　├── package.json
4　　　　　　　└── tokens.js

package.json

1{ 
2  "name": "my-design-system", 
3  "version": "1.0.0", 
4  "type": "module" 
5}

tokens.js (Farben und Schriftarten auf Ihre Marke umschreiben)

1export const colors = {
2  primary: "#DA7756",      // Hauptfarbe
3  background: "#F5F4F0",   // Hintergrundfarbe
4  text: "#1C1917",         // Fließtext
5  white: "#FFFFFF"
6}
7export const fonts = {
8  heading: "YuGothic",
9  body: "Meiryo"
10}

Schritt 3. /design-sync ausführen

Führen Sie den folgenden Befehl in Claude Code aus:

1/design-sync

Wenn der Vorgang abgeschlossen ist, wird die Marke im Reiter „Designsysteme" registriert. Diese Farbe und Schriftart wird automatisch in nachfolgenden Design-Generierungen verwendet.

Exportmethoden

Fertige Designs können in verschiedenen Formaten exportiert werden.

Wenn eine Animation vorhanden ist, geht die Bewegung beim Export als PDF verloren.

Wenn Sie die Bewegung erhalten möchten, wählen Sie das HTML-Format.

Tipps zur Anpassung (Anpassungsbereich)

Nach der Generierung können Sie durch Drücken der Schaltfläche „Anpassungen" der KI Anweisungen für feine Korrekturen geben.

Beispiele für effektive Anweisungen:

• „Die Kopfzeile größer machen"
• „Den Button hervorheben"
• „Insgesamt einfacher gestalten"
• „Layout auf dem Smartphone überprüfen"

Anstatt alles auf einmal ändern zu wollen, ist es einfacher, das gewünschte Ergebnis zu erzielen, wenn Sie Anweisungen einzeln geben.

Was sich mit diesem Update geändert hat

Zusammenfassung — Wählen Sie eine Karte basierend auf dem, was Sie erstellen möchten

Claude Design ist für Pro-Tarife (20 $/Monat) und höher verfügbar. Es kann nicht kostenlos genutzt werden.

Wählen Sie eine Karte basierend auf dem, was Sie erstellen möchten

Die Genauigkeit steigt, wenn die Eingabeaufforderung vier Punkte enthält: „Zweck, Aufbau, Zielgruppe und Stil."

Streben Sie nicht von Anfang an nach Perfektion; es ist schneller, einen groben Rahmen zu erstellen und dann Dinge nach und nach zu korrigieren.

Wenn Ihnen dieser Artikel gefallen hat, würde ich mich freuen, wenn Sie auf „Gefällt mir" drücken.

▼ Sie können über LINE erfahren, wie man Claude nutzt – auch wenn Sie sich mit PCs nicht gut auskennen.

Bei der Registrierung erhalten Sie eine Installationsanleitung für Claude Code als Geschenk.

https://utage-system.com/line/open/7AX6UZExr2sX?mtid=k9bP2gwMFMso