Energiehandelsplattform · 2017–2026

Ein Design System, das Menschen und Coding-Agenten verstehen

Tokens, Themes und Komponenten mit maschinenlesbaren Verträgen – damit Designerin, Entwickler und KI-Agent denselben Screen bauen.

Design Tokens
React
Figma Code Connect
Agent-Verträge
Barrierefreiheit

Verwendete semantische Tokens

--surface#ffffff
--surface-alt#f1f3f7
--text#16181d
--text-muted#5a6070
--accent#0b63ce
--buy#14804a
--sell#c2362f
--border#d9dde5
--space-row12px
--font-size15px

Komponentenvertrag (von Agenten gelesen)

# TradeTicket.prompt.md
purpose: place one buy or sell order
props:   side: "buy" | "sell"  (required)
         density: "comfortable" | "compact"
tokens:  only semantic --ds-* (never hex)
do:      confirm side in the button label
don't:   colour alone to signal buy/sell

Ausgangslage

Eine Handelsplattform, mit der Trader und Analyst:innen den ganzen Tag arbeiten: dichte Daten, mehrere Themes, langlebige Screens und mehrere Teams.

Herausforderung

Dieselbe Komponente sah je Modul anders aus und verhielt sich anders. Mit KI-Coding-Assistenten im Team würde sich das vervielfachen – außer das System erklärt seine Regeln selbst.

Vorgehen

Drei Token-Ebenen (primitiv, semantisch, Komponente) in Style Dictionary, helle, dunkle und kontrastreiche Themes aus einer Quelle.
React- und Tailwind-Komponenten, per Code Connect mit Figma verbunden, damit Design und Code synchron bleiben.
Ein kurzer Prompt-Vertrag je Komponente: Zweck, erlaubte Props, Do und Don't – lesbar für Menschen und Agenten.
Paritäts-Audits gegen das Legacy-Frontend, bevor eine Komponente die alte ersetzt.

Ergebnis

Ein gemeinsames Vokabular für Design, Entwicklung und Agenten über Teams hinweg.
Themes und Dichte wechseln über Tokens statt über händische Overrides.
KI-generierte Pull Requests lassen sich gegen explizite Komponentenregeln prüfen.

Meine Rolle

UX-Architekt und Design-System-Lead, Product Owner im Team