Bolt entwickelt autonomen Design-System-Agenten auf dem Claude Agent SDK

Das Problem mit fragmentierten Designsystemen

Die meisten Unternehmen haben ihr Designsystem nicht zentral an einem Ort. Die Typografie befindet sich in einem Google-Doc. Die Komponenten sind auf Figma-Dateien, Storybook-Instanzen und GitHub-Repositorys verteilt. Richtlinien für Abstand und Layout befinden sich entweder in einem Wiki oder im Kopf eines Entwicklers.

Diese Lücke ist zu einem großen Hindernis für die Einführung von KI-Entwicklungstools in Unternehmen geworden. PMs und Designer können Ideen in Tools wie Bolt als Prototypen umsetzen, aber ohne Zugriff auf die eigentliche Designsprache des Unternehmens sieht das Ergebnis zu generisch aus. „Es kommt häufig vor, dass wenn nur Bolt verwendet wird, Bolt keine Ahnung vom Designsystem Ihres Unternehmens hat“, so Dominic Elm, Founding Engineer bei StackBlitz. „Und ein Designsystem ist ein ziemlich komplexes System. Es enthält Richtlinien, Typografie, Abstände, Layout, all diese Dinge."

Die Tools können schnell Code generieren, aber die Ausgabe entspricht nicht den internen Standards eines Unternehmens. Prototypen enden als Wegwerfprodukte: Ein PM entwickelt etwas, um eine Idee zu kommunizieren, aber ein Entwickler schreibt es komplett um, bevor es ausgeliefert werden kann. Diese Kluft zwischen Prototyp und Produktionscode bremst Nicht-Entwickler aus.

Warum StackBlitz auf dem Claude Agent SDK aufgebaut hat

StackBlitz hatte seinen eigenen internen Agenten für Bolt entwickelt, aber da das Team eine umfassende Überarbeitung plante, kam das Claude Agent SDK zum richtigen Zeitpunkt. „Wir wollten an unserem Agenten eine Menge Verbesserungen vornehmen und planten eine Version 2", erklärte Elm. „Aber dann kam das Agent SDK und es machte einfach Sinn, auf etwas zu setzen, das bereits von so vielen Menschen verwendet wird."

Durch diese Entscheidung konzentrierte sich das Team nicht mehr auf die Entwicklung und Wartung einer Agenteninfrastruktur, sondern auf Produktinnovationen. Das KI-Team von StackBlitz ist klein. „Wir haben ein paar Mitarbeiter, aber das sind wahrscheinlich nicht annähernd so viele Leute, wie an Claude Code arbeiten", fügte Elm hinzu. Die etablierte Nutzerbasis von Claude Code machte es noch attraktiver: Das Agent SDK bedeutete, dass StackBlitz diese Investition nicht aufbringen musste, um dieselben zugrunde liegenden Funktionen zu erhalten. Das Agent SDK basiert auf demselben Harness, das auch Claude Code zugrunde liegt. So konnte StackBlitz diese Funktionen übernehmen, ohne eine entsprechende Investition tätigen zu müssen.

Entwicklung eines Designsystem-Agenten mit Claude

StackBlitz war eines der ersten Teams, die voll auf das Agent SDK setzte. Und Elm ist begeistert von der Flexibilität der Plattform: „So wie sie derzeit gestaltet ist, kann man fast jeden Workflow erstellen“, sagte er.

Der Designsystem-Agent ist ein gutes Beispiel dafür. Zunächst wird alles aus dem Unternehmen erfasst: Storybook-Websites, GitHub-Repositorys, npm-Pakete, Figma-Tokens, Dokumentationsdateien. Die Nutzer verweisen den Agenten auf alle ihre Quellen. Er überprüft jede einzelne gründlich, löst dabei Konflikte, ordnet Design-Tokens zu und versteht Komponentenvarianten. Das Ergebnis ist eine konsolidierte Zwischendarstellung des vollständigen Designsystems. Der Agent verwendet Claude Opus 4.7, das laut Elm „die besten Ergebnisse insgesamt" für die für die Recherchephase notwendige, durchgängige Logik. zeigte.

Diese Recherchephase kann 40 Minuten bis eineinhalb Stunden dauern, je nachdem, wie viele Quellen herangezogen werden, im Durchschnitt etwa 53 Minuten. Das ist eine andere Art von Aufgabe als eine typische fünfminütige Prototypenentwicklung. Die Hooks des SDKs machten dies möglich. Mit dem Stop-Hook kann das Team einen Agenten über einen langen Workflow hinweg am Laufen halten, Feedback geben und die Richtung mitten im Lauf verändern. Benutzerdefinierte Subagenten bearbeiten parallele Aufgaben und halten das Kontextfenster des Hauptagenten sauber. „Das ist hilfreich für die Gesamtgeschwindigkeit, da Sie die Dinge parallel laufen lassen können“, merkte Elm an. „Außerdem blockiert der Subagent nicht das Hauptkontextfenster.“

Das Ergebnis wird in Bolt als navigierbare Bibliothek aller Komponenten, Abschnitte und Seiten des Unternehmens zentral abgelegt. StackBlitz hat Bolt bewusst nicht zur Source of Truth für das Designsystem eines Unternehmens gemacht. Stattdessen kann ein Team, wenn es seinerseits das Designsystem aktualisiert, zu Bolt zurückkehren und neu indizieren. Danach führt der Agent eine inkrementelle Aktualisierung durch. Sobald das neue Designsystem eingerichtet ist, wählt ein Nutzer es aus, fordert Bolt auf, etwas zu erstellen, z. B. einen Autokonfigurator oder eine Vergleichsseite, und die Ausgabe entspricht den tatsächlichen Komponenten, der Typografie und den Abständen des Unternehmens. Der Agent überprüft dann seine eigene Arbeit in einer Überprüfungsschleife. „Sie entwickeln etwas und überprüfen dann nochmals: Sieht das so aus, wie es aussehen soll?", sagte Elm und verglich den Prozess mit der Art und Weise, wie ein Entwickler die Ausgabe anhand einer Figma-Datei überprüfen würde.

Von Wegwerf-Prototypen zu Produktionscode

Der Designsystem-Agent ändert das, was PMs und Designer liefern können. Das Designsystem wird einmal in einem autonomen Durchlauf von durchschnittlich 53 Minuten erstellt. Ab diesem Zeitpunkt kann jedes Teammitglied Bolt auffordern, markengerechte Prototypen in etwa fünf Minuten zu erstellen und so Code zu generieren, der mit minimaler Nacharbeit in das Produktivsystem gehen kann. „Die Idee ist, dass Bolt einen Prototyp erstellen kann, der mehr als nur ein Wegwerfprodukt ist", sagte Elm. „Sie können ihn einem Entwickler übergeben, und dieser kann den Code nahezu unverändert ins Produktivsystem übernehmen und dabei einfach die Geschäftslogik mit den Komponenten verknüpfen."

StackBlitz erreicht eine Cache-Effizienz von etwa 90 % mit Agent SDK, sodass die Inferenzkosten über diese lang laufenden Workflows hinweg überschaubar sind. Über 10.000 Nutzer haben bereits ihre eigenen Designsysteme in Bolt hochgeladen.

Blick in die Zukunft

StackBlitz zielt auf eine breitere Einführung in Unternehmen ab, die Produktionscode über Bolt ausliefern. „Das Ziel ist es, PMs und Designer ganz in den Entwicklungszyklus zu integrieren damit sie vollumfänglich zum Produktionscode beitragen können", sagte Elm. „Das ist für fast alle das ultimative Ziel.“