Design für beobachtende Agenten

Der Nutzer sitzt nicht mehr allein vor dem Bildschirm. Während der Mensch die Headline liest, parst ein KI-Agent das DOM, benennt die Buttons, bewertet die Selektoren und entscheidet, ob dein Produkt etwas ist, das er im Auftrag eines anderen steuern kann. Für einen einzigen Nutzer zu designen war ein Luxus von 2024.

Der Wandel ist strukturell, nicht kosmetisch. Cursor ruft deine Buttons auf. Claude liest deine Screenshots. Anthropic Computer Use klickt sich durch deine Formulare. OpenAI Operator kauft Dinge in deinem Checkout. Jede Oberfläche, die ein Mensch berührt, berührt jetzt auch ein Agent, mit anderen Kriterien dafür, was gut aussieht.

Zwei Zielgruppen, ein Bildschirm

Jede Produktoberfläche hat 2026 eine menschliche Ebene und eine Maschinenebene, gestapelt im selben DOM.

Die menschliche Ebene ist das, was Designer schon immer geliefert haben. Flow, Geschmack, Hierarchie, das Vertrauen, das ein Nutzer spürt, wenn ein Button tut, was das Label verspricht. Die Maschinenebene ist dieselbe Oberfläche, gelesen von einem anderen Nutzer. Stabile Selektoren, benannte Affordances, semantisches HTML, maschinenlesbarer Status, eine Struktur, die ein Agent ohne Mehrdeutigkeit parsen kann.

Der Fehler, den die meisten Teams machen: Sie halten die beiden Ebenen für dieselbe Ebene mit anderen Prioritäten. Das sind sie nicht. Ein Button kann für einen Menschen perfekt aussehen und für einen Agenten unsichtbar sein, wenn sein zugänglicher Name "hier klicken" lautet oder sein DOM-Knoten ein div mit Click-Handler ist.

Fünf Ebenen, auf denen Agent-Watching sichtbar wird

Agent-Watching ist ein Stack. Fünf Ebenen, an denen menschliche Ebene und Maschinenebene entweder übereinstimmen oder kämpfen: Tool-Oberflächen, Selektor-Stabilität, maschinenlesbare Struktur, Status-Lesbarkeit, Vertrauenssignale. Jedes Produkt, das für den dualen Nutzer designt, trifft Entscheidungen auf allen fünf, auch wenn es sie nicht so nennt.

Ebene 1: Tool-Oberflächen sind die benannten Buttons, die Agenten aufrufen

Eine Tool-Oberfläche ist jede Produktfähigkeit, die ein Agent per Name aufrufen kann. Cursors Tool-Calls, Claudes Tool Use, die Bildschirmaktionen von Anthropic Computer Use, die Run-Befehle von Vercel Sandbox. Der Agent denkt nicht in Pixeln, er denkt in benannten Verben.

Jede Hauptaktion in deinem Produkt ist ein Kandidat für eine Tool-Oberfläche. Stripe ist der Goldstandard, Jahrzehnte älter als der Agenten-Moment: Jede Aktion hat eine benannte, dokumentierte, vorhersagbare Affordance. customers.create tut, was der Name sagt. Ein Produkt, dessen Hauptaktionen in unbeschrifteten Buttons vergraben sind, ist ein Produkt, das ein Agent nur durch Raten steuern kann.

Der Design-Zug: Behandle jede wichtige Aktion als benanntes Tool. Das Label, die ARIA-Beschreibung, die Route, der API-Endpunkt und der Handler des Model Context Protocol sollten alle dasselbe Verb tragen. Agenten und Menschen greifen dann durch verschiedene Türen zur selben Affordance.

Ebene 2: Selektor-Stabilität ist der Vertrag des Designers mit dem Agenten

2024 konnte ein Designer <div onClick={handle}> ausliefern und es als erledigt betrachten. 2026 bricht genau dieses div jede Agenten-Integration an dem Tag, an dem jemand den Wrapper refaktoriert.

Selektor-Stabilität heißt sicherzustellen, dass die Affordances, die ein Agent gestern gelernt hat, auch morgen noch funktionieren. Drei Entscheidungen. Nutze semantisches HTML, wo es existiert: <button>, nicht <div>. Setze data-testid auf alles, was ein Agent oder Test-Runner finden muss. Halte zugängliche Namen über Releases hinweg stabil, genauso wie du API-Feldnamen stabil hältst.

Linear ist darin ungewöhnlich gut, weil Linear API-first gebaut wurde und die UI nur eine von vielen Oberflächen ist. Jede Hauptaktion hat einen stabilen Selektor und einen stabilen Namen. Die meiste Enterprise-SaaS tauscht bei einem Refactoring einen Klassennamen aus und bricht damit still jede Integration, die ihn berührt hat. Der Agent bekommt keine Deprecation-Mitteilung. Er funktioniert einfach nicht mehr.

Ebene 3: Maschinenlesbare Struktur ist das Design-Artefakt, das du früher übersprungen hast

Der Agent, der dein Produkt liest, liest auch deine Open-Graph-Tags, dein JSON-LD, deine Sitemap und zunehmend deine llms.txt- und AGENTS.md-Dateien. Jedes davon ist 2026 ein Design-Artefakt, keine Entwickler-Fleißarbeit.

AGENTS.md ist das neue README, nur dass die Zielgruppe ein Modell ist. Es sagt dem Agenten, was dein Produkt tut, welche Oberflächen sicher sind und welche Konventionen zählen. JSON-LD sagt dem Agenten, was jede Seite ist. Der Endpunkt des Model Context Protocol sagt dem Agenten, welche Tools dein Produkt anbietet und wie man sie aufruft.

Designer, die das für Engineering-Terrain halten, verschenken Hebelwirkung. Die Hierarchie dessen, was der Agent zuerst sieht, die Namen, die du deinen Tools gibst, die Beschreibungen, die du für jede Oberfläche schreibst: All das prägt das mentale Modell des Agenten von deinem Produkt, genauso wie Überschriften und Microcopy das des Menschen prägen.

Ebene 4: Status-Lesbarkeit heißt, dass eine Maschine erkennen kann, was gerade passiert ist

Ein Ladespinner ist für einen Menschen in Ordnung und für einen Agenten ohne Blick auf den Bildschirm unsichtbar. Ein Erfolgszustand, der nur durch ein grünes Aufblitzen kommuniziert wird, ist für jeden unlesbar, der kein Grün sehen kann. Ein Modal, das sich stillschweigend schließt, ist aus Sicht des Agenten eine Zustandsänderung, die nicht stattgefunden hat.

Status-Lesbarkeit macht jeden Zustand für eine Maschine erkennbar. Linears API liefert für jede Aktion ein stabiles Response-Objekt. Vercels Deploy-Zustandsautomat hat benannte Zustände, READY, BUILDING, ERROR, mit einer strukturierten Payload bei jedem Übergang. Claude Code streamt jeden Tool-Call und jedes Ergebnis als strukturierten Text, den der Agent parsen kann.

Der Design-Zug ist eine Statusebene, die der Agent neben der visuellen liest. Eine ARIA-Live-Region, die den neuen Zustand ansagt. Ein Toast mit strukturiertem role="status". Ein Response-Objekt, das der Agent zurückbekommt, wenn er das Tool aufgerufen hat. Der Mensch behält den Spinner, der Agent bekommt das strukturierte Event. Dieselbe Haltung wie beim Design für KI-Latenz, das in beiden Ebenen gleichzeitig lesbar sein muss.

Ebene 5: Vertrauenssignale schließen den Kreis, nachdem der Agent gehandelt hat

Wenn ein Agent im Auftrag eines Nutzers etwas tut, muss der Nutzer schnell sehen, was er getan hat. Die meisten Produkte überspringen diese Ebene, und sie entscheidet darüber, ob jemand der Integration genug vertraut, um sie ein zweites Mal zu nutzen.

Cursors Diff-Freigabe ist das Lehrbuchbeispiel. Der Agent bearbeitet Dateien, der Diff erscheint inline, der Nutzer akzeptiert oder lehnt pro Block ab. Claude Artifacts liefern dasselbe Muster in anderer Form. GitHub Copilot Workspace ist eine Plan-und-Ausführen-Oberfläche mit zwei Panels und Akzeptieren oder Ablehnen bei jedem Schritt.

Das Vertrauenssignal ist keine Dekoration. Es ist die tragende Oberfläche, die Agenten-Autonomie überlebbar macht. Ein Produkt, in dem der Agent handelt und der Mensch nur den Zustand danach sieht, verliert das Vertrauen beim ersten Mal, wenn etwas schiefgeht.

Was die Produkte, die es gut machen, tatsächlich ausliefern

Der Dual-User-Rahmen ist an ausgelieferten Produkten leichter zu erkennen. Kurze Teardowns, jeder konkret.

Cursor. Die Diff-Freigabe des Agenten ist die gesamte Vertrauensschleife. Inline akzeptieren und ablehnen pro Block, kompletter Datei-Diff sichtbar, der Agent committet nie ohne Zustimmung.

Claude Artifacts. Das Vorschau-Panel des Artifacts ist der Vertrag zwischen Agent und Mensch. Der Agent produziert, der Mensch prüft, das Artifact hat eine stabile URL und eine strukturierte Ausgabe, die der nächste Agent aufgreifen kann.

Anthropic Computer Use. Screenshots sind der Vertrag zwischen Agent und Produkt. Jede Entscheidung über visuelle Hierarchie und Labels ist jetzt eine Entscheidung über Agenten-Lesbarkeit. Ein Icon-Button ohne zugänglichen Namen ist ein Button, bei dem der Agent raten muss.

Vercel v0. Der Vertrag zwischen menschlichem Prompt und Agenten-Render ist die gesamte Oberfläche. Der Nutzer beschreibt, der Agent rendert, jedes Rendering ist ein prüfbares Artefakt.

Linear und Stripe. Beide sind in ihrer Haltung AI-native und von der Architektur her API-first. Jede Hauptaktion ist benannt, stabil, aufrufbar. Beide haben diese Disziplin ausgeliefert, bevor der Agenten-Moment kam, weshalb sich jedes Agenten-Produkt sauber mit ihnen integriert.

Replit Agent, Raycast und GitHub Copilot Workspace runden das Lineup ab. Replit zeigt die Arbeit des Agenten als live bearbeitbaren Workspace. Raycasts Command Palette ist eine Oberfläche, die Menschen und Agenten nativ teilen. Das Plan-und-Ausführen-Muster mit zwei Panels in Copilot Workspace legt den Plan schriftlich fest, bevor gehandelt wird, und macht Korrekturen mitten im Lauf möglich.

Für die komplette Muster-Bibliothek, die diese Produkte teilen, bildet die Übersicht UI-Designmuster für KI-Agenten sie ab, und der Beitrag AI-natives Produktdesign behandelt die Architektur darunter.

Anti-Patterns, die Agenten-Integrationen brechen

Fünf Fehlermuster tauchen immer wieder auf. Jedes ist eine Design-Entscheidung, kein Engineering-Versehen.

Div-Suppe. Alles Klickbare in <div> gewickelt, weil Styling so einfacher ist. Jedes Refactoring bricht jeden Selektor. Fix: semantisches HTML als Standard, mit data-testid auf allem, was eine Änderung von Klassennamen überleben muss.

Versteckte Affordances, die Hover brauchen. Der "Bearbeiten"-Button, der nur bei Mouseover erscheint. Agenten hovern nicht. Fix: per Tastatur erreichbare Affordances, die unabhängig vom Zeigerzustand im DOM auftauchen.

"Hier klicken"-Links. Fünf "Hier klicken"-Links auf derselben Seite sind für alles, was das DOM liest, fünf identische Affordances. Fix: Linktext, der das Ziel benennt.

Erfolgszustände nur durch Farbe vermittelt. Ein grüner Rand, ein grünes Aufblitzen, ein grünes Icon. Nichts davon ist ohne Vision-Modell erkennbar. Fix: ein strukturiertes Event, eine ARIA-Live-Region oder ein Response-Objekt neben dem visuellen Signal.

Modale Popups ohne auffindbares Schließen. Das "X", das ein <svg> ohne Label ist. Fix: ein zugänglich benannter Schließen-Button an jedem Modal und ein dokumentiertes Escape-Verhalten.

Das Muster hinter allen fünf: Alles, was von einem menschlichen Auge oder Zeiger abhängt, ist für die Hälfte deiner Nutzer unsichtbar.

Das Dual-User-Audit

Führe das auf jeder Oberfläche durch, bevor sie live geht. Sieben Fragen, drei Minuten.

1. Benannte Aktion. Jede Hauptaktion hat einen stabilen zugänglichen Namen und einen stabilen Selektor.
2. Maschinenzustand. Jede Zustandsänderung sendet ein strukturiertes Event.
3. Sichtbarer Diff. Jede vom Agenten ausgelöste Änderung erscheint vor dem Commit als prüfbares Artefakt.
4. Tastaturpfad. Jede Affordance, die nur per Hover erreichbar ist, ist auch ohne Zeiger erreichbar.
5. Stabiler Selektor. Jedes interaktive Element hat ein data-testid oder ein semantisches Äquivalent, das ein Refactoring übersteht.
6. Mensch in der Schleife. Destruktive Aktionen werden abgesichert, katastrophale doppelt abgesichert, umkehrbare laufen mit Undo.
7. Dokumentierte Oberfläche. Das Produkt liefert eine AGENTS.md oder ein Äquivalent, das einem Agenten sagt, was hier ist, was sicher ist und welche Konventionen zählen.

Eine Oberfläche, die sieben von sieben besteht, ist Dual-User-komplett. Eine Oberfläche, die drei oder mehr nicht besteht, wird mit ausgesperrtem Agenten ausgeliefert, egal wie gut die menschliche Ebene aussieht.

Das Audit ist eine Gewohnheit, keine einmalige Übung. Jede neue Oberfläche, jedes Refactoring, jedes Brand-Redesign läuft vor dem Release durch diese sieben Fragen, so wie jedes Redesign durch die Barrierefreiheit läuft. Agenten-Lesbarkeit ist die neue Barrierefreiheit, und sie zahlt sich genauso kumulativ aus.

Für die Version dieser Disziplin auf der Eingabeebene siehe Prompt-Oberflächen. Für das Korollar zu leeren Zuständen siehe Empty States sind das Produkt. Für das Fundament darunter zeigt Webdesign-Prinzipien, warum Struktur jetzt Ästhetik ist.

FAQ

Was bedeutet Design für KI-Agenten 2026 konkret?

Den Agenten als erstklassigen Nutzer deines Produkts zu behandeln, nicht als Bot, vor dem man sich schützen muss. Der Agent liest dein DOM, ruft deine Buttons auf und beurteilt dein Interface nach Kriterien, die der Mensch nie sieht. Jede Oberfläche braucht eine menschliche Ebene und eine Maschinenebene, die dieselben Affordances, denselben Zustand und dasselbe Vokabular teilen.

Wie unterscheidet sich das von barrierefreiem Design?

Das meiste überschneidet sich. Stabile zugängliche Namen, semantisches HTML, Erreichbarkeit per Tastatur, strukturierter Status: All das ist die Disziplin der Barrierefreiheit, angewendet auf einen neuen Nutzer. Die neue Schicht sind Tool-Oberflächen und maschinenlesbare Struktur, darunter MCP-Endpunkte, AGENTS.md-Dateien und JSON-LD. Behandle Barrierefreiheit als Fundament und Agenten-Lesbarkeit als nächstes Stockwerk.

Brauche ich einen MCP-Server, um agentenbereit zu sein?

Nicht am ersten Tag. Ein Produkt mit sauberem DOM, benannten Aktionen, stabilen Selektoren, strukturiertem Status und prüfbaren Artefakten ist bereits zu 80 Prozent agentenbereit. Ein MCP-Server macht die Arbeit des Agenten schneller und zuverlässiger, aber liefere zuerst die Struktur, dann das Protokoll.

Zwei Nutzer, ein Bildschirm, ein Job

Der Agent ist keine Bedrohung für Design. Er ist ein zweiter Nutzer mit anderen Bedürfnissen, und die Produkte, die ihn so behandeln, ziehen schon jetzt an denen vorbei, die es nicht tun.

Die meisten Teams designen noch für einen Nutzer. Das Brand Brief spricht vom Menschen, das Moodboard zeigt den Menschen, die Research-Interviews befragen den Menschen. Der Agent taucht nach dem Launch auf, wenn eine Integrationsanfrage eintrifft, und das Team muss Selektoren, Namen, Struktur und Vertrauen nachrüsten. Nachrüsten kostet immer mehr, als von Tag eins an für beide Ebenen zu designen.

Der Wandel ist nicht technisch, er ist eine Haltung. Behandle jede Oberfläche als Dual-User, führe das Audit vor dem Release durch, gib dem Agenten dieselbe Sorgfalt wie dem Menschen. Wer sich weigert, überlässt den Agenten-Traffic, die Partnerschaft und den Umsatz dem Produkt eines anderen.

Wenn du ein Team willst, das Brand und Produkt-UI mit beiden Ebenen gleichzeitig designt, statt sie später zusammenzuflicken, engagiere Brainy. Wir designen die menschliche Ebene wie immer, und die Maschinenebene wie den zweiten Nutzer, der sie tatsächlich ist.