BauIN/docs/plaene/AP13-designsystem.md

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.