iuriimedvedev-dev/interactive-infographic-report

互動式資訊圖表與 Agentic Judge 設計系統

概述與理念

此技能提供一個高自由度的設計系統、CSS/JS 元件目錄以及可複製自訂的 HTML 範本。 它不是一個僵化的 Python 資料轉 HTML 序列化工具。 AI 代理與 Agentic Judge LLM 直接使用 Nord 設計系統的建構區塊來創作自訂 HTML。 您擁有完整的創意自由，可以建立自訂 SVG 拓撲、互動計算器、專屬生命週期步驟器、模態深入檢視以及領域專用的評估儀表板。 所有成品均保持 100% 自包含、無外部依賴，並可離線使用。

核心範本與資源

• assets/template-infographic.html：完整的互動式資訊圖表與技術敘事樣板，具備深色/淺色主題、可折疊側邊欄目錄、動畫 SVG 資料流、10 階段互動式生命週期步驟器、圖表面板、色碼比較表格、彩色迷你卡片以及無障礙鍵盤操作的模態視窗。
• assets/template-judge-report.html：CSP 沙箱化的 Agentic Judge 評估報告樣板，包含決策摘要、總分、3 卡 KPI 網格、階段進度條、證據比較表格、以彩色 Nord 迷你卡片呈現的多點發現，以及診斷提示框。
• assets/nord-design-system.css：完整、獨立的 Nord 設計系統樣式表，包含深色/淺色 CSS 自訂屬性、響應式網格、圖表元件、表格、迷你卡片和狀態膠囊。
• references/design-system.md：深入的 Token 規格、對比度比率和設計指南。
• lint.py：驗證公用程式，用於檢查 4 項硬性設計不變性與安全性啟發式規則。

建議的敘事結構

在編寫互動式報告時，請將內容組織成引人入勝的視覺層次結構：

1. 英雄式 3 卡 KPI 網格：使用前置標題、突出的主標題、介紹性敘述、主要動作按鈕以及 3 卡指標網格來介紹主題。
2. 可折疊的左側目錄側邊欄：透過 <nav id="tocSidebar"> 提供即時導航，其中包含 <div class="toc-list"> 和 .toc-link 錨點，並由 IntersectionObserver 滾動監測和行動裝置抽屜支援。
3. 動畫 SVG 架構流程：使用 .diagram-flow 來說明元件之間的移動，其中包含嵌入的 SVG 和沿水平或垂直路徑的動畫脈衝指示器。
4. 互動式 10 階段生命週期步驟器／計算器：使用 .lifecycle、.lc-steps 和 .lc-step 按鈕將多階段流程或演算法分解為離散步驟，並支援鍵盤方向鍵導航和一個活動的 .lc-detail 卡片。
5. 彩色 .nord-mini-card 網格：將多點列表、建議或架構註記呈現為彩色迷你卡片，並以 .nord-card-grid 或 .card-mini-stack 排列。
6. 色碼 .compare-table 矩陣：使用 table.compare-table 詳細說明取捨、情境結果或模型基準測試，並套用 .row-selected、.row-evaluated 或 .row-rejected 以獲得清晰的視覺區分。
7. 可點擊的模態深入檢視：透過 .modal-layer 和 .modal 提供補充的技術背景或來源詳細資料，並保留焦點鎖定與 Escape 鍵關閉的無障礙功能。

建構區塊與元件配方

1. 英雄式 3 卡 KPI 網格

在桌面裝置上使用 .metric-grid、.interactive-grid 或 .nord-card-grid，搭配三個等寬欄位。 卡片會延伸以符合行高，任何孤立的尾隨卡片將跨越整個寬度：

<div class="card-grid metric-grid" aria-label="關鍵指標">
  <article class="hero-card">
    <span class="card-label">延遲</span>
    <strong>180ms</strong>
    <p>平均往返回應時間。</p>
  </article>
  <article class="hero-card">
    <span class="card-label">可靠性</span>
    <strong>99.98%</strong>
    <p>10,000 次執行的成功率。</p>
  </article>
  <article class="hero-card">
    <span class="card-label">涵蓋率</span>
    <strong>24 / 24</strong>
    <p>所有基準測試情境均已驗證。</p>
  </article>
</div>

2. 可折疊的左側目錄側邊欄（零 <ul> 列表）

在導航側邊欄中，將連結渲染在 <div class="toc-list"> 內，不使用 <ul> 或 <li> 標籤：

<nav class="sidebar" id="tocSidebar" aria-label="目錄">
  <p class="sidebar-title">本頁內容</p>
  <div class="toc-list">
    <a class="toc-link" href="#overview"><span>01</span> 概述</a>
    <a class="toc-link" href="#architecture"><span>02</span> 架構</a>
    <a class="toc-link" href="#evaluation"><span>03</span> 評估</a>
  </div>
</nav>

3. 動畫 SVG 架構流程

使用 SVG 路徑和動畫脈衝來表示資料管道：

<div class="diagram">
  <div class="diagram-header">
    <strong>執行管道</strong>
    <span class="diagram-caption">從訊號到判決</span>
  </div>
  <div class="diagram-flow" aria-label="管道階段">
    <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>輸入</strong><small>標準化輸入</small></div>
    <div class="flow-node"><strong>分析</strong><small>驗證斷言</small></div>
    <div class="flow-node"><strong>評分</strong><small>產生判決</small></div>
  </div>
</div>

4. 彩色 Nord 迷你卡片（取代項目符號列表）

在卡片、區段和模態視窗中，嚴格禁止使用項目符號列表。 請將多點發現呈現為彩色的 Nord 迷你卡片：

<div class="card-mini-stack">
  <div class="nord-mini-card border-green">
    <p><strong>驗證正確性：</strong>在所有測試案例中，確定性檢查均通過。</p>
  </div>
  <div class="nord-mini-card border-blue">
    <p><strong>上下文效率：</strong>Token 使用量維持在最佳範圍內。</p>
  </div>
  <div class="nord-mini-card border-yellow">
    <p><strong>延遲變異：</strong>容錯路徑需要較高的協商時間。</p>
  </div>
  <div class="nord-mini-card border-red">
    <p><strong>已知限制：</strong>深度遞迴需要手動核准關卡。</p>
  </div>
</div>

可用的邊框顏色修飾符：

• .border-green：成功、通過檢查、已確認的優勢 ( #a3be8c )。
• .border-blue：主要資訊點、中性觀察 ( #88c0d0 )。
• .border-yellow：警告、部分結果、注意事項 ( #ebcb8b )。
• .border-purple：次要結構性備註、生命週期提示 ( #b48ead )。
• .border-orange：中等異常、效能注意事項 ( #d08770 )。
• .border-red：失敗、偵測到的缺陷、嚴重風險 ( #bf616a )。

5. 色碼比較矩陣

使用 .compare-table 來結構化比較基準測試和案例結果：

<div class="table-wrap" role="region" aria-label="選項比較" tabindex="0">
  <table class="compare-table">
    <thead>
      <tr>
        <th scope="col">候選方案</th>
        <th scope="col">狀態</th>
        <th scope="col">評估</th>
      </tr>
    </thead>
    <tbody>
      <tr class="row-selected">
        <td><span class="cell-title">模型 A</span><span class="cell-sub">推薦</span></td>
        <td><span class="status-pill pill-good">已選擇</span></td>
        <td>高準確度、最低延遲、零政策違規。</td>
      </tr>
      <tr class="row-evaluated">
        <td><span class="cell-title">模型 B</span><span class="cell-sub">備用</span></td>
        <td><span class="status-pill pill-warn">已評估</span></td>
        <td>可接受的精確度，但推理成本較高。</td>
      </tr>
      <tr class="row-rejected">
        <td><span class="cell-title">模型 C</span><span class="cell-sub">不符資格</span></td>
        <td><span class="status-pill pill-bad">已拒絕</span></td>
        <td>在壓力測試期間超過允許的執行逾時。</td>
      </tr>
    </tbody>
  </table>
</div>

產生 Agentic Judge HTML 判決

當 Agentic Judge LLM 產生最終評估判決時：

1. 以 assets/template-judge-report.html 為基礎產生判決。
2. 保留嚴格的內容安全策略 meta 標籤： <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; img-src data:">。
3. 請勿在 Judge 文件中執行任何腳本；直接將所有分數、進度條和矩陣渲染為靜態 HTML。
4. 報告結構應包含決策摘要、關鍵指標、涵蓋率進度、證據、發現以及診斷。
5. 確保所有 4 項設計不變性均被遵守。

4 項硬性設計不變性

在交付任何編寫的 HTML 報告之前，請驗證以下 4 項硬性不變性：

1. 零 <ul> 項目符號列表：在內容、導航和模態視窗中，全面禁止使用 <ul><li>...</li></ul> 標籤。請改用彩色的 .nord-mini-card 元件或完整的導航。
2. 零表情符號：在文字、標題和標籤中禁止使用表情符號。請使用清晰的單色 SVG 圖示或簡潔的文字標籤。
3. 在 .code-block 中零 ASCII 方框繪圖：在程式碼面板中禁止使用方框繪圖字元。請改用圖形化的 .diagram-flow 或嵌入的 SVG。
4. 有效的 .compare-table 和 .nord-mini-card CSS 類別：確保文件包含或連結到具有比較表格和迷你卡片有效規則的 Nord 設計系統樣式表。

使用 lint.py 驗證

從 Python 執行包含的獨立 linter：

python3 lint.py <path-to-report.html>

如果所有不變性和安全性檢查均通過，linter 將以代碼 0 退出；如果未通過，則以代碼 1 退出，並將具體的行級別發現列印到 stderr。 您也可以跨儲存庫執行自動化單元測試：

python3 -m unittest discover -s tests -v