ChristophandClaude Opus 5.5
2143f4e955
- docs/projektplan.md neu gegliedert: Arbeitsweise mit Freigaben, Zuständigkeiten, Meilensteine mit Abnahmekriterien, Arbeitspakete mit Status, Zeitplan, Entscheidungen - docs/plaene/: Teilplan je Arbeitspaket (detailliert für AP0, AP1, AP2, AP3, AP5, AP11, AP13; grob für AP4, AP6–AP10, AP12, Optionen) und Vorlage - docs/fragen.md: alle offenen Fragen mit Status, Empfänger und betroffenem Teilplan - CLAUDE.md: Umsetzung nur nach freigegebenem Teilplan Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
79 lines
2.9 KiB
Markdown
79 lines
2.9 KiB
Markdown
# 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.
|