Zum Inhalt springen
Codex DesignBETA

Codex Design vs. Claude Design.

Claude Design und Codex Design lassen dich beide gemeinsam mit einem KI-Agenten gestalten und anschließend bauen, was du gestaltet hast. Die eigentliche Frage ist, mit welchem Agenten du arbeitest: Claude Design gehört zu Claude und Claude Code, Codex Design ist ein unabhängiges Plugin, das Codex um ein Design-Canvas ergänzt.

Aktualisiert am 6. November 2026 · 6 Min. Lesezeit

Die kurze Antwort

Wenn du Claude nutzt, nimm Claude Design. Es ist in jedem Claude-Plan enthalten, deckt mehr ab als UI (Präsentationen, One-Pager, Marketing-Material) und ist mit Claude Code verbunden. Wenn du Codex nutzt, ist Claude Design kein Teil deines Workflows, und Codex Design füllt dort dieselbe Lücke: ein Canvas, auf dem Codex Screens als Live-HTML nebeneinander anordnet, damit du sie vor dem Bauen vergleichen und verfeinern kannst.

  • Wähle Claude Design, wenn du in Claude oder Claude Code arbeitest, Präsentationen und Dokumente im selben Tool wie deine UI-Arbeit haben willst oder ein Team-Designsystem brauchst, an dem jedes Design geprüft wird.
  • Wähle Codex Design, wenn du in Codex arbeitest, jedes Design als HTML-Seite auf deinem eigenen Rechner haben willst und möchtest, dass derselbe Agent es anschließend baut.

Was die beiden Tools sind

Claude Design ist das Design-Tool von Anthropic. Es startete im April 2026 als Research Preview von Anthropic Labs mit eigener Website und ist inzwischen direkt in Claude eingebaut: Du kannst es in jeder Claude-Unterhaltung, im Artifacts-Tab und in Claude Code mit /design nutzen. Es erstellt Mockups, klickbare Flows, One-Pager und andere visuelle Assets. Du kannst Elemente kommentieren, Text direkt bearbeiten, Abstände und Farben mit Reglern anpassen, die Claude erzeugt, und Elemente ziehen, skalieren und ausrichten. Es kann Designsysteme aus einem GitHub-Repository oder aus Designdateien importieren und prüft seine Ergebnisse dagegen. Die Arbeit lässt sich nach PPTX, PDF oder HTML exportieren, an Claude Code übergeben oder über Connectors an Apps wie Canva, Miro und Adobe senden.

Codex Design ist unser unabhängiges Plugin für Codex. Es ergänzt ein lokales Canvas, auf dem Codex die Screens, die es gestaltet, als Live-HTML-Seiten ablegt, neben Mockup-Bildern und deinen Referenzen. Wähle ein Element aus, um Schrift, Farbe oder Abstände in einer Seitenleiste zu ändern, oder verfeinere weiter, indem du Codex darum bittest. Deine Canvas-Projekte liegen auf deinem Computer.

Im direkten Vergleich

Claude DesignCodex Design
Was es erzeugtMockups, klickbare Flows, One-Pager und andere visuelle AssetsWebsite- und App-Mockups als Live-HTML-Seiten, dazu Mockup-Bilder
Wo es läuftIn Claude-Unterhaltungen und im Artifacts-Tab sowie in Claude Code mit /designIn Codex, mit dem Canvas auf deinem Computer (macOS und Linux)
Ausgabe und CodeExport als PPTX, PDF oder HTML; Übergabe an Claude Code; Connectors zu Canva, Adobe, Miro, Lovable, Vercel und anderenHTML-Seiten und Bilder in einem lokalen Projekt; Codex kann das gewählte Design anschließend in deinem Code bauen
PreiseIn jedem Claude-Plan enthalten, auch in Free, im Rahmen der Nutzungslimits deines Plans. Claude Pro kostet $20 pro MonatKostenlos für ein Canvas-Projekt; Pro kostet $5 pro Monat für unbegrenzt viele Projekte. Die Codex-Nutzung wird separat gerechnet
Ideal fürClaude-Nutzer, die UI, Präsentationen und Dokumente an einem Ort haben wollen, abgesichert durch ein DesignsystemCodex-Nutzer, die UI-Richtungen vor dem Bauen vergleichen und verfeinern wollen

Claude Pro kostet bei jährlicher Abrechnung $17 pro Monat. Die eigenständige Website claude.ai/design bleibt bis zum 14. Dezember 2026 geöffnet. Dieser Vergleich gibt den Stand der offiziellen Websites und Dokumentationen beider Produkte vom 6. November 2026 wieder.

Wann Claude Design die bessere Wahl ist

Claude Design passt in diesen Fällen besser:

  • Du arbeitest in Claude oder Claude Code. Es ist schon in deinem Plan enthalten, und /design in Claude Code erstellt, bearbeitet und synchronisiert Designprojekte, ohne das Terminal oder die Desktop-App zu verlassen.
  • Du brauchst mehr als App-Screens. Es erstellt auch One-Pager und Marketing-Material, und Claude Slides und Claude Docs stehen daneben für Präsentationen und Dokumente bereit.
  • Dein Team hat ein Designsystem, das durchgesetzt werden soll. Importiere ein oder mehrere Designsysteme aus einem GitHub-Repository, aus Designdateien oder per Upload. Claude prüft seine Ergebnisse dagegen, bevor du sie siehst, und Admins können ein Team auf ein freigegebenes System festlegen.
  • Du passt gern von Hand an. Kommentiere jedes Element, bearbeite Text direkt, nutze die Regler, die Claude für Abstände und Farben erzeugt, und ziehe, skaliere und richte Elemente aus.
  • Du teilst Arbeit über die Entwicklung hinaus. Jedes Artifact bekommt einen Link, der privat bleibt, bis du ihn teilst, und Connectors senden Arbeit an Tools wie Canva, Miro und Adobe.

Wann Codex Design die bessere Wahl ist

  • Du arbeitest in Codex. Codex Design bringt ein Design-Canvas in den Agenten, den du ohnehin nutzt, du musst also nicht das Tool wechseln, um zu gestalten. Bitte Codex in derselben Unterhaltung, die gewählte Richtung umzusetzen.
  • Du willst Screens nebeneinander sehen. Das Canvas ist dafür gebaut, mehrere Richtungen nebeneinander anzuordnen, mit Mockup-Bildern, die Codex generiert, und deinen eigenen Referenzen.
  • Du willst schnelle visuelle Anpassungen. Wähle ein Element in einem HTML-Mockup aus und ändere Schrift, Farbe, Abstände und weitere Eigenschaften in der Seitenleiste.
  • Du willst deine Arbeit auf deinem eigenen Rechner behalten. Canvas-Projekte liegen lokal als Dateien. Codex verarbeitet trotzdem alles, was du ihm als Kontext gibst.
  • Du willst, dass es mit deinem bestehenden Codex-Plan funktioniert. Es gibt keinen separaten API-Schlüssel und kein Token-Guthaben. Ein Canvas-Projekt ist kostenlos und Pro kostet $5 pro Monat für unbegrenzt viele Projekte; die Codex-Nutzung zählt auf deinen Codex-Plan.

Häufige Fragen

Gibt es Claude Design für Codex?

Claude Design läuft in Claude und Claude Code. Für Codex gibt es Codex Design, ein unabhängiges Plugin, das einen ähnlichen Designschritt ergänzt: ein Canvas, auf dem Screens als Live-HTML nebeneinander erscheinen, mit visueller Bearbeitung von Schriften, Farben und Abständen. Es wird mit einem einzigen Prompt in Codex installiert; siehe die Installationsanleitung.

Ist Claude Design kostenlos?

Laut Anthropic ist Claude Design in jedem Claude-Plan enthalten, auch in Free. Es zählt auf die Nutzungslimits deines Plans, und größere Anfragen verbrauchen mehr davon.

Soll ich für UI-Design Claude Code oder Codex nehmen?

Nimm den Agenten, den dein Team schon nutzt, und ergänze die Design-Werkzeuge, die ihm fehlen. Beide schreiben starken Frontend-Code. Unser Vergleich von Codex und Claude Code geht die Unterschiede durch.

Weiterlesen

Ein unabhängiges Plugin für Codex. Nicht mit OpenAI verbunden und nicht von OpenAI unterstützt.