Design Workbench — Was ist besser und warum
v2.0
→
v2.1
01 — Token-Architektur
Flach → 3-Layer
Warum besser: Wenn sich eine Farbe ändert, änderst du sie an einer Stelle (Primitive). Alles andere referenziert. In v2.0 musst du 15+ Stellen anfassen. Außerdem dokumentiert das System warum eine Farbe verwendet wird (semantische Ebene), nicht nur welche.
v2.0 — Alle Werte direkt als Hex in :root
--bg-base: #0a0e1a;
--accent: #6366f1;
- Keine Struktur, keine Herleitung
- Änderung = 15+ Stellen suchen
v2.1 — Primitive → Semantic → Component
/* Primitive */ --neutral-1: hsl(222 47% 7%);
/* Semantic */ --surface-1: var(--neutral-1);
/* Component */ --button-primary-bg: var(--primary);
- 1 Änderung propagiert automatisch
- Semantik dokumentiert den Zweck
02 — Interaktivität
Statisch → Funktional
Warum besser: Ein Design-System-Workbench soll zeigen, wie Komponenten funktionieren, nicht nur wie sie aussehen. Statische Screenshots kann man in Figma machen — der Wert einer HTML-Bench ist die Interaktivität.
| Feature | v2.0 | v2.1 |
|---|---|---|
| Datepicker | Textfeld mit Auto-Dots | 3-Level-Kalender (Tag→Monat→Jahr) + Presets Evolved |
| Date Range | — | Vollständig mit Kalender + "Letzte 30 Tage" etc. Neu |
| Smart Date Input | — | Natürliche Eingabe mit Live-Preview Neu |
| Command Palette | — | ⌘K mit Suche über alle Sections Neu |
| Workflow-Wizard | — | 4-Step mit Datenpersistenz + Summary Neu |
| Bezier Editor | — | Drag-Handle → cubic-bezier() Output Neu |
| Role Demo | 3 Rollen (Restricted/User/Admin) | 5 Rollen mit MaRisk-Kontext Evolved |
| Controls | In Components gemischt | Eigene Section (Toggle/Checkbox/Radio) Evolved |
| Enhanced Table | Einfache Tabelle | Sortierbar, filterbar, selektierbar Evolved |
| Searchable Dropdown | — | Live-Filter mit Custom-Rendering Neu |
03 — Surface-System
3 Stufen → 4 Stufen
Warum besser: 4 Stufen decken alle UI-Schichten ab (Input-Hintergrund, Page, Card, Modal). 3 Stufen zwingen zu Kompromissen, wo z.B. Table-Header und Card denselben Wert teilen.
v2.0 — 3 Stufen, inkonsistent benannt
--bg-base
--bg-surface
--bg-elevated
v2.1 — 4 Stufen, nummerisch + dokumentiert
--surface-0 /* sunken (Input-BG) */
--surface-1 /* base (Page) */
--surface-2 /* raised (Card) */
--surface-3 /* overlay (Modal) */
04 — Regelwerk
Implizit → Dokumentiert
Warum besser: Ein Design-System ohne Regeln ist nur eine Komponentenbibliothek. Die Regeln verhindern Drift — besonders wenn mehrere Entwickler oder AI-Agents damit arbeiten.
v2.0 — Zeigt Komponenten, keine Regeln
- Keine verbotenen Pattern dokumentiert
- Keine CI-Konformitätsregeln
- Keine Naming-Konventionen
- Keine Design-Maximen
v2.1 — Dedizierte Governance-Sections
- Verbotene Pattern (Zebra-Stripes, Nested Cards, Toggle+Submit, …)
- CI-Konformität (welche grep-Checks der Runner ausführt)
- Naming-Konventionen (Tokens, Klassen, Sections)
- Design-Maximen (Lesbarkeit > Konsistenz > Ruhe > Feedback > Geschwindigkeit)
- Barrierefreiheit (WCAG-Referenz)
05 — Referenz-Tiefe
Oberflächlich → Vollständig
Warum besser: Ein Entwickler, der "welche Farbe hat ein Error-Input-Ring?" nachschlagen will, findet die Antwort sofort in der Referenz statt den Code durchsuchen zu müssen.
v2.0 — 1 Beispiel pro Komponente
- Einzelne Demos, kein Nachschlagewerk
- Keine State-Matrizen
- Keine Token-Übersicht
v2.1 — Vollständige Referenz-Sektionen
- Token-Tabelle (alle Variablen auf einen Blick)
- Input-States-Matrix (Default, Focus, Error, Disabled, …)
- Status-Farben-Referenz
- Shadow-Vergleich (alle Stufen nebeneinander)
- Breakpoints-Referenz
- Tailwind-Mapping (CSS-Variable → Tailwind-Klasse)
- Button-Matrix (alle Varianten × Zustände)
06 — Export
Gleich, aber sauberer
Beide haben CSS-Token-Export, Component-CSS-Export und Design-Prompt-Download. v2.1 extrahiert die Tokens anhand von Marker-Kommentaren im CSS (
/* === TOKENS START === */), was robuster ist als die v2.0-Variante die den gesamten :root-Block kopiert.
07 — Bugfixes
24 systematisch gefundene und gefixte Probleme
v2.0 hatte diverse stille Bugs die nie auffielen, weil die meisten Sections nicht interaktiv waren. v2.1 hat dieselbe Codebasis, aber mit 24 systematisch gefundenen und gefixten Problemen.
Betroffene Bereiche
Datepicker
Dropdowns
Toggles
Role Demo
Workflow-Wizard
Icons Click-to-Copy
Date Range
Zusammenfassung
v2.0 vs. v2.1 auf einen Blick
| Dimension | v2.0 | v2.1 |
|---|---|---|
| Token-System | Flach (Hex) | 3-Layer (Primitive → Semantic → Component) Architektur |
| Surfaces | 3 Stufen | 4 Stufen Evolved |
| Interaktive Demos | ~5 | ~20 Neu |
| Sections gesamt | ~25 | 50+ |
| Regeln / Governance | Keine | Verbotene Pattern, CI, Naming, Maximen Neu |
| Referenz-Tiefe | 1 Beispiel / Komponente | Vollständige Matrizen + Token-Tabellen Evolved |
| Bekannte Bugs | Unbekannt (nie auditiert) | 24 gefunden und gefixt 24 Fixes |
Sektionen
25
→
50+
Interaktivität
1×
→
2×
Token Layers
1
→
3
Neue Features
20+
Bugfixes
24