交互式信息图与智能代理评审设计系统

概述与理念

本技能提供了一个高自由度的设计系统、CSS/JS 组件目录以及可复制自定义的 HTML 模板。它并非严格的 Python 数据转 HTML 序列化工具。 AI 代理和智能代理评审大语言模型可直接使用 Nord 设计系统的构建块编写自定义 HTML。您拥有完全的创作自由，可以构建自定义 SVG 拓扑、交互式计算器、专属生命周期步骤器、模态深度剖析以及特定领域的评估仪表板。所有产物 100% 自包含、无外部依赖且可离线使用。

核心模板与资源

assets/template-infographic.html：完整的交互式信息图和技术叙述模板，支持暗/亮主题、可折叠目录侧边栏、动画 SVG 数据流、10 阶段交互式生命周期步骤器、图表面板、颜色编码比较表格、彩色迷你卡片以及键盘可访问的模态框。
assets/template-judge-report.html：CSP 沙盒化的智能代理评估报告模板，包含决策摘要、总体评分、3 卡片 KPI 网格、阶段进度条、证据比较表格、以彩色 Nord 迷你卡片呈现的多点发现以及诊断标注。
assets/nord-design-system.css：完整且独立的 Nord 设计系统样式表，包含暗/亮 CSS 自定义属性、响应式网格、图表组件、表格、迷你卡片和状态标签。
references/design-system.md：深入的令牌规范、对比度比和设计指南。
lint.py：验证工具，用于检查 4 项硬设计不变量和安全启发式规则。

构建块与组件配方

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. 可折叠的左侧 TOC 侧边栏（零 `<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 迷你卡片（替代项目符号列表）

在卡片、章节和模态框中严格禁止使用项目符号列表（<ul><li>...</li></ul>）。将多要点发现呈现为彩色 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>令牌利用率保持在最优范围内。</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>

生成智能代理评审 HTML 判定结果

当智能代理评审大语言模型生成最终评估判定时：

以 assets/template-judge-report.html 为基础生成判定结果。
保留严格的内容安全策略元标签：<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; img-src data:">。
不要在评审文档中运行任何脚本；将所有分数、进度条和矩阵直接渲染为静态 HTML。
报告结构应包含：决策摘要（.summary.panel）、关键指标（.kpi-grid）、覆盖率进度（.progress-panel）、证据（.compare-table）、发现（.nord-mini-card）和诊断（.callout）。
确保遵循所有 4 项设计不变量。

4 项硬设计不变量

在交付任何已编写的 HTML 报告之前，请验证以下 4 项硬不变量：

零 <ul> 项目符号列表：在内容、导航和模态框中，禁止使用 <ul><li>...</li></ul> 标签。请改用彩色的 .nord-mini-card 组件或 <div class="toc-list"> 导航。
零表情符号：在文本、标题和标签中禁止使用表情符号。请使用干净的单色 SVG 图标（例如嵌入的 SVG 符号）或简洁的文本标签。
零 ASCII 方框绘图字符（.code-block 中）：在代码面板中禁止使用方框绘图字符（┌─┐、│、└─┘）。请改用图形化的 .diagram-flow、.diagram-panels 或嵌入的 SVG。
有效的 .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

交互式信息图与代理评审设计系统