Interaktives Infografik- & Agentic-Judge-Designsystem

Was macht Interaktives Infografik- & Agentic-Judge-Designsystem?

Überblick und Philosophie

Dieses Skill bietet ein hochflexibles Designsystem, einen CSS/JS-Komponentenkatalog und kopierbare HTML-Vorlagen. Es handelt sich nicht um einen starren Python-Daten-zu-HTML-Serialisierer. KI-Agenten und Agentic-Judge-LLMs verfassen benutzerdefiniertes HTML direkt mit den Bausteinen des Nord-Designsystems. Sie haben volle kreative Freiheit für den Bau von benutzerdefinierten SVG-Topologien, interaktiven Rechnern, maßgeschneiderten Lifecycle-Steppern, modalen Detailansichten und domänenspezifischen Evaluierungs-Dashboards. Alle Artefakte bleiben zu 100 % in sich geschlossen, ohne Abhängigkeiten und offline nutzbar.

Kernvorlagen und Ressourcen

• assets/template-infographic.html: Vollständige Vorlage für interaktive Infografiken und technische Berichte mit dunklen/hellen Themes, einklappbarem seitlichen Inhaltsverzeichnis, animierten SVG-Datenflüssen, 10-phasigem interaktivem Lifecycle-Stepper, Diagramm-Panels, farbcodierten Vergleichstabellen, farbigen Mini-Karten und barrierefreien modalen Fenstern.
• assets/template-judge-report.html: CSP-sandboxierte Vorlage für KI-Evaluierungsberichte mit Entscheidungszusammenfassung, Gesamtbewertung, 3-Karten-KPI-Gitter, Phasen-Fortschrittsbalken, Beweisvergleichstabelle, mehrteiligen Ergebnissen als farbigen Nord-Mini-Karten und Diagnose-Hinweisen.
• assets/nord-design-system.css: Vollständiges, eigenständiges Nord-Designsystem-Stylesheet mit dunklen/hellen CSS-Custom-Properties, responsiven Gittern, Diagrammkomponenten, Tabellen, Mini-Karten und Status-Pills.
• references/design-system.md: Detaillierte Token-Spezifikationen, Kontrastverhältnisse und Gestaltungsrichtlinien.
• lint.py: Überprüfungsprogramm zur Validierung der 4 harten Design-Invarianten und Sicherheitsheuristiken.

Empfohlene Erzählstruktur

Beim Verfassen eines interaktiven Berichts sollten Sie den Inhalt in einer überzeugenden visuellen Hierarchie organisieren:

1. Hero-3-Karten-KPI-Gitter: Führen Sie das Thema mit einem Eyebrow-Text, einer prominenten Überschrift, einem einleitenden Text, primären Aktionsschaltflächen und einem 3-Karten-Metrik-Gitter (.metric-grid oder .card-grid) ein.
2. Einklappbares linkes TOC-Seitenmenü: Bieten Sie schnelle Navigation durch <nav id="tocSidebar"> mit <div class="toc-list"> und .toc-link-Ankern, unterstützt durch einen IntersectionObserver-Scroll-Spy und mobile Drawer-Unterstützung.
3. Animierte SVG-Architektur-Darstellung: Veranschaulichen Sie die Bewegung zwischen Komponenten mit .diagram-flow, mit eingebetteten SVGs (.flow-svg) und animierten Impulsindikatoren (.flow-pulse) entlang horizontaler oder vertikaler Pfade.
4. Interaktiver 10-Phasen-Lifecycle-Stepper/Rechner: Unterteilen Sie mehrstufige Prozesse oder Algorithmen in einzelne Schritte mit .lifecycle, .lc-steps und .lc-step-Schaltflächen, mit Tastaturnavigation und einer aktiven .lc-detail-Karte.
5. Farbige .nord-mini-card-Gitter: Präsentieren Sie mehrpunktige Listen, Empfehlungen oder Architekturnotizen als farbige Mini-Karten (.nord-mini-card mit Border-Modifikatoren), angeordnet in .nord-card-grid oder .card-mini-stack.
6. Farbcodierte .compare-table-Matrizen: Detaillieren Sie Kompromisse, Szenarioergebnisse oder Modell-Benchmarks mit table.compare-table, wobei Sie .row-selected, .row-evaluated oder .row-rejected für eine klare visuelle Unterscheidung anwenden.
7. Klickbare Modal-Tiefenansichten: Bieten Sie ergänzenden technischen Kontext oder Provenienzdetails über .modal-layer und .modal an, mit Fokus-Trapping und Escape-to-Close-Barrierefreiheit.

Bausteine und Komponentenrezepte

1. Hero-3-Karten-KPI-Gitter

Verwenden Sie .metric-grid, .interactive-grid oder .nord-card-grid mit drei gleich breiten Spalten auf dem Desktop. Karten werden gedehnt, um die Zeilenhöhe zu erreichen, und eine einzelne nachlaufende Karte erstreckt sich über die volle Breite:

<div class="card-grid metric-grid" aria-label="Schlüsselindikatoren">
  <article class="hero-card">
    <span class="card-label">Latenz</span>
    <strong>180ms</strong>
    <p>Durchschnittliche Roundtrip-Antwortzeit.</p>
  </article>
  <article class="hero-card">
    <span class="card-label">Zuverlässigkeit</span>
    <strong>99,98 %</strong>
    <p>Erfolgsrate über 10.000 Durchläufe.</p>
  </article>
  <article class="hero-card">
    <span class="card-label">Abdeckung</span>
    <strong>24 / 24</strong>
    <p>Alle Benchmark-Szenarien verifiziert.</p>
  </article>
</div>

2. Einklappbares linkes TOC-Seitenmenü (keine <ul>-Listen)

Stellen Sie Links in <div class="toc-list"> ohne <ul>- oder <li>-Tags dar:

<nav class="sidebar" id="tocSidebar" aria-label="Inhaltsverzeichnis">
  <p class="sidebar-title">Auf dieser Seite</p>
  <div class="toc-list">
    <a class="toc-link" href="#overview"><span>01</span> Überblick</a>
    <a class="toc-link" href="#architecture"><span>02</span> Architektur</a>
    <a class="toc-link" href="#evaluation"><span>03</span> Evaluierung</a>
  </div>
</nav>

3. Animierte SVG-Architektur-Darstellung

Stellen Sie Datenpipelines mit SVG-Pfaden und animierten Impulsen dar:

<div class="diagram">
  <div class="diagram-header">
    <strong>Ausführungspipeline</strong>
    <span class="diagram-caption">Signal zum Urteil</span>
  </div>
  <div class="diagram-flow" aria-label="Pipeline-Phasen">
    <svg class="flow-svg flow-horizontal" viewBox="0 0 600 54" preserveAspectRatio="none" aria-hidden="true">
      <path class="flow-line" d="M 0 27 H 600"/>
      <circle class="flow-pulse" cx="0" cy="27" r="5"/>
    </svg>
    <div class="flow-node"><strong>Erfassen</strong><small>Eingaben normalisieren</small></div>
    <div class="flow-node"><strong>Analysieren</strong><small>Behauptungen prüfen</small></div>
    <div class="flow-node"><strong>Bewerten</strong><small>Urteil fällen</small></div>
  </div>
</div>

4. Farbige Nord-Mini-Karten (Ersatz für Aufzählungslisten)

Aufzählungslisten (<ul><li>...</li></ul>) sind in Karten, Abschnitten und Modalen strikt verboten. Stellen Sie mehrpunktige Ergebnisse als farbige Nord-Mini-Karten dar:

<div class="card-mini-stack">
  <div class="nord-mini-card border-green">
    <p><strong>Korrektheit bestätigt:</strong> Deterministische Prüfungen wurden bei allen Testfällen bestanden.</p>
  </div>
  <div class="nord-mini-card border-blue">
    <p><strong>Kontexteffizienz:</strong> Die Token-Nutzung blieb innerhalb der optimalen Grenzen.</p>
  </div>
  <div class="nord-mini-card border-yellow">
    <p><strong>Latenzvarianz:</strong> Der Failover-Pfad erforderte eine höhere Verhandlungszeit.</p>
  </div>
  <div class="nord-mini-card border-red">
    <p><strong>Bekannte Einschränkung:</strong> Tiefe Rekursion erfordert manuelle Genehmigungstore.</p>
  </div>
</div>

Verfügbare Border-Farbmodifikatoren:

• .border-green: Erfolg, bestandene Prüfungen, bestätigte Stärken (#a3be8c).
• .border-blue: Primäre informative Punkte, neutrale Beobachtungen (#88c0d0).
• .border-yellow: Warnungen, Teilergebnisse, Hinweise (#ebcb8b).
• .border-purple: Sekundäre strukturelle Notizen, Lifecycle-Hinweise (#b48ead).
• .border-orange: Moderate Anomalien, Leistungswarnungen (#d08770).
• .border-red: Fehler, erkannte Mängel, kritische Risiken (#bf616a).

5. Farbcodierte Vergleichsmatrizen

Strukturieren Sie vergleichende Benchmarks und Fallergebnisse mit .compare-table:

<div class="table-wrap" role="region" aria-label="Optionenvergleich" tabindex="0">
  <table class="compare-table">
    <thead>
      <tr>
        <th scope="col">Kandidat</th>
        <th scope="col">Status</th>
        <th scope="col">Bewertung</th>
      </tr>
    </thead>
    <tbody>
      <tr class="row-selected">
        <td><span class="cell-title">Modell A</span><span class="cell-sub">Empfohlen</span></td>
        <td><span class="status-pill pill-good">Ausgewählt</span></td>
        <td>Hohe Genauigkeit, niedrigste Latenz, null Richtlinienverstöße.</td>
      </tr>
      <tr class="row-evaluated">
        <td><span class="cell-title">Modell B</span><span class="cell-sub">Alternativ</span></td>
        <td><span class="status-pill pill-warn">Evaluierung läuft</span></td>
        <td>Akzeptable Präzision, aber höhere Inferenzkosten.</td>
      </tr>
      <tr class="row-rejected">
        <td><span class="cell-title">Modell C</span><span class="cell-sub">Ausgeschlossen</span></td>
        <td><span class="status-pill pill-bad">Abgelehnt</span></td>
        <td>Überschritt das zulässige Ausführungszeitlimit während der Stresstests.</td>
      </tr>
    </tbody>
  </table>
</div>

Ausgabe von Agentic-Judge-HTML-Urteilen

Wenn ein Agentic-Judge-LLM ein endgültiges Evaluierungsurteil erstellt:

1. Basieren Sie das Urteil auf assets/template-judge-report.html.
2. Behalten Sie das strenge Content Security Policy-Meta-Tag bei: <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; img-src data:">.
3. Führen Sie keine Skripte im Judge-Dokument aus; rendern Sie alle Bewertungen, Fortschrittsbalken und Matrizen direkt als statisches HTML.
4. Strukturieren Sie den Bericht mit Entscheidungszusammenfassung (.summary.panel), Schlüsselindikatoren (.kpi-grid), Fortschrittsanzeige (.progress-panel), Beweisen (.compare-table), Ergebnissen (.nord-mini-card) und Diagnose (.callout).
5. Stellen Sie sicher, dass alle 4 Design-Invarianten eingehalten werden.

Die 4 harten Design-Invarianten

Vor der Auslieferung eines erstellten HTML-Berichts müssen diese 4 harten Invarianten überprüft werden:

1. Null <ul>-Aufzählungslisten: <ul><li>...</li></ul>-Tags sind überall in Inhalten, Navigation und Modalen verboten. Verwenden Sie farbige .nord-mini-card-Komponenten oder <div class="toc-list">-Navigation.
2. Null Emojis: Emojis sind in Text, Überschriften und Beschriftungen verboten. Verwenden Sie saubere monochrome SVG-Symbole (wie eingebettete SVG-Symbole) oder prägnante Textbeschriftungen.
3. Null ASCII-Rahmenzeichnen in .code-block: Rahmenzeichnen-Zeichen (┌─┐, │, └─┘) sind in Code-Panels verboten. Verwenden Sie stattdessen grafische .diagram-flow, .diagram-panels oder eingebettete SVGs.
4. Gültige .compare-table- und .nord-mini-card-CSS-Klassen: Stellen Sie sicher, dass das Dokument das Nord-Designsystem-Stylesheet mit gültigen Regeln für Vergleichstabellen und Mini-Karten enthält oder darauf verweist.

Überprüfung mit lint.py

Führen Sie den mitgelieferten eigenständigen Linter über Python aus:

python3 lint.py <pfad-zum-bericht.html>

Der Linter beendet sich mit Code 0, wenn alle Invarianten und Sicherheitsprüfungen bestanden sind, oder mit Code 1 und gibt spezifische zeilengenaue Ergebnisse auf stderr aus. Sie können auch automatisierte Unit-Tests über das Repository ausführen:

python3 -m unittest discover -s tests -v