export function Button({
intent = "primary",
disabled,
...props
}) {
return <button data-intent={intent} />
}Aus Designsystem-Wissen wird verlässlicher Kontext für KI-Agenten.
Aiko verbindet das Wissen aus eurem Designsystem zu einem Canonical Design Graph. Daraus entstehen aufgabenbezogene Contracts, mit denen KI-Agenten arbeiten können. Anschließend prüft Aiko, ob die Ergebnisse den festgelegten Vorgaben entsprechen.
-
React
-
Angular
-
Web Components
-
Figma
-
Penpot
-
Tailwind
Knowledge sources
- Designtools
- Dokumentation
- Komponentencode
- Design-Tokens
Semantischer Graph wird geladen.
Euer Team hat dieses Wissen bereits aufgebaut.
Ein Designsystem ist weit mehr als eine Komponentenbibliothek. Es bewahrt Entscheidungen, die euer Team über Jahre hinweg getroffen hat: zu Interaktionen, Barrierefreiheit, Verhalten und technischer Umsetzung.
Dieses Wissen steckt in Figma-Dateien, Komponentencode, Storybook-Stories, Design-Tokens und Dokumentation. Und in den unzähligen Gesprächen und Entscheidungen, die dahinterstehen.
Menschen können diese Informationen miteinander verknüpfen. Ein KI-Agent sieht zunächst nur die Dateien und Informationen, auf die er zugreift.
Die Herausforderung besteht deshalb nicht darin, noch mehr zu dokumentieren. Sondern das vorhandene Wissen so bereitzustellen, dass KI-Agenten es nutzen können, ohne wichtige Zusammenhänge zu verlieren.
Nach dem Schließen des Dialogs muss der Fokus zu dem Element zurückkehren, das ihn geöffnet hat.
- space.300
- 12px
- radius.md
- 6px
- motion.ease
- cubic
Dialog / Modal / Default
- Default
- Nested focus
- Dismissal blocked
Bestätigungsdialoge für destruktive Aktionen dürfen sich nicht durch einen Klick außerhalb schließen lassen.
Verhalten von Dialogen bei Betätigung der Escape-Taste in Angular und React vereinheitlichen.
Aus Wissen wird Struktur.
Die verschiedenen Teile eures Designsystems stehen bereits miteinander in Beziehung. Komponenten haben definierte Verhaltensweisen und Zustände. Anforderungen an Barrierefreiheit und Interaktion beeinflussen ihre Umsetzung. Design-Tokens bestimmen zentrale Gestaltungseigenschaften.
Bisher sind diese Zusammenhänge über verschiedene Tools, Dateien und Formate verteilt. Aiko macht sie in einem Canonical Design Graph sichtbar und nachvollziehbar. Dabei bleiben die ursprünglichen Quellen und die Nachweise für jede Verbindung erhalten.
So können Menschen und KI-Agenten auf dieselben Zusammenhänge zugreifen, statt voneinander isolierte Dateien interpretieren zu müssen.
Aiko ersetzt eure bestehenden Quellen nicht. Es verbindet sie auf einer gemeinsamen semantischen Ebene.
Kontext wird geladen.
Genau der Kontext, den die Aufgabe braucht.
Kein KI-Agent muss euer gesamtes Designsystem kennen. Er braucht nur die Informationen, die für seine aktuelle Aufgabe relevant sind.
Soll ein Agent beispielsweise einen Dialog umsetzen, stellt Aiko die passenden Informationen aus dem Graphen zusammen: Verhaltensregeln, Zustände, Anforderungen an die Barrierefreiheit und relevante Ressourcen.
Daraus entsteht ein klar abgegrenzter Contract, mit dem der Agent direkt arbeiten kann. Statt selbst nach Informationen zu suchen, erhält er die Vorgaben, die er für eine korrekte Umsetzung benötigt.
Der Graph bleibt vollständig. Der bereitgestellte Kontext bleibt kompakt.
Derselbe Agent. Weniger Kontext. Präzisere Vorgaben.
Kontext wird geladen.
Kontextpaket
dialog.contract
- Komponente
- Dialog
- Projektion
- 6 Knoten / 11 Beziehungen
Verhaltensregeln
- Fokus wiederherstellen
- Schließen durch Klick außerhalb
- Verhalten bei Escape
Zustände
- Offen
- Modal
Ressourcen
- Typografie
- Bewegung
- Abstände
Nachweise
- Barrierefreiheit
- Interaktionsspezifikation
- Komponenten-API
An euren KI-Agenten übergeben
Codex
Claude
Copilot
Cursor
Gemini
Replit
Devin
Vertrauen braucht Nachweise.
Ein Interface zu generieren, ist nur ein Teil der Aufgabe. Entscheidend ist, ob die Umsetzung den Vorgaben entspricht, die euer Team im Designsystem festgelegt hat.
Aiko prüft generierte Ergebnisse anhand des Contracts, den der Agent verwendet hat, und der zugrunde liegenden Informationen aus Design, Code und Dokumentation.
Keine bloße KI-Einschätzung. Sondern nachvollziehbare Prüfergebnisse.
Bei Abweichungen zeigt Aiko, wo die Umsetzung von den Vorgaben abweicht und welche Quelle das erwartete Verhalten belegt.
Prüfübersicht
87%
der Contracts erfüllt
- 124
- Bestanden
- 13
- Abweichungen
- 5
- Nicht geprüft
Laut Contract erwartet
Fokus kehrt zum auslösenden Element zurück
Abweichung
Tatsächliche Umsetzung
Fokus landet auf dem body-Element
Nachweise
aus verschiedenen Quellen
Figma-Komponente
Dialog / v12
Variante
Modal / Default
- Modal
- Schließbar
- Größe
- Groß
Interaktionsspezifikation
Focus restoration
onDismiss() { restoreFocus(trigger) }
Komponentencode
Dialog.tsx
return (<DialogContent>...</DialogContent>)
Barrierefreiheit
WCAG 2.4.3 · 2.4.7 · APG Dialog
- Fokusreihenfolge
- Fokus sichtbar
- Fokus im Dialog gehalten
- Fokus wiederhergestellt
Design-Tokens
motion.ease.out / 160ms
radius.modal = 12px
Ein Graph. Viele Zielsysteme.
Frameworks ändern sich.
Designtools entwickeln sich weiter.
KI-Plattformen kommen und gehen.
Euer Designsystem sollte deshalb nicht bei jedem Technologiewechsel neu aufgebaut werden müssen.
Die zentralen Vorgaben bleiben im Graphen erhalten. Für jedes Zielsystem stellt Aiko sie in der jeweils passenden Form bereit – ob für React, Angular, SwiftUI, Web Components, Figma, Penpot, Storybook, Zeroheight, Confluence, DTCG-Tokens oder CSS.
Eine gemeinsame Grundlage. Unterschiedliche Projektionen.
Canonical Design Graph
-
React
-
Angular
-
Web Components
-
SwiftUI
-
Figma
-
Penpot
-
Storybook
-
Zeroheight
-
Confluence
-
DTCG
- CSS