So nutzt Decagon KI zur Sättigung von Designsystemen

Der Kundenservice ist die nächste Branche, die durch KI umgestaltet werden soll, und Decagon baut die Plattform dafür. Bereits nach drei Jahren decken die KI-Agenten des Unternehmens Sprache, Chat und E-Mail ab und ersetzen damit die Ticketwarteschlangen und Wartezeiten, die den Kundenservice seit Jahrzehnten bestimmt haben. So landete Decagon auf der CNBC Disruptor 50-Liste – aber was sie dorthin brachte, ist nicht nur das, was sie entwickeln. Es geht darum, wie sie entwickeln.

Aufbau eines Designsystems für Qualität in großem Maßstab

In einem KI-nativen Unternehmen wie Decagon bewegt sich der Design-to-Code-Zyklus schnell, aber er kann genauso schnell zusammenbrechen. Coding-Agenten benötigen präzise Eingaben, um zuverlässige Ausgaben zu erzeugen. Aber ohne ein Designsystem läuft jede Komponente auf eine Ermessensentscheidung hinaus – und das ist nicht skalierbar. Als Produktdesignerin Jennifer Xu zu Decagon kam, gab es kein Designsystem; nur ein wachsendes Produkt und ein Team, das schnell genug voranschritt, um das Fehlen eines solchen zu spüren. Inkonsistenz über die Plattform untergrub den Glanz, den sie ihren Enterprise-Kund*innen bieten mussten, und das Hin und Her zwischen Design und Entwicklung kostete Zeit und Aufwand. Um ihr Designsystem namens Deco zu erstellen, arbeiteten Designer*innen und Ingenieur*innen von Anfang an Hand in Hand. „Wir konnten von Beginn an über viele der Randfälle und bereits existierenden Codes nachdenken“, sagt Jennifer. Das bedeutete, durch Fragen zu arbeiten, die leicht hätten aufgeschoben und später teuer überarbeitet werden können: Was passiert im Fokusmodus? Welche Zustände benötigt jede Komponente – deaktiviert, Nur-Lese, Fehler, Warnung? Platzhalter oder kein Platzhalter?

Das Ergebnis ist eine organisationsweite Bibliothek in Figma, die nun Hunderte von Komponenten, Stilen und Variablen umfasst, die die meisten Anwendungsfälle über die gesamte Plattform für mehrere Teams abdecken. Laut den Analysen der Bibliothek von Figma verzeichnete sie zehntausende Einfügungen in 30 Tagen, ein Zeichen dafür, dass sie genutzt wird. „Mit einer ausgebauten Bibliothek führen wir keine Diskussionen über Stile oder Implementierung“, sagt Jennifer. „Ingenieur*innen haben so einen klaren Überblick darüber, welcher Button oder welches Tabellenformat verwendet werden sollte. Es bedeutet auch, dass wir eine gemeinsame Sprache haben. Als Designer kann ich mich auf sehr ähnliche Grundbausteine stützen, die Ingenieur*innen verwenden, sodass es viel einfacher ist, zu kommunizieren, wenn wir ein Produkt entwickeln oder über einen Flow nachdenken.“

Deco wird in der gesamten Organisation veröffentlicht und hilft Designer*innen, neue Bildschirme aus bestehenden Komponenten zusammenzustellen, anstatt diese von Grund auf neu zu erstellen. „Es ist auch einfacher für Entwickler*innen, Arbeit zu schaffen, die mit unseren gesamten Designzielen übereinstimmt“, sagt Jennifer. „Da wir schnell liefern wollen, möchten wir sicherstellen, dass alles noch aufeinander abgestimmt ist, und ein Designsystem ist eine wirklich großartige Möglichkeit, eine einzige Quelle der Wahrheit zu haben.“

Die Lücke zwischen Design und Code schließen

Coding-Agenten interpretieren Spezifikationen nicht so, wie es Entwickler*innen tun würden. Sie arbeiten nur mit dem, was ihnen gegeben wird. Wenn das Gegebene inkonsistent ist, spiegelt sich dies im Ergebnis wider. Bei Decagon bedeutete diese Übergabe früher ein vertrautes Hin und Her: Designer*innen exportierten Spezifikationen, Entwickler*innen interpretierten sie, Unstimmigkeiten wurden in der Überprüfung festgestellt und der Zyklus wiederholte sich. Der Figma MCP-Server hat das geändert.

Das Ingenieurteam von Decagon verlagerte die Komponenten des Designsystems in Storybook und erstellte dann einen Skill für die Programmierer*innen, um genaue Komponenten beim Implementieren von Designs zu verwenden. Ein weiterer Skill erlaubt es Designer*innen, neue Komponenten hinzuzufügen, wodurch Figma und Code kontinuierlich einheitlich bleiben. „Unsere Agenten haben Figma MCP aktiviert, sodass alle Spezifikationen, der Code und die Arbeitsfläche in einem Kreislauf bleiben, anstatt dass man hin- und herspringen muss“, sagt Jennifer.

Die Verbindung zu Deco über Figma MCP beschleunigte das Iterationstempo. Jetzt können Coding-Agenten direkt von Figma lesen, um hochauflösende Ausgangspunkte zu erstellen. „Mit MCP kann ich einfach einen Link aus meinem Figma kopieren und in den Coding-Agenten einfügen. Es wird nicht nur das Designkontextwissen genutzt, sondern auch auf unsere Designsystem-Komponenten abgebildet“, sagt Jennifer. „Es kann Dinge erschaffen, die wirklich hochdetailliert und nah an unserem Design sind, ohne viele kleine Iterationen durchlaufen zu müssen.“

Kundenobsession greifbar gemacht

Etwa 70 Prozent der Roadmap von Decagon stammen direkt von den Kund*innen. Es ist nicht nur ihre Philosophie, es ist der Kern dessen, wie das Team arbeitet. „Wir machen interaktive Roadmap-Sessions mit dem Team eines Kunden, um sicherzustellen, dass die Funktionen, die wir liefern, das adressieren, was sie benötigen“, sagt Bihan Jiang, Produktdirektor bei Decagon. Die Möglichkeit, Mockups und funktionierende Prototypen in Figma zu präsentieren, ist zentral für diesen Prozess. „Tools wie Figma Make und Verbinder zu all unseren Systemen ermöglichen es uns, bei den Produkten, die wir entwickeln, die Grenzen zu erweitern“, fährt sie fort.

Anstatt Anforderungen zu sammeln und ein Endprodukt zu präsentieren, kann das Team jetzt 10 verschiedene Prototypen erstellen und diese 10 verschiedenen Kund*innen zeigen. Bihan Jiang dazu: „Das Ergebnis ist ein besseres Produkt, das viel schneller erstellt wird.“

Interaktive Dashboards, Kennzahlen und KI-Insights sind zentral für das, was Decagon ihren Kunden bietet, die sowohl quantitative als auch qualitative Daten verstehen müssen – wie Kundenzufriedenheitswerte und Stimmungen in Gesprächen über verschiedene Kanäle. Ein Produktmanager von Decagon nutzt Make, um Prototypen für neue Diagramme zu erstellen und Seiten neu zu gestalten, um verschiedene Datensätze basierend auf den Anfragen von Kund*innen anzuzeigen. „Der Produktmanager könnte sagen: ‚Ich möchte, dass Sie es im Stil dieser Seite machen‘ und einen Figma-Screenshot einfügen, und das würde es uns ermöglichen, über das Tool und das Diagramm im Kontext der gesamten Plattform nachzudenken“, sagt Jennifer. „Dann könnten wir mit unserem Ingenieurteam und unserem kundenbezogenen Team sprechen, um zu sehen, ob die Änderung tatsächlich nützlich ist, bevor wir viele Ingenieur- und Designressourcen investieren.“

Dasselbe Prinzip galt, als das Team ein interaktives Diagramm überarbeiten wollte, um es übersichtlicher und benutzerfreundlicher zu gestalten. Der PM speiste das ursprüngliche Diagramm in Make ein, beschrieb die gewünschten Änderungen und sendete dies an den Entwickler. Jennifer sagt: „Es war viel einfacher als der Prozess, dies für Designer*innen zu übersetzen und Designer*innen zum Erstellen eines Mocks zu benötigen und dann noch Entwickler*innen zum Entwickeln. Es reduzierte die Entwicklungszeit.

High-Fidelity-Prototypen ermöglichen es dem Team, von Anfang an in einem visuellen Medium zu arbeiten, anstatt Ideen von Dokumenten in Wireframes zu übersetzen. „Als Designerin denke ich visuell und wenn man an Analytics arbeitet, ist das Problem visuell“, sagt Jennifer. „Ich sehe es als Bild, nicht als Dokument. Daher ist es nützlich, von Anfang an in der Modalität zu denken, in der das Endprodukt ist.“ Dieser Instinkt, konkret zu werden – und es frühzeitig den Kund*innen zu präsentieren – ist Teil der DNA von Decagon geworden: „Es ist ein wichtiger Teil unserer Kultur, Figma als Teil unseres Brainstormings zu verwenden. Dies ermöglicht eine schnellere Zusammenarbeit und eine höhere Detailtreue als zuvor.“

Decagon nutzt KI nicht nur auf der Plattform, die sie anbieten, sondern auch darin, wie sie diese entwickeln. Das Designsystem hält das Handwerk konsistent, während das Team skaliert. MCP sorgt dafür, dass Design und Code übereinstimmen, sodass nichts in der Übersetzung verloren geht. Und Figma Make legt visuelles Denken in die Hände von allen, die eine testwürdige Idee haben. „Diese neue Welt des Designs ist wirklich aufregend“, sagt Jennifer, „und ich denke, wir stehen wirklich an der Spitze davon. Es ermöglicht uns, qualitativ hochwertige Dinge sehr schnell zu liefern.“ Für Decagon ist es am wichtigsten, Geschwindigkeit zu gewinnen, ohne das Handwerk zu opfern.