Stripes Designchefin Katie Dill warnt vor „Zombie-UI“: KI-Werkzeuge liefern in Minuten Oberflächen, die fertig aussehen und keiner Marke mehr gehören. Dills Team schloss KI-Agenten zuerst per MCP-Server an die Design-Dokumentation an und stellte dann auf eine Kommandozeile mit kompletten Vorlagen und Abläufen um. Der Umbau zeigt, was ein Design-System für Agenten heute leisten muss.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

Die Zombie-UI hat nach Katie Dills Worten ein Vorbild aus Beton: Nach dem Zweiten Weltkrieg kopierten Bauträger den Stil der Moderne so lange ohne eigene Absicht, bis überall austauschbare Zweckbauten standen. Einen ähnlichen Bauboom erlebt die Softwarebranche mit KI, argumentierte die Designchefin von Stripe am 10. September 2026 auf dem Lenny and Friends Summit in San Francisco.[1] Selbst Stripes erster KI-Anschluss an das eigene Design-System konnte drei Personen mit demselben Prompt drei verschiedene Ergebnisse liefern, räumte Dill ein.

Das Wichtigste in Kürze

  • Katie Dill nennt generische KI-Oberflächen ohne Markenbezug „Zombie-UI“ und vergleicht sie mit den Zweckbauten der Nachkriegszeit.
  • Ein MCP-Server über Stripes Design-Dokumentation lieferte zu unscharfe Ergebnisse, Stripe baute deshalb eine Kommandozeile auf dem Design-System.
  • Das neue System enthält komplette Vorlagen und Abläufe statt nur Komponenten und reicht die Dokumentation erst im passenden Moment weiter.
  • Die Qualitätskontrolle rückt ans Ende: Die Eröffnungsanimation des Summits brauchte 56 Durchgänge.

Warum reichte Stripe der MCP-Server nicht?

Setzkasten mit blauen Lettern, Zahlen und Figur
Stripe entwickelte eine Kommandozeile für sein Design-System, um den MCP-Server präziser zu steuern und Dokumentation bedarfsgerecht nachzuladen

Der MCP-Server kannte Stripes Design-Dokumentation, lieferte nach Dills Angaben aber keine ausreichend genauen Ergebnisse. Stripe baute deshalb eine Kommandozeile auf dem Design-System, die das Modell enger führt und die Dokumentation erst im passenden Moment nachlädt.[1]

Die Kommandozeile läuft dort, wo Stripes Entwickler ohnehin arbeiten. Den dosierten Nachschub an Dokumentation begründete Dill mit Context Rot: Je länger der Kontext, desto unzuverlässiger arbeitet ein Sprachmodell. Die Datenbankfirma Chroma maß diesen Effekt im Juli 2025 an 18 Modellen, darunter GPT-4.1, Claude 4 und Gemini 2.5.[2]

Entscheidender ist der Umfang: Stripes neues System beschreibt nicht mehr nur Komponenten und Einzelbausteine, sondern komplette Vorlagen und Abläufe. Das Design-System legt so fest, wie sich ein Stripe-Produkt verhalten soll und wie die Teile zusammenspielen. Alte Design-Systeme skalierten Einheitlichkeit, neue müssten Absicht skalieren, fasste die Stripe-Designchefin zusammen.

Als historisches Vorbild nannte Dill Johannes Gutenberg. Dessen Schrift für die 42-zeilige Bibel umfasste rund 290 verschiedene Zeichen mit Ligaturen, Abkürzungen und Breitenvarianten, damit der Blocksatz ohne Löcher im Weißraum gelang.[3] Gutenbergs Regelwerk ließ den Maschinensatz wie Handschrift wirken.

Einen MCP-Server als Anschluss für Agenten bieten inzwischen fast alle großen Systeme: 19 von 20 führenden Design-Systemen stellen laut einer Bestandsaufnahme vom Juli eine solche Schnittstelle bereit und Microsoft liefert sein Design-System als MCP-Server aus. Stripes Erfahrung zeigt, wie wenig der Anschluss allein festlegt. Erst feste Vorlagen und Regeln machen das Modell nach Dills Worten „weit folgsamer“.

Wie sieht Qualitätskontrolle aus, wenn KI in Minuten liefert?

Die Prüfung wandert ans Ende: Früher siebte schon die Personalplanung aus 20 Ideen eine heraus, heute baut ein Team 20 Ideen in einer Woche. Dill fordert deshalb eine Redaktionsrolle, die das fertige Produkt wie ein Nutzer durchgeht und prüft, ob das Produkt das Problem tatsächlich löst.[1]

Einen gesonderten Qualitätsmaßstab für KI-Arbeit lehnt Dill ab. Nutzern sei gleichgültig, wie ein Produkt entstand, entscheidend sei allein, ob das Ergebnis gut ist. Bei der Kritik einer Stripe-Anzeige kam das Team so auf 17 Verbesserungspunkte, darunter weichere Kanten und gezielte Milchglaseffekte.

Wie viel Arbeit nach dem ersten Entwurf steckt, zeigte Dill an der Eröffnungsanimation des Summits. Ein Stripe-Designer baute die Szene als 3D-Modell und animierte die Einzelteile mit KI-Hilfe. Die erste Fassung ruckelte, erst nach 56 Durchgängen stand die Animation. Ohne KI hätte das Team eine so aufwendige Szene nach Dills Einschätzung womöglich gar nicht versucht.

Ein zweites Stripe-Werkzeug gegen generische Prototypen beschreibt eine Fallstudie des Investors Designer Fund. Designmanager Owen Williams baute ProtoDash, das die Komponenten des Design-Systems Sail mit strikten Regeln für das KI-Modell verband und die Einrichtung auf unter zwei Minuten senkte.[4] Anlass waren Prototypen aus gängigen KI-Werkzeugen mit falschen Schriften und erfundenen Komponenten. Produktmanager zählen laut der Fallstudie zu den eifrigsten Nutzern.

Vom Komponentenkasten zum Regelwerk
Wie Stripe sein Design-System für KI-Agenten umbaute
3 Ergebnisse
aus demselben Prompt beim ersten Anschluss per MCP-Server
56 Durchgänge
bis die KI-gestützte Eröffnungsanimation des Summits stand
19 von 20
führenden Design-Systemen bieten bereits einen MCP-Server
290 Zeichen
umfasste Gutenbergs Schrift für den Blocksatz der Bibel

Design-System früher und heute nach Katie Dill

Aspekt
Früher
Heute bei Stripe
Inhalt
Früher: Komponenten und Einzelbausteine
Heute: komplette Vorlagen und Abläufe
Leser
Früher: Designer füllen Lücken selbst
Heute: Agenten brauchen jede Regel schriftlich
Ziel
Früher: Einheitlichkeit
Heute: Absicht
Qualitätsfilter
Früher: vor dem Bau, über knappe Kapazität
Heute: nach dem Bau, durch eine Redaktionsrolle

Ein MCP-Server macht ein Design-System für Agenten lesbar, aber noch nicht verbindlich. Entscheidend sind Vorlagen, die eine Marke erkennbar halten, und ein Mensch, der das Ergebnis zurückweisen darf.

Markus Seyfferth, Chefredakteur Dr. Web
Zitat teilen

Was sollten Agenturen und Inhouse-Teams jetzt anpassen?

Teams sollten ihr Design-System von der Komponentenbibliothek zur Sammlung geprüfter Seitenvorlagen und Abläufe ausbauen und die Abnahme als eigene Rolle besetzen. Für Angebote unter dem Barrierefreiheitsstärkungsgesetz gehören die Zugänglichkeitsregeln direkt in diese Vorlagen.

Seit dem 28. Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz viele Online-Angebote für Verbraucher auf die Norm EN 301 549 und damit auf WCAG 2.1 in Stufe AA. Baut ein Agent Oberflächen ohne Designer im Raum, sichern vor allem Vorlagen mit eingebauten Kontrasten, Fokuszuständen und Tastaturbedienung die Barrierefreiheit ab.

Die Voreinstellungen von Frameworks und Baukästen verstärken den Einheitslook im Webdesign zusätzlich. Gegen die wahrscheinlichste Lösung des Modells hilft nach Dills Rat vor allem eine schriftlich festgehaltene Markenhaltung. Für den Einstieg bieten sich diese Schritte an:

  • Tonalität, Farbwelt und No-Gos der Marke so aufschreiben, dass ein Agent sie als Regel lesen kann.
  • Für die häufigsten Seitentypen und Abläufe fertige Vorlagen anlegen, statt nur Komponenten zu dokumentieren.
  • Die Dokumentation in kleine, gezielt abrufbare Einheiten teilen, statt das ganze Handbuch in den Kontext zu laden.
  • Eine Person benennen, die generierte Oberflächen vor dem Livegang als Nutzer durchklickt und zurückweisen darf.

Den Blick vom Werkzeug auf das Ergebnis lenkt auch Luke Wroblewskis Regel für KI-Produkte. Dill zieht daraus eine klare Bilanz: Weil KI die Kosten des Bauens senkt, sollten Teams einen Teil der Ersparnis in den Feinschliff stecken.

Quellen

[1] Lenny’s Podcast: „How to scale intent, quality, and artistry with AI | Katie Dill (Stripe)“ (Vortragsvideo vom Lenny and Friends Summit)

[2] Chroma: „Context Rot: How Increasing Input Tokens Impacts LLM Performance“

[3] Finaltype: „The Justification of the Gutenberg Bible“

[4] Designer Fund: „How Stripe creates room for good ideas to spread“

Mehr Newshunger?

4,6 12 Bewertungen

Wie hat Ihnen dieser Artikel gefallen?