# 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 Erfüllt am 05.10.: **Stand 0.3** von Claude Design mit unseren Änderungen 1–26 und einer UX-Überarbeitung. Er liegt im Planungsordner unter `claude-design/2026-10-05_Stand-0.3/`: - `Uebergabe.md`: maßgebliche Spezifikation, Abschnitte 0–9 - `README.md`: Zusammenfassung mit Design-Tokens - `prototyp/`: `.dc.html`-Dateien mit `support.js`, im Browser zu öffnen - `screenshots/`: 27 PNG, ein Bild je Zustand, 1440 px breit, für den Abgleich - `icons/`: Phosphor 2.1.1 als SVG - `logo/`: Logo-SVGs Der Stand ist **verbindlich** (High-Fidelity): Farben, Schriften, Abstände, Texte und Zustände werden genau übernommen. Bei Widerspruch gilt der Prototyp vor den Screenshots. ## Entscheidungen | Nr. | Frage | Vorschlag | Entschieden | |---|---|---|---| | E13.1 | Schriften | League Spartan und IBM Plex über `@fontsource`-Pakete, lokal gebündelt. Sie sind nicht im Übergabepaket | offen | | E13.2 | Icons | Die gelieferten SVGs (Phosphor 2.1.1, MIT) als lokales Icon-Set; TallStackUI erlaubt eigene SVG-Komponenten. Alternative: Blade-Paket `codeat3/blade-phosphor-icons`, dann Version gegen 2.1.1 prüfen | offen | | E13.3 | Ablage der Entwürfe im Repository | Stand 0.3 vollständig nach `docs/design/` (nur erfundene Daten, rund 5 MB), damit Claude Code bei jeder Seite nachsehen kann | offen | ## Schritte - [ ] **13.1** Stand 0.3 in `docs/design/` ablegen (E13.3). Unterschiede zur Rückmeldung und zu den Antworten sind schon notiert (Abschnitt „Abgleich Stand 0.3“) - [ ] **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 ## Abgleich Stand 0.3 (05.10.) **Passt zu Plan und Entscheidungen:** - TallStackUI 4 mit Präfix `ts-`, eigene Komponenten ohne Präfix (`x-confidence`, `x-review-question`, `x-source-choice`, `x-contract-coverage`, `x-coachmark`) - Schriften und Icons in der Anwendung lokal; der Prototyp lädt sie nur zur Ansicht von fremden Servern - Gliederung Projekt → PFA → Vertrag → LVs, Nachträge am Vertrag, MKA nur als Verweis (A8) - Nur „dem Grunde nach“: keine Mengen, Preise oder Anspruchsgrundlage. Höhe und Regelwerk sind nicht entworfen; die Quellenanzeige in Spalte 3 ist für den späteren Chat wiederverwendbar. - Suchbereiche: Vertrag, andere Verträge im PFA per Schalter, andere PFA nur als Hinweis mit EP, nie projektübergreifend (A10, A11) - Rollen Administrator, Projektleiter, Bearbeiter, Leser. „Kein Zugriff“ verrät nicht, ob es das Objekt gibt (A25, AP1). - Länderwahl nur bei mehreren Ländern (A26: Österreich in Phase 2) - Benachrichtigungen nur in der Anwendung (B3) - Ergebnisliste mit Excel-Export; Bewertungsmatrix deaktiviert, bis die Vorlage da ist (OP1) **Abweichungen und wie wir sie behandeln** (Vorschlag, bitte bestätigen): | Stelle im Prototyp | Widerspricht | Umgang | |---|---|---| | Projekt anlegen v3 · 2b „Ablage für Dateien oder ZIP mit Ordnern“; Übergabe 6.8 „Upload allgemein … ZIP“ | B4: kein ZIP | Nur Mehrfach-Upload, Text ohne „ZIP“ | | Ergebnisliste v2: Export „Stellungnahme (Word)“, deaktiviert; Übergabe 6.8: Export-Vorlage Stellungnahme | A15: Phase 2 | Weglassen | | Regeldialog v3: „Freigabe immer durch den Projektleiter“, keine Einstellung | A24-Vorschlag „ohne Freigabe“, Gesamtplan „einstellbare Freigaben“ | Entscheidung E8.1 in AP8 | | Projektdetail v2: Reiter nur PFA & Verträge · Nachträge · Berechtigungen · Einstellungen; Übersicht, Dokumente und Protokoll aus Rückmeldung 19 fehlen | – | Prototyp gilt; Protokoll unter Verwaltung (AP1, 1.11). Falls A2 weitere Vertragsunterlagen bringt, braucht es dafür einen Ort | | Projektdetail v2 · Einstellungen: nur „Andere Verträge im selben PFA einbeziehen“; „Andere PFAs“ und „Nur gleicher Auftragnehmer“ entfallen | A10 noch offen | Prototyp gilt, bis A10 etwas anderes ergibt; Datenmodell in AP1, 1.4b | | Projekt anlegen v3 ohne Vertragsgrundlage | `projekte.vertragsgrundlage` im Datenmodell | Feld bleibt mit Standardwert, nicht im Formular (AP1, 1.4b) | | Zielgruppe „nur deutschsprachig“ | Oberfläche Deutsch und Englisch | Kein Widerspruch: Die deutschen Texte werden wörtlich übernommen, Englisch bleibt als Übersetzung | | Logo: Wortmarke als Text, „ein finales Logo gibt es noch nicht“ | – | Vorläufig verwenden, vor dem Einsatz in Pfade umwandeln | | „Passt / Passt nicht“ aus unserer Rückmeldung (7, 9, 11) | – | In 0.3 ersetzt durch Auswahl der Fundstelle und Ja / Nein; AP6 angepasst | Nicht im Paket und auch nicht nötig: die Archivordner „Stand 0.1/0.2“ und die Schriftdateien. Wenn die Abweichungen bestätigt sind, geht eine kurze Rückmeldung im Format von Abschnitt 9 an Claude Design (ZIP und Stellungnahme entfernen, E8.1). ## 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 - Weitere Stände von Claude Design während der Umsetzung: Nur übernehmen, was im Änderungsprotokoll der Übergabe (Abschnitt 8) steht, und Tokens zentral halten.