- 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>
2.9 KiB
2.9 KiB
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;
NoExternalResourcesTestbleibt 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
- KI-Sicherheit (
- 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
NoExternalResourcesTestauf 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.