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?

Abstrakte editoriale Illustration eines leuchtenden KI-Design-Werkzeugs in Blau und Gelb

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.

KI-Baukasten vs. Claude Design: Der echte Unterschied

Abstrakte Illustration zweier gegensätzlicher Design-Ansätze, blau und gelb

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

Abstrakte Illustration von Farbtokens, Typografie-Skala und Abstandssystem

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.

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

Abstrakte Illustration eines mehrstufigen Design-Workflows mit Chat und Canvas

Der Ablauf ist intuitiver als erwartet:

  1. Öffne claude.ai/design und wähle, was du bauen willst. Zur Auswahl stehen Prototyp, Präsentation, Vorlage oder Sonstiges.
  2. 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.
  3. Beschreibe dein Projekt. Claude stellt gezielte Rückfragen: Welcher Stil? Welche Interaktionen? Welche Farbpalette? Wie viel Text? Beantworte sie konkret, das Ergebnis wird proportional besser.
  4. Iteriere auf dem Canvas. Du kannst Kommentare direkt ins Design eintippen, einzelne Elemente auswählen und bearbeiten, mit dem Zeichnen-Tool Anmerkungen machen oder im Chatfeld tippen. Schieberegler helfen bei Abständen und Farben.
  5. 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.

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.

Was du damit bauen kannst

Abstrakte Illustration verschiedener digitaler Formate: Website, Deck, Prototyp

Claude Design ist kein reiner Website-Builder. Die Einsatzmöglichkeiten sind deutlich breiter:

  • Websites mit mehreren Seiten, inklusive echter Navigation, responsivem Layout und echtem Code im Hintergrund
  • Interaktive Prototypen und Mockups für Kundenpräsentationen oder Nutzertests
  • Pitch Decks und Präsentationen als interaktive HTML-Dateien oder klassische PowerPoint-Exporte
  • Motion Graphics und Animationen, zum Beispiel für Social-Media-Inhalte oder Erklärvideos
  • Marketing-Materialien wie Landing Pages, Event-Seiten oder Produkt-Teaser

Alle Outputs basieren auf Code. Das bedeutet: Du kannst sie in Claude Code weiterverwenden, in GitHub versionieren und in deine bestehende Entwicklungsumgebung integrieren. Wer Claude Code bereits 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.

Für wen lohnt es sich jetzt?

Abstrakte Illustration von Freelancern und kleinen Teams vor einem digitalen Canvas

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.