# AP13 – Designsystem aus Claude Design

| | |
|---|---|
| Status | detailliert, wartet auf Freigabe |
| Aufwand | 0,5 PW |
| Zeitraum | KW 43 |
| Meilenstein | M1 |
| Freigabe | offen |

## Ziel

Die Anwendung sieht aus wie der Prototyp von Claude Design: Farben, Schriften, Abstände,
Statussysteme, App-Rahmen. Bestehende und künftige Seiten nutzen dieselben Bausteine.

## Umfang

**Enthalten:**
- Design-Tokens mit Hell- und Dunkelmodus
- Schriften und Icons lokal
- TallStackUI anpassen
- Eigene Komponenten für die Statussysteme
- Sidebar und Topbar
- Musterseite zum Abgleich

**Nicht enthalten:** Einzelne Fachseiten; diese entstehen in ihren Arbeitspaketen mit den hier
gebauten Bausteinen.

## Voraussetzungen

Neuer Stand von Claude Design nach unserer Rückmeldung (`Rueckmeldung_an_ClaudeDesign_2026-10-02.md`).
Benötigt werden die Übergabe (Abschnitte 1–9) und die `.dc.html`-Dateien. Bisheriger Stand:
`ClaudeDesign_Stand_2026-10-02.md` im Planungsordner.

## Entscheidungen

| Nr. | Frage | Vorschlag | Entschieden |
|---|---|---|---|
| E13.1 | Schriften | League Spartan und IBM Plex über `@fontsource`-Pakete, lokal gebündelt | offen |
| E13.2 | Icons | Phosphor über das Blade-Paket `codeat3/blade-phosphor-icons` (MIT), in TallStackUI als Icon-Typ eingebunden | offen |
| E13.3 | Ablage der Entwürfe im Repository | `docs/design/` mit Übergabe und `.dc.html` (nur erfundene Daten) | offen |

## Schritte

- [ ] **13.1** Stand von Claude Design in `docs/design/` ablegen (E13.3), Unterschiede zur
  Rückmeldung notieren
- [ ] **13.2** Design-Tokens als CSS-Variablen (hell und dunkel) und Tailwind-Theme
- [ ] **13.3** Schriften (E13.1) und Icons (E13.2) einbinden; `NoExternalResourcesTest` bleibt grün
- [ ] **13.4** TallStackUI anpassen: Buttons, Eingabefelder, Select, Karte, Dialog, Tabelle,
  Toast, Badge (Radien, Farben, Größen)
- [ ] **13.5** Eigene Komponenten:
  - KI-Sicherheit (`x-confidence`)
  - Prüfergebnis-Plakette
  - Regelstatus-Etikett
  - Bearbeitungsstand mit 5 Punkten
  - KI-Vorschlag-Pille
  - Zustände leer, lädt, Fehler, kein Zugriff
- [ ] **13.6** App-Rahmen: Sidebar mit Gruppen Arbeit, Wissen, System; Topbar mit Suche,
  Benachrichtigungen, Benutzer; Länderwahl nur bei mehreren Ländern
- [ ] **13.7** Musterseite „Designsystem“ (nur in der Entwicklung) und Abgleich mit dem Prototyp
  per Screenshot; bestehende Seiten (Login, Einstellungen, AP1-Seiten) umstellen

## Abnahmekriterien

- Die Musterseite entspricht dem Designsystem des Prototyps in Hell und Dunkel.
- Alle Statussysteme sind ohne Farbe unterscheidbar (Symbol und Text).
- Es werden keine externen Ressourcen geladen.

## Tests

- `NoExternalResourcesTest` auf allen Seiten
- Blade-Komponenten-Tests für Status und Zustände
- Übersetzungsabdeckung

## Risiken

- Claude Design liefert spät. Dann mit dem bisherigen Stand beginnen; die Prüfmaske kommt ohnehin
  erst in AP6.