Anthropic überarbeitet Claude Design: Bidirektionale Code-Handoffs und Design-System-Importe
trending_up Trend: anthropic

Anthropic überarbeitet Claude Design: Bidirektionale Code-Handoffs und Design-System-Importe

calendar_month 18. Juni 2026

Anthropic überarbeitet Claude Design: Bidirektionale Code-Handoffs und Design-System-Importe

Zusammenfassung

Anthropic hat ein umfassendes Update für sein Tool „Claude Design“ veröffentlicht. Die wichtigsten Neuerungen umfassen den direkten Import von Design-Systemen aus bestehenden Codebasen oder Figma-Dateien, bidirektionale Handoffs zu Claude Code über einen neuen Figma-MCP-Server sowie ein optimiertes Token-Konsummodell. Letzteres verlagert Rechenprozesse nach vorne und reduziert den Token-Verbrauch bei iterativen Designprozessen um über 50 %. Zudem wurden die wöchentlichen Token-Limits für alle Tarife verdoppelt. Das Update zielt darauf ab, die Lücke zwischen Designern und Entwicklern durch reibungslose Workflows zu schließen.

Was ist passiert?

Am 17. Juni 2026 hat Anthropic eine grundlegende Überarbeitung von Claude Design vorgestellt. Das Tool, das ursprünglich im April 2026 als Preview gestartet war, erhält damit tiefgreifende Integrationen in Entwickler-Workflows:

  • Design-System-Importe: Claude Design kann nun Design-Token und Komponenten-Bibliotheken direkt aus einer bestehenden Codebase (z. B. React, Tailwind) oder aus Figma-Dateien extrahieren.
  • Figma MCP Server & Claude Code: Über ein neues Model Context Protocol (MCP) kann Claude Code direkt mit Figma kommunizieren. Dies ermöglicht bidirektionale „Round-Trips“, bei denen Code-Änderungen in das Design zurückfließen und umgekehrt.
  • Token-Effizienz: Durch eine Neustrukturierung der Konversationsiterationen wird der Rechenaufwand effizienter verteilt, wodurch der Token-Verbrauch um mehr als die Hälfte sinkt.
  • Erhöhte Limits: Anthropic hat gleichzeitig die wöchentlichen Token-Limits für Pro-, Max-, Team- und Enterprise-Nutzer verdoppelt.

Warum es wichtig ist

Der Übergang von statischen Design-Mockups zu funktionalem Code war historisch gesehen immer eine Reibungsfläche in Produktteams. Durch die Bereitstellung eines Figma-MCP-Servers und die Verknüpfung mit Claude Code etabliert Anthropic ein nahtloses Bindeglied zwischen Design-Spezifikationen und dem eigentlichen Code. Entwickler müssen Design-Systeme nicht mehr manuell nachprogrammieren, sondern können diese direkt importieren. Die Reduzierung des Token-Verbrauchs und die Verdopplung der Limits senken zudem die Kostenbarriere für Unternehmen, die generative Design-Tools in großem Stil einsetzen wollen.

Beweise

Die offizielle Ankündigung und begleitende Fachartikel bestätigen die Funktionalität und den Release am 17. Juni 2026:

  • Berichte in der Tech-Presse wie VentureBeat und Crypto Briefing beleuchten die geschäftlichen und technischen Details.
  • Figma hat die Partnerschaft und Integration in einem Blogpost detailliert beschrieben.
  • Die offiziellen Hilfeseiten auf Anthropic Support dokumentieren die neuen Steuerelemente und Limit-Erhöhungen.
  • Technische Tutorials auf YouTube demonstrieren die Nutzung des Figma MCP-Servers in realen Projekten.

Analyse

Dieser Schritt verdeutlicht einen größeren Trend im KI-Bereich: Reine Text-zu-Design-Generatoren stoßen an Grenzen, wenn sie nicht in professionelle Tools wie Figma integriert sind. Die Standardisierung über das Model Context Protocol (MCP) erweist sich als strategischer Vorteil für Anthropic, da es eine einfache Anbindung externer Datenquellen ermöglicht. Indem Anthropic das Problem des hohen Token-Verbrauchs angeht (das durch ständiges Neurendern von UI-Code entstand), wird das Tool wirtschaftlich tragbar für den täglichen Einsatz in Design- und Entwicklungsteams.

Praktische Erkenntnisse

  • Figma MCP Server testen: Teams sollten die Anbindung von Claude Code an Figma prüfen, um Design-Änderungen automatisiert in React/HTML-Code zu übersetzen.
  • Bestehende Design-Systeme importieren: Nutzen Sie die Importfunktion, um bestehende CSS- und Tailwind-Klassen direkt als Kontext für Claude bereitzustellen, statt sie manuell einzupflegen.
  • Token-Budgetierung anpassen: Durch den 50 % geringeren Token-Burn und verdoppelte Limits können komplexere iterative Design-Sitzungen durchgeführt werden, ohne die Budgetgrenzen zu sprengen.

Offene Fragen

  • Wie stabil verhält sich der Figma MCP-Server bei hochkomplexen Layouts mit verschachtelten Autolayout-Strukturen?
  • Werden andere Design-Plattformen wie Sketch oder Adobe XD ähnliche Protokolle unterstützen, um der dominanten Figma-Anthropic-Achse entgegenzuwirken?

Quellen

  1. Anthropic Labs Announcement: Introducing Claude Design by Anthropic Labs
  2. VentureBeat: Anthropic Overhaul of Claude Design
  3. Crypto Briefing: Anthropic Claude Design Overhaul
  4. Figma Blog: Introducing Claude Code to Figma
  5. Anthropic Support: Claude AI Collections
  6. YouTube: Claude Design Figma MCP Tutorial
  7. FindSkill: Claude Design Figma Import & Tokens