Stakeholder Content Generator

Architektur eines Multi-Level-Kurs-Generators — vom Orchestrator bis zum letzten CSS-Token

Das Wichtigste auf einen Blick + 31 Vertiefungsseiten verfügbar
01

Orchestrator & Phasen-Pipeline

Der Orchestrator steuert den gesamten Build-Prozess. Er durchläuft 7 Phasen in fester Reihenfolge. Jede Phase produziert Artefakte, die nachfolgende Phasen konsumieren. Ein Fehler in Phase N verhindert den Start von Phase N+1.

Das System ist als Pipeline aufgebaut — nicht als DAG, nicht als Event-Loop. Die Linearität ist beabsichtigt: sie vereinfacht Debugging und garantiert Datenverfügbarkeit.

📦Phase 0Bootstrap
🔍Phase 1Analyse
📊Phase 2Curricula
🎨Phase 3CSS/JS
⚙️Phase 4Pipelines
🔗Phase 5Cross-Links
🗺️Phase 6Depth-Map
Die Phasen-Sequenz im Überblick: Phase 0 — Bootstrap: Quellen identifizieren, Repo-Struktur parsen Phase 1 — Analyse: Deep-Scan der Codebase (AST, Dependencies, Patterns) Phase 2 — Curricula: Pro Zielgruppe: Themen + Helpfulness-Scores berechnen Phase 3 — Foundation: Gemeinsame CSS-Variablen, JS-Module, Font-Stack generieren Phase 4 — Pipelines: Parallele Audience-Pipelines starten (je Zielgruppe) Phase 5 — Cross-Links: Breadcrumbs, Deep-Dive-Links, Sibling-Navigation einfügen Phase 6 — Depth-Map: Finale Sitemap mit allen Pfaden und Tiefen ausgeben
function orchestrate(config) { const sources = phase0_bootstrap(config.repo); const analysis = phase1_analyze(sources); const curricula = phase2_curricula(analysis, config.audiences); const foundation = phase3_css_js(config.brand); const pages = await Promise.all( curricula.map(c => phase4_pipeline(c, foundation)) ); const linked = phase5_crosslinks(pages); return phase6_depthmap(linked); }
Mehr erfahren Orchestrator-Architektur im Detail → Phasen-Contracts, Fehlerbehandlung und State-Management zwischen den Stufen
02

Helpfulness-Scoring-System

Das System entscheidet pro Thema und Zielgruppe, wie tief aufbereitet wird. Dafür berechnet es einen Helpfulness-Score (HS). Ein Thema wie „CSS-Variablen“ bekommt für Entwickler einen höheren HS als für Entscheider — dasselbe Thema, unterschiedliche Scores.

HS = K + R + L + E
0 – 3 Komplexität (K)
0 – 3 Relevanz (R)
0 – 2 Lernwert (L)
0 – 2 Eigenständigkeit (E)
🔧 ≥ 6
Entwickler-Schwelle
👤 ≥ 7
Anwender-Schwelle
📊 ≥ 8
Entscheider-Schwelle
✏️ HS berechnen

Thema „Breadcrumb-Logik“ für Entwickler: Komplexität = 2, Relevanz = 3, Lernwert = 1, Eigenständigkeit = 1. Wird eine eigene Seite erstellt?

Nein — HS = 6, das reicht nicht
Ja — HS = 7, das liegt über der Schwelle von 6
Ja — HS = 8, liegt sogar über der Entscheider-Schwelle
Mehr erfahren Scoring-Algorithmus und Schwellenwerte → Wie die vier Dimensionen gewichtet werden und wann Level-Upgrades ausgelöst werden
03

Zielgruppen-Pipelines & Parallelisierung

Jede Zielgruppe erhält eine eigene Build-Pipeline. Die Pipelines laufen parallel und unabhängig voneinander. Innerhalb einer Pipeline werden die Level sequenziell erzeugt (jedes Level braucht die Daten des vorherigen), aber Themen und Sprachen können parallel generiert werden.

Die Architektur unterscheidet zwei Agent-Typen: Pipeline-Agents (je einer pro Zielgruppe) und File-Agents (je einer pro Output-Datei).

Parallele Pipeline-Ausführung (je Zielgruppe unterschiedliche Tiefe)
📊
Entscheider · 2 Level
👤
Anwender · 3 Level
🔧
Entwickler · 4 Level
Überblick Vertiefung Detail Max. Tiefe
✏️ Kurz getestet

Warum werden Level innerhalb einer Pipeline sequenziell erzeugt, obwohl Parallelisierung möglich wäre?

Um Speicher zu sparen
Weil Claude nur einen Thread gleichzeitig unterstützt
Weil jedes Level die Daten des vorherigen Levels braucht (z.B. für Navigation und Verlinkung)
Mehr erfahren Pipeline-Architektur und Agent-Koordination → Pipeline-Agents vs. File-Agents, Parallelisierungsstrategie und Error-Boundaries
04

Design-System & Brand-Tokens

Jede erzeugte HTML-Datei ist vollständig eigenständig — kein externes Stylesheet, keine CDN-Abhängigkeit. Das gesamte Design steckt als CSS-Variablen in jeder Datei. Drei Brand-Farben und drei Schriftfamilien bilden das visuelle Gerüst.

Tiefenblau #000099
Impuls-Orange #FE8F11
Warmgrau #E4DAD4
Bricolage Grotesque
Headlines
DM Sans
Fließtext
JetBrains Mono
Code & Labels
Die drei Brand-Farben als CSS Custom Properties: Tiefenblau → Hintergründe, Navigation, Code-Blöcke Impuls-Orange → Akzente, CTAs, aktive Zustände, Fortschrittsbalken Warmgrau → Flächen-Hintergründe, Borders, dezente Trennungen Drei Schrift-Stacks mit Google-Fonts-Fallback: Display: Bricolage Grotesque → Georgia → serif Body: DM Sans → system-ui → sans-serif Mono: JetBrains Mono → Fira Code → monospace
:root { /* Brand Colors */ --color-deep-blue: #000099; --color-impulse-orange: #FE8F11; --color-warm-gray: #E4DAD4; /* Derived Surfaces */ --color-bg-code: #000066; --color-surface-warm: #F8F5F2; --color-accent-light: #FFF3E5; /* Font Stacks */ --font-display: 'Bricolage Grotesque', Georgia, serif; --font-body: 'DM Sans', -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; }
Mehr erfahren Vollständiges Token-System und Komponenten-Bibliothek → Alle CSS-Variablen, Spacing-Skala, Shadow-Tokens und Breakpoints
05

Cross-Level-Navigation

Das System erzeugt vier Navigations-Komponenten, die zusammen eine vollständige Orientierung ermöglichen. Dazu kommen der Audience-Switch auf Übersichtsseiten und Language-Flags auf jeder Seite.

✏️ Kurz getestet

Was unterscheidet Breadcrumbs von Sibling-Nav?

Breadcrumbs zeigen die vertikale Hierarchie (Eltern → Kind), Sibling-Nav zeigt horizontale Gleichrangige
Breadcrumbs sind klickbar, Sibling-Nav nicht
Breadcrumbs gibt es nur auf der Übersichtsseite
Mehr erfahren Navigations-Komponenten und Link-Generierung → Wie Phase 5 die Verlinkung zwischen allen Seiten aufbaut und validiert
06

Template-System & Seiten-Anatomie

Jede generierte Seite folgt einer festen Struktur. Es gibt keine „nackten“ Sections — alles ist in .module-Container verpackt. Innerhalb jedes Moduls sorgt eine verschachtelte Hierarchie für konsistente Layouts auf allen Seiten und Ebenen.

Hero-Sektionen auf Vertiefungsseiten enthalten zusätzlich eine page-overview-Komponente mit Sprungmarken zu den Sektionen.

Seiten-Anatomie (jede Seite)
.module <section>
.module-content max-width: 820px
.module-header Nummer (groß, verblasst) + Titel
.module-body flex-column, gap: 2rem
.screen Visueller Abschnitt (Text, Viz, Quiz)
.screen Weitere Abschnitte...
.deep-dive-link Optionaler Link zur nächsten Ebene
Jede Seite folgt diesem Schema: 1. .module umschließt einen Themenblock (volle Viewport-Höhe) 2. .module-content begrenzt die Breite auf 820px 3. .module-header enthält die große, verblasste Nummer + den Titel 4. .module-body stapelt die Screen-Blöcke vertikal 5. .screen ist die kleinste sichtbare Einheit (Text, Viz oder Quiz) 6. .deep-dive-link verweist optional auf die nächste Tiefenebene Regel: Kein Content außerhalb von .module. Keine Section ohne .screen.
<section class="module"> <div class="module-content"> <header class="module-header"> <span class="module-number">01</span> <h1 class="module-title">Titel</h1> </header> <div class="module-body"> <section class="screen">...</section> <section class="screen">...</section> </div> <a class="deep-dive-link">...</a> </div> </section>
Mehr erfahren Template-Varianten und Hero-Patterns → Hero mit page-overview, Card-Grids, File-Trees und alle Komponenten-Rezepte
07

Qualitätssicherung & Checkliste

Der Skill prüft jeden Output gegen eine 28-Punkte-Checkliste. Jeder Punkt ist ein harter Gate — schlägt eine Prüfung fehl, wird die betroffene Datei nachgebessert, bevor sie in den finalen Output wandert. Die Checkliste deckt strukturelle, inhaltliche und visuelle Kriterien ab.

Interaktive QA-Checkliste (Auswahl)
Zielgruppen-Trennung: Keine Datei bedient zwei Zielgruppen gleichzeitig
Tiefenprofil: Maximale Tiefe entspricht den Audience-Vorgaben (🔧 4, 👤 3, 📊 2)
Keine toten Links: Jeder href zeigt auf eine existierende Datei im Output
Breadcrumbs korrekt: Jede Seite hat einen vollständigen Pfad zurück zur Übersicht
Beide Sprachen: Für jede DE-Datei existiert eine EN-Datei (und umgekehrt)
WCAG-Kontrast: Mindestens 4.5:1 Ratio für allen Fließtext, rgba(255,255,255,.85) auf #000099
Tooltips: Jeder Fachbegriff hat ein data-tooltip-Attribut mit verständlicher Erklärung
Self-contained: Jede HTML-Datei funktioniert ohne externe Stylesheets oder Scripts
Module-Struktur: Kein Content außerhalb von .module-Containern, keine nackten Sections
Audience-Switch: Übersichtsseiten haben den Perspektiven-Schalter, Unterseiten nicht
0 / 10 geprüft
✏️ Kurz getestet

Ein Entwickler-Kurs hat einen Link auf l2/auth_dev_de.html, aber die Datei existiert nicht. Was passiert?

Der Link wird rot markiert und bleibt im Output
Die QA-Checkliste schlägt fehl und die Datei wird nachgeneriert oder der Link entfernt
Nichts — tote Links sind akzeptabel bei optionalen Seiten
Mehr erfahren Die vollständige 28-Punkte-Checkliste → Alle Prüfkriterien, Schweregrade und automatische Korrekturstrategien