Once UI verwandelt Layout und Styling in semantische Props – damit du (und dein KI-Agent) weniger Code schreibst, der länger korrekt bleibt.
Die Idee
Die meisten Design-Systeme stellen Komponenten bereit und überlassen dir den Kampf mit CSS. Once UI geht weiter: Layout, Farbe, Abstände und Typografie werden alle als Props auf semantischen Komponenten ausgedrückt.Das bedeutet:
<Column gap="16"> statt Flexbox-Boilerplate
background="surface" statt Hex-Farben
textVariant="display-strong-l" statt Klassen für Schriftgröße + Schriftstärke
Das Ziel ist Wartbarkeit – für Menschen, die den Code sechs Monate später lesen, und für Agenten, die ihn heute generieren.
Agent-first, menschenfreundlich
Once UI liefert neben der React-Bibliothek ein Codegen-Harness mit:
Artefakt
Zweck
`rules.compact.md`
Do/Don't-Tabellen für Layout, Oberflächen, Motion
`catalog.json`
Komponenten nach Zweck und Tags auswählen
`tasks/*.json`
Intent-Bundles (Preisseite, Chat-UI, Auth-Flow)
`validate-ai-code`
Automatische Prüfung auf häufige Fehler
Menschen lernen das Warum hier auf Learn. Agenten laden das Wie aus dem Harness. Beide folgen denselben Regeln.
Drei Prinzipien
1. Semantik vor ImplementierungVerwende Row und Column – nicht Flex direction="row". Verwende Media – nicht <img>. Der Komponentenname verrät die Absicht.2. Tokens vor RohwertenAbstände verwenden eine feste Skala ("8", "16", "24", "104"). Farben verwenden Farbschemata (brand-medium, neutral-alpha-weak). Niemals Hex-Werte, niemals beliebige Pixel in Props.3. Komposition vor KonfigurationSeiten werden durch das Schachteln von Column → Column maxWidth="l" → Abschnitten aufgebaut. Dekorationsebenen liegen außerhalb der Inhaltsspalte. Muster wiederholen sich – Seitenskelett, statisches Panel, interaktive Karte.
