Benutzeroberfläche — Workbench UI/UX

Status: Entwurf · Stand: 2026-04-28

Sammlung aller fachlich-gestalterischen Festlegungen rund um die Workbench-Oberfläche: Design-Tokens, Komponenten-Bibliothek, Screen-Konzepte, Interaktionsmuster und Stand des Klick-Prototyps.

Diese Sicht steht bewusst neben den fachlichen Anforderungen (docs/business/) und der technischen Spezifikation (docs/spec/):

Ort	Inhalt	Sprache
docs/business/	Was wird fachlich abgebildet? Welche Cases, Rollen, Module?	erklärend, fachlich
docs/ui/ (hier)	Wie sieht das System aus? Welche Komponenten, Interaktionen, Bildschirme?	gestalterisch, exemplarisch
docs/spec/	Wie ist es technisch festgelegt? DDL, Trigger, Views, Sicherheit	normativ, technisch

Lesepfad

1. Architektur-Grundprinzip — das Drei-Säulen-Modell (System of Record / Insights / Innovation). → 00-overview/02-drei-saeulen-architektur.md
2. Designprinzipien — was prägt die Oberfläche der Workbench? → 00-overview/01-design-principles.md
3. Design-System — Tokens, Komponenten, Highlight-Muster. → 10-design-system/
4. Screens — die wichtigsten Bildschirme der Workbench, je Use-Case skizziert. → 20-screens/
5. Interaktionsmuster — Modul-Konfigurator, Vertriebs-Doppelbildschirm, Feedback-Schleife. → 30-interaction-patterns/
6. Klick-Prototyp — was steckt im Clickdummy? → 40-clickdummy/01-overview.md

Struktur

docs/ui/
├── 00-overview/             Architektur-Grundprinzip (Drei-Säulen), Designprinzipien
├── 10-design-system/        Tokens, Komponenten, Highlight-Varianten
├── 20-screens/              Hauptbildschirme der Workbench
├── 30-interaction-patterns/ Modulauswahl, Vertriebsmodus, Feedback
└── 40-clickdummy/           Stand und Inhalt des React-Prototyps

Verhältnis zum Klick-Prototyp

Der React-Klickdummy unter clickdummy/ ist die lebendige Referenz für UI-Entscheidungen. Ein neues Detail wird oft zuerst dort gebaut und anschließend hier dokumentiert — nicht umgekehrt.

Ergänzend liefert das externe design-system/ (außerhalb des Repos) Farb-/Typografie-Tokens und das ad-hoc-typische Notch-Radius-Detail. Die hier dokumentierten Komponenten orientieren sich daran, sind aber Workbench-spezifisch (z. B. Tochter-Card mit Corner-Notch in Brand-Farbe).