Du googelst "Website mit KI erstellen" und landest bei Wix, IONOS, Squarespace. Du klickst auf einen Vergleichsartikel, bekommst eine Liste mit Baukästen, beschreibst der KI dein Unternehmen und erhältst eine fertige Seite, die aussieht wie tausend andere.
Kennst du das? Irgendetwas stimmt nicht. Das Template ist generisch. Die Farben könnten von überall stammen. Der Hero-Bereich sieht aus wie immer: großer Text, Bild rechts daneben, drei Karten darunter. Violetter Verlauf optional.
Am 17. April 2026 hat Anthropic Claude Design gelauncht, und es ist etwas fundamental anderes als diese Baukästen. Kein Drag-and-Drop. Kein Template-Matching. Stattdessen: echter Code, echte Designsysteme, echte Wiedererkennbarkeit. Dieser Artikel erklärt, wie das funktioniert und wann es sich für dich lohnt.
Was ist Claude Design?
Claude Design ist ein neues Tool von Anthropic Labs, das direkt in claude.ai integriert ist. Es läuft auf Claude Opus 4.7, dem leistungsstärksten Modell der Claude-Familie.
Du kannst damit Websites, interaktive Prototypen, Präsentationen und Marketing-Materialien erstellen. Das Prinzip ist simpel: Du beschreibst im Chat, was du brauchst. Claude stellt gezielte Rückfragen, ähnlich wie der Plan-Modus in Claude Code, und baut dann auf einem visuellen Canvas. Auf der linken Seite der Chat, auf der rechten der Entwurf.
Zwei Dinge sind für den Einstieg wichtig. Erstens: Claude Design befindet sich aktuell in der Research Preview. Es ist für Nutzer von Claude Pro, Max, Team und Enterprise zugänglich. Zweitens, und das ist eine gute Nachricht: Claude Design hat ein eigenes wöchentliches Nutzungslimit, das nicht gegen dein reguläres Claude-Kontingent zählt. Du verbrauchst also durch Design-Projekte nicht deine normalen Chat-Anfragen.
Den Einstieg findest du unter claude.ai/design.
Hinweis
Claude Design läuft auf einem eigenen wöchentlichen Limit, das nicht auf dein reguläres Claude-Kontingent angerechnet wird. Du verbrauchst durch Design-Projekte also nicht deine normalen Chat-Anfragen.
# Neuer Artikel? Du erfährst es als Erstes.
# Kein Spam. Ein kurzes Mail, wenn etwas erscheint.
KI-Baukasten vs. Claude Design: Der echte Unterschied
Was Wix und Co. machen
Die klassischen KI-Website-Baukasten arbeiten alle nach demselben Muster. Du beschreibst dein Unternehmen, die KI wählt ein Template, befüllt es mit Platzhaltertexten und Stockfotos, du passt alles per Drag-and-Drop an.
Das Ergebnis kommt schnell. Aber es ist erkennbar. Wer regelmäßig Websites sieht, erkennt diese Templates auf einen Blick. Die immer gleiche Struktur, die gleichen Button-Formen, die gleiche Typografie-Kombination. Das ist kein Problem der KI, sondern ein grundsätzliches Problem von Templates: Sie sind für den Durchschnitt optimiert, nicht für deine Marke.
Was Claude Design anders macht
Claude Design arbeitet code-first. Wenn du beschreibst, was du brauchst, generiert es keine Vorlagen mit ausgetauschtem Text. Es baut ein funktionierendes Interface direkt in Code. Unter der Haube steckt echter HTML/CSS/JavaScript, den du exportieren, anpassen und weiterentwickeln kannst.
Der entscheidende Unterschied liegt aber woanders: Claude Design basiert auf Designsystemen. Du definierst einmal, wie deine Marke aussieht, und das Tool wendet diese Regeln auf jedes Projekt an. Deine Farben, deine Schriften, deine Abstände. Nicht die von irgendeinem Template-Anbieter.
Das klingt nach Mehraufwand. Aber genau das ist die Investition, die sich lohnt.
Das Designsystem-Prinzip: Einmal beschreiben, immer replizieren
Hier liegt das Herzstück der ganzen Sache.
Design ist kein Kunstwerk, das Spezialisten vorbehalten ist. Design ist ein System. Farbtöne, Schriftgrößen, Abstände, Komponentenstile. Wenn du diese Regeln aufschreibst und an Claude übergibst, kann es auf dieser Basis unbegrenzt neue Designs produzieren, die alle zusammenpassen. Eine Seite, zehn Seiten, hundert Folien, ein komplettes Marketingpaket. Immer kohärent.
Das GitHub-Repository getdesign.md macht das greifbar. Es bietet über 68 fertige Designsystem-Definitionen für bekannte Marken als einfache Textdateien. Stripe, Spotify, Airbnb, BMW, Apple. Du nimmst die passende Datei, gibst sie Claude Design als Referenz mit, und bekommst Designs im Stil dieser Marken. Das Repo hat in etwa zwei Wochen knapp 60.000 GitHub-Stars gesammelt. Das zeigt, wie groß das Interesse an diesem Ansatz gerade ist.
Noch spannender ist die eigene Variante. Wenn du deine Markenfarben, deine Schriften und dein Logo in Claude Design einpflegst, kannst du fortan alles in diesem Stil produzieren. Website-Seiten, Pitch Decks, Prototypen, Motion Graphics. Alles kohärent, alles erkennbar als deins.
Der Mehraufwand zu Beginn zahlt sich mehrfach aus. Und er ist kleiner als du denkst.
Kein eigenes Branding? Fremdes nehmen und anpassen
Das Repository awesome-design-md bietet über 68 fertige Designsystem-Definitionen bekannter Marken als einfache Textdateien: Stripe, Spotify, Airbnb, Linear, Apple und viele mehr. Du nimmst eine Datei, tauschst Farben und Schriften gegen deine aus, und hast sofort einen soliden Startpunkt. Kein Blank-Page-Problem, kein generisches Template. Einfach ein bewährtes System als Grundlage nehmen und daraus etwas Eigenes machen.
Profi-Tipp
Für deinen eigenen Marken-Stil: Exportiere deine CSS-Variablen oder Tailwind-Konfiguration aus deinem bestehenden Projekt und lade sie als Design-System hoch. Claude baut dann alle neuen Seiten automatisch in deinem Stil.
So erstellst du eine Website mit Claude Design: Schritt für Schritt
Der Ablauf ist intuitiver als erwartet:
- Öffne claude.ai/design und wähle, was du bauen willst. Zur Auswahl stehen Prototyp, Präsentation, Vorlage oder Sonstiges.
- Richte dein Designsystem ein. Du kannst deinen Projektordner mit Marken-Assets hochladen, einen GitHub-Link angeben oder Schriften, Farben und Notizen manuell eingeben. Claude analysiert daraus, was zu deiner Marke gehört. Keine eigenen Assets? Dann kannst du eine getdesign.md-Datei als Referenz einsetzen.
- Beschreibe dein Projekt mit der Prompt-Formel. Je konkreter dein Briefing, desto besser das Ergebnis. Siehe Callout unten.
- Iteriere auf dem Canvas. Mehr dazu im nächsten Abschnitt: Chat, Kommentar oder Slider, jedes Werkzeug hat seine Stärken.
- Exportiere. Als ZIP-Datei, PDF, PowerPoint, Canva-Datei oder direkt als Claude Code Handoff Bundle. Letzteres gibt dir den Befehl, mit dem du das Design in Claude Code importierst und weiterentwickelst.
Die Prompt-Formel
Ein guter Prompt für Claude Design besteht aus vier Teilen:
- Ziel: Was willst du bauen? "Eine Übersichtsseite für Monatsumsätze."
- Layout: Wie soll es aussehen? "Filter oben, Diagramm in der Mitte, Kennzahlen rechts."
- Inhalt: Welche Informationen sind drin? "Umsatz nach Region und Produktlinie, Monatsvergleich."
- Zielgruppe: Wer nutzt es? "Unser Vertriebsteam, mobile Ansicht wichtig."
Je vollständiger dein Briefing, desto präziser der erste Entwurf. Claude fragt zwar nach, aber du sparst eine Runde, wenn du direkt alles mitgibst.
Ein Hinweis zur Oberfläche: Claude Design ist eine visuelle Anwendung und läuft über claude.ai im Browser. Im Terminal oder in der Desktop-App ist es aktuell nicht verfügbar.
So iterierst du effektiv: Chat, Kommentar oder Schieberegler?
Der erste Entwurf sitzt selten sofort. Aber wie änderst du etwas am schnellsten, ohne jedes Mal alles neu zu beschreiben? Claude Design gibt dir mehrere Werkzeuge an die Hand, und jedes spielt in einer anderen Liga.
Chat für das große Ganze
Im Chatfeld arbeitest du mit Claude wie mit einem Designer am Telefon. Das passt immer dann, wenn eine Änderung Kontext oder eine Begründung braucht:
- Layout umstellen. "Rück die Kennzahlen nach oben und das Diagramm darunter."
- Stil verschieben. "Mach es minimaler und dunkler."
- Neue Sektionen hinzufügen. "Bau rechts ein Einstellungspanel ein."
- Alternativen sehen. "Zeig mir zwei Varianten vom Checkout, einmal einseitig und einmal mehrstufig."
Und du kannst Claude im Chat um Feedback bitten. "Prüf das Design auf Barrierefreiheit" funktioniert genauso wie "Wo bricht hier die Informationshierarchie?". Claude ist kein reiner Generator, sondern auch ein Sparringspartner, den du kostenlos dabeisitzen hast.
Inline-Kommentare für punktuelle Änderungen
Willst du ein einzelnes Element anpassen? Dann klick einfach drauf. Claude Design setzt einen Kommentaranker, du tippst die Änderung direkt an der Stelle:
- "Button-Abstand größer"
- "Hier die Primärfarbe verwenden"
- "Aus den Auswahlknöpfen ein Dropdown machen"
- "Diesen Bereich einklappbar machen"
Das ist deutlich schneller, als im Chat die genaue Position zu beschreiben. Besonders bei langen Seiten mit vielen ähnlichen Elementen sparst du dir einiges Herumnavigieren.
Bekannter Workaround
Verschwinden deine Kommentare manchmal, bevor Claude sie liest? Das ist ein bekannter Bug in der aktuellen Preview. Die Lösung ist simpel: Kopier den Text und schick ihn als normale Chat-Nachricht. Dort landet er zuverlässig.
Live-Regler für Feinjustierung
Für Abstände, Farben und Layout-Werte gibt es Schieberegler direkt auf der Leinwand. Die sind Gold wert, wenn du Werte vergleichen willst. Du ziehst den Abstand von 8 auf 12 auf 16 auf 24 Pixel und siehst sofort, welche Stufe am besten wirkt. Danach bittest du Claude, den Wert auf alle ähnlichen Elemente zu übertragen. Schneller als jeder Prompt.
Die Kurzregel für deinen Alltag
Brauchst du Kontext oder eine Begründung, ab in den Chat. Willst du ein Element gezielt verändern, Inline-Kommentar. Probierst du Werte aus, Schieberegler. Und wenn du ein komplettes Umdenken willst, sag Claude: "Speicher das und probier einen ganz anderen Ansatz." Claude legt eine neue Version an, ohne die alte zu überschreiben.
Deine Codebase anschließen: Prototypen mit echten Komponenten
Hast du bereits eine bestehende Website oder App? Dann hebt Claude Design hier nochmal ab. Statt einen generischen Entwurf zu bauen, liest Claude deine echten Komponenten, versteht dein Styling und arbeitet genau mit den Elementen, die in deinem Projekt schon existieren.
Vielleicht kennst du diesen Ablauf: Ein Designer liefert einen schönen Entwurf, in der Umsetzung stellt sich raus, der Button passt in kein bestehendes Muster, die Card-Variante gibt es gar nicht, die Abstände sind frei erfunden. Alles muss nochmal gemacht werden. Mit angebundener Codebase (dein Projektordner mit dem bestehenden Code) fällt dieser ganze Umweg weg.
Was Claude aus deinem Code liest
- Komponenten-Struktur: welche Buttons, Cards und Dialogfenster du hast und wie sie zusammenspielen
- Styling: dein Farbsystem, deine Abstände, deine Schriften, egal ob du Tailwind oder klassisches CSS nutzt
- Konventionen: wie du mit Zuständen (State) umgehst und wie Daten durch deine App fließen
- Ordner-Struktur: wie du Komponenten benennst und ablegst
In deinen Prompts kannst du danach Komponenten direkt beim Namen nennen. "Nimm die ProductCard" oder "Folge dem Layout der Settings-Seite" funktioniert, als würdest du einem neuen Teamkollegen Arbeit geben, der gestern bei dir angefangen hat.
So verbindest du deine Codebase
Klick im Projekt auf "Import" und wähle entweder einen GitHub-Link oder einen lokalen Ordner. Claude liest den Code ein und hat ihn ab dann als Kontext verfügbar.
Profi-Tipp für große Projekte
Arbeitest du mit einem sehr großen Projekt (sogenanntes Monorepo, mehrere Produkte im gleichen Ordner) oder einem Team mit über 100 aktiven Entwicklern? Dann verlink nicht das ganze Projekt, sondern nur den Unterordner mit den relevanten Komponenten. Abhängigkeiten und Build-Dateien machen den Browser sonst langsam. Claude braucht den Kontext für dein Design-System, nicht jedes einzelne Bit deines Projekts.
Der Übergang zu Claude Code
Bist du mit dem Entwurf zufrieden, klickst du auf Export und dann auf "Hand off to Claude Code". Claude Design packt Design-Dateien, Chatverlauf und eine kurze Anleitung in ein Paket. Du bekommst einen Befehl, den du in Claude Code einfügst. Inklusive Kontext, warum welche Design-Entscheidung gefallen ist.
Der Clou: War deine Codebase beim Entwurf schon verbunden, kennt Claude Code die Komponenten bereits. Die Lücke zwischen "sieht gut aus auf der Leinwand" und "läuft in der Produktion" wird damit kleiner als bei jedem klassischen Übergabe-Prozess.
Was du damit bauen kannst
Claude Design ist kein reiner Website-Builder. Die Einsatzmöglichkeiten sind breiter, und für ein paar Formate gibt es Kniffe, die das Ergebnis deutlich besser machen.
Präsentationen und Pitch Decks
Warum setzen sogar die Teams bei Anthropic intern am liebsten Claude Design für Präsentationen ein? Zwei Gründe. Erstens: Die Folien werden als interaktives HTML gerendert, nicht als statisches PowerPoint. Das heißt, du kannst echte Animationen zwischen den Folien bauen, die eine Geschichte erzählen. Zweitens: Du beschreibst Daten einfach in Worten, Claude erzeugt passende Diagramme.
Ein paar Kniffe aus der Praxis:
- Erst Gliederung, dann Design. Lass Claude zuerst nur die Folien-Struktur skizzieren und bestätige sie. Danach sitzt das volle Design viel zielsicherer.
- Einzelne Folien per Nummer ansprechen. "Auf Folie 3: ändere die Überschrift auf 'Marktchance' und schreib die Stichpunkte um auf den adressierbaren Markt" ist präziser als jede allgemeine Beschreibung.
- Diagramme direkt beschreiben. "Balkendiagramm mit Umsatz Q1 bis Q4, Q3 farblich hervorgehoben" reicht schon als Prompt.
- Bilder aus dem Design-System einbinden lassen. Hast du Markenbilder im System hinterlegt, zieht Claude beim Erstellen automatisch die passenden Motive rein.
Interaktive Prototypen und Nutzerreisen
Was macht einen guten Prototyp aus? Nicht ein einzelner hübscher Screen, sondern eine zusammenhängende Nutzerreise, in der die Logik von Schritt zu Schritt aufgeht. Genau an dieser Stelle zeigt Claude Design seine Stärken.
Ein Beispiel-Prompt, der funktioniert: "Zeig den Ablauf, wenn ein Nutzer vom Free-Plan auf den bezahlten Plan wechselt. Start beim Dashboard mit Upgrade-Hinweis, dann Plan-Vergleich, dann Bezahlformular, dann Bestätigung, dann zurück aufs Dashboard mit freigeschalteten Funktionen."
Für Reviews mit Kunden oder dem Team zahlt sich außerdem die Alternativen-Funktion aus. Bitte Claude um "zwei oder drei Varianten nebeneinander" und diskutier die direkt am Bildschirm. Schneller als jede Runde mit Screenshots in PowerPoint-Folien.
Interne Tools und Admin-Panels
Gerade für Solopreneure und kleine Teams wird dieser Einsatzzweck oft unterschätzt. Ein einfaches Kundenverwaltungs-Tool (CRM), ein Admin-Bereich oder ein Moderations-Panel baust du in unter einer Stunde zusammen. Bei internen Werkzeugen zählt Geschwindigkeit mehr als das letzte Pixel, und genau da liefert Claude Design ab. Ein Beispiel aus der offiziellen Dokumentation: Ein Moderations-Panel mit durchsuchbarer Liste, Detailansicht zum Ausklappen und Tastenkürzeln für schnelles Arbeiten. In Minuten, nicht Tagen.
Websites, Motion Graphics und Marketing-Materialien
- Mehrseitige Websites mit echter Navigation, responsivem Layout und echtem Code im Hintergrund
- Motion Graphics und Animationen für Social-Media-Inhalte oder Erklärvideos
- Landing Pages, Event-Seiten, Produkt-Teaser für Marketing-Kampagnen
Alle Outputs basieren auf Code. Du kannst sie in Claude Code weiterverwenden, in GitHub versionieren und in deine bestehende Entwicklungsumgebung integrieren. Wer Claude Code schon kennt, bekommt mit Claude Design eine direkte Ergänzung genau dort, wo es bisher am schwächsten war: bei der visuellen Gestaltung.
Für Freelancer und kleine Teams ist das eine echte Verschiebung. Professionelle Designqualität war lange entweder teuer oder zeitaufwendig. Claude Design macht sie zugänglicher, ohne das Ergebnis auf einen Einheitsbrei zu reduzieren.
Typische Stolpersteine und wie du sie umgehst
Wo ist der Haken? Claude Design ist eine Research Preview (also eine frühe Testversion), und das merkst du an ein paar Stellen. Die Umwege sind aber einfach, wenn du sie einmal kennst.
Kommentare verschwinden: Manchmal wird ein Inline-Kommentar nicht aufgenommen, bevor Claude ihn verarbeitet. Die Lösung ist bewährt: den Text einfach in den Chat kopieren und als normale Nachricht absenden.
Speichern bricht in der kompakten Ansicht ab: Die Compact-View kann beim Speichern stolpern. Wechsel kurz auf die volle Ansicht, speichere dort und geh danach zurück.
Fehlermeldung mitten im Chat: Kommt mitten in deiner Sitzung ein Verbindungsfehler, öffne einfach einen neuen Chat-Tab im gleichen Projekt. Dein Kontext bleibt erhalten, der Fehler ist weg.
Riesige Projekte sind langsam: Linkst du ein sehr großes Repository, kann der Browser hängen. Die Lösung ist die gleiche wie im Abschnitt oben: Nur den Unterordner mit den relevanten Komponenten verbinden statt des ganzen Projekts.
Nichts davon ist ein Show-Stopper. Aber es ist gut, sie zu kennen, bevor du dich ärgerst.
# Neuer Artikel? Du erfährst es als Erstes.
# Kein Spam. Ein kurzes Mail, wenn etwas erscheint.
Für wen lohnt es sich jetzt?
Claude Design ist nicht für jeden Fall das richtige Werkzeug. Hier eine ehrliche Einschätzung:
Gut geeignet, wenn du:
- Freiberufler oder Solopreneur bist und professionelle Designs brauchst, ohne ein Designbudget zu haben
- bereits Claude oder Claude Code nutzt und eine visuelle Ergänzung suchst
- Kunden-Prototypen schnell und in guter Qualität produzieren willst
- Wert darauf legst, dass dein Design wiedererkennbar und markenkonform ist statt generisch
Weniger passend, wenn du:
- eine komplette All-in-one-Lösung mit Hosting, Domain und Shop suchst (da sind Wix oder Squarespace wirklich praktischer)
- kein Claude-Abo hast und nur eine einmalige, einfache Seite brauchst
Für alle, die tiefer einsteigen wollen: Im Vibe Design Sprint arbeiten wir genau mit diesem Ansatz. Designsysteme definieren, Claude Code einsetzen, in kürzester Zeit zu einer Website kommen, die tatsächlich nach dir aussieht.
