Claude Design Tutorial: KI-Prototypen mit deinem Branding erstellen

Stell dir vor, du könntest eine komplette Web-App entwerfen, ohne ein einziges Mal in Figma zu klicken. Claude Design von Anthropic verspricht genau das.

Ich habe es getestet: Vom eigenen Designsystem über interaktive Prototypen bis zum Code-Export. Dieses Tutorial zeigt dir jeden Schritt.

Was ist Claude Design?

Claude Design ist ein neues Tool von Anthropic, basierend auf dem Modell Claude Opus 4.7. Es erstellt realistische Prototypen, entweder aus einem Prompt oder von hochgeladenen Vorlagen.

Das Besondere: Alles basiert auf einem vordefinierten Designsystem. Du erstellst einmal ein Designsystem oder lädst dein Branding hoch und jeder Prototyp, den du danach entwirfst, basiert automatisch darauf.

Voraussetzungen: Du brauchst mindestens Claude Pro (ca. 20 $/Monat). Die Oberfläche erreichst du unter claude.ai/design.

Schritt 1: Ein Designsystem erstellen

Bevor der erste Prototyp entsteht, brauchst du ein Designsystem. Das ist die Basis für alles Weitere.

1. In der Claude-Design-Oberfläche links auf Designsysteme gehen
2. Neues Designsystem erstellen
3. Einen Ordner mit deinem Branding hochladen (Logo, Farben, Screenshots, Code)
4. Auf Continue Generation klicken

Nach etwa 5 Minuten erstellt Claude ein vollständiges Designsystem. In meinem Test mit WEUX Studio hat Claude das Branding überraschend gut getroffen. Die Farben, die Typografie, alles passte. Natürlich kann man noch verfeinern, aber als Startbasis ist das extrem wertvoll.

Schritt 2: Den ersten Prototyp erstellen

Mit dem Designsystem im Rücken geht es an den ersten Prototypen.

1. Links auf Prototyp gehen
2. Projekt benennen
3. Zwischen Wireframe (grobe Skizze) und High Fidelity (nahe am Endergebnis) wählen
4. Das erstellte Designsystem auswählen
5. Prompt eingeben

Mein Beispiel-Prompt:

“Ein interaktiver Prototyp für eine Global Supply Chain. Eine dunkle Weltkarte mit pulsierenden Linien zwischen verschiedenen Logistik-Hubs.”

Nach einigen Minuten war das Ergebnis da: eine dunkle Weltkarte, zwei Slider zur Steuerung von Verkehr und Simulationsgeschwindigkeit, alles im Branding des Designsystems.

Mein Eindruck: Für einen ersten Prompt ist das ein richtig gutes Ergebnis. Die Designvorgaben wurden sauber umgesetzt.

Schritt 3: Iterieren mit Kommentaren und Draw

Claude Design glänzt in der Iterationsphase. Statt einen neuen Prompt zu schreiben, kannst du:

• Kommentare setzen – Ein Element anklicken und per Text ändern
• Draw-Funktion – Bereiche im Prototyp markieren und direkt Feedback geben
• Slider und Parameter – live anpassen

Die Draw-Funktion ist besonders stark: Ein Bereich markieren, “Vergrößere beide Überschriften” schreiben, abschicken und Claude setzt es um. Das fühlt sich an wie mit einem Junior-Designer zu arbeiten, der sofort versteht, was du meinst.

Schritt 4: Exportieren und weiterverarbeiten

Wenn der Prototyp steht, hast du mehrere Export-Optionen:

• Als ZIP herunterladen – zur Weiterverarbeitung mit Claude Code oder Codex
• Als HTML – standalone, kann direkt auf einen Webserver
• An Claude Code übergeben – inklusive Link, sodass Claude Code das Projekt fetchen und in bestehenden Code einbauen kann

Kann Claude Design Figma ersetzen?

Nein. Auf gar keinen Fall.

Aber das ist auch nicht der Punkt. Claude Design ist kein Figma-Killer. Es ist ein Tool, das eine spezifische Lücke füllt: schnell von der Idee zum interaktiven Prototypen, ohne sich in Pixel-Details zu verlieren.

Fazit

Claude Design ist ein richtig gutes Tool für schnelle visuelle Prototypen auf Basis deines Brandings, interaktive Präsentationen, Kundendemos und die nahtlose Übergabe an Claude Code oder Codex. Es ersetzt nicht den Designer, aber es macht den Weg vom Konzept zum ersten greifbaren Prototypen deutlich kürzer – etwa wenn du eine neue Landingpage konzipierst oder ein bestehendes Design testen willst.

Das ganze Thema habe ich auch in einem Video auf meinem YouTube-Kanal ausführlich gezeigt: