# Agent OS Kernel 审查报告视觉系统

## 1. Objective

把复杂、严肃的工程审查呈现为一条清晰可执行的上升路径：不淡化问题，也不制造压迫感。读者离开任何一份该系统下的产物时，应感到“风险已被看见、顺序已经理清、下一步能够开始”；质量标准是可作为开源项目技术治理基准的编辑型长文，而非装饰性项目展示页。

## 2. Product Context

Agent OS Kernel 试图将调度、上下文管理、状态恢复、工具协议与隔离等操作系统思想带入 AI Agent 运行时。核心读者是需要判断项目真实成熟度、安排工程资源并逐步交付的维护者与贡献者。视觉上邻近 GitHub Next 的技术坦诚、Reuters Graphics 的信息纪律与 Linear 文档的精确；远离充斥霓虹渐变、漂浮指标卡和空泛口号的 AI 产品落地页。文化语域是技术、开放、务实而乐观。

## 3. Visual Foundations

### 3a. Color

- `--paper: #FFFDF5`：主背景，带轻微日光暖度的白，不使用纯白长时间刺激阅读。
- `--paper-strong: #FFFFFF`：表格、代码与需要清晰边界的局部底色。
- `--ink-900: #17332D`：标题与关键正文，深绿代替默认纯黑。
- `--ink-700: #31554D`：正文。
- `--ink-500: #668078`：辅助信息。
- `--line: #DDE8DF`：分隔线与结构边界。
- `--sun: #FFCA3A`：核心亮色，只用于进展、里程碑和签名视觉。
- `--leaf: #2FA36B`：完成、强项、低风险与主要交互。
- `--sky: #2D7FF9`：链接、信息与证据定位。
- `--coral: #E85D4A`：阻断性问题和 P0；不做大面积背景。
- `--amber: #B96A00`：警告与 P1。

亮色来自纸张、日光黄与生长绿，不使用紫蓝青渐变。风险色只编码风险，不参与装饰；整页同时最多出现两种高饱和色。

### 3b. Typography

- Display：`Georgia, 'Times New Roman', serif`，700；只用于 H1、章节主标题与重要引语，提供“技术刊物”而非 SaaS 模板的阅读气质。
- Body：`'Avenir Next', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif`，400/600/700。
- Data：`'SFMono-Regular', 'Cascadia Code', Consolas, monospace`，400/600；用于提交号、命令、证据编号和验收指标。
- 尺度：`12 / 14 / 16 / 19 / 24 / 32 / 48 / 68`；正文桌面 17px/1.75，移动端 16px/1.7。
- 权重纪律：正文只用 400；结构标签 600；关键结论 700。禁止连续三层都使用粗体。

### 3c. Spacing & rhythm

- 基础单位：4px；尺度 `4 / 8 / 12 / 16 / 24 / 32 / 48 / 72 / 112`。
- 正文阅读列最大 760px；分析表格与路线图可扩展至 1180px。
- 章节间距桌面 112px、移动 72px；段落间 20px。
- 大留白表达阶段转换，小留白表达同一论证链，不用卡片阴影制造层级。

### 3d. Component seeds

- 导航：左侧细窄章节轨道，桌面粘性、移动端折叠为顶部“目录”按钮；只列一级核心章节。
- 结论单元：使用“编号 + 结论句 + 证据脚注”的编辑排版，不使用图标卡片。
- 风险：左侧 4px 色条和严重度文字共同编码，不能只依靠颜色。
- 路线图：一条向右上生长的“内核年轮”路径，阶段节点包含目标、退出标准与依赖；这是一页唯一的强视觉签名。
- 按钮：仅“查看完整计划”和“返回顶部”使用实心；其余为文本链接。
- 图标：只使用内联 SVG 的功能性图标；不使用 emoji 作为装饰。

## 4. Accessibility

正文与背景对比度至少 4.5:1，大字与 UI 至少 3:1；严重度同时显示文字、位置和颜色。键盘焦点为 3px `#2D7FF9` 外环并保留 2px 间隔。动画只在 `prefers-reduced-motion: no-preference` 下启用，且限制为 180–420ms 的淡入/位移；减弱动态时即时显示。装饰 SVG 使用空 `aria-hidden`，信息图提供同等文本摘要。触控目标不小于 44×44px。

## 5. Voice & Tone

语气专业、直接、建设性；结论先行，证据紧随。句式长短混合，风险描述使用“现状 → 后果 → 建议”，路线图使用主动动词。常用词：证据、边界、收敛、验收、恢复。拒绝使用：极致赋能、无缝、颠覆、解锁潜能、生产就绪（没有证据时）。称呼使用“项目”“维护者”“贡献者”，不频繁使用第二人称。

## 6. Implementation Practices

- 纯静态 HTML/CSS/少量原生 JavaScript，设计令牌定义为 `:root` CSS variables，无构建步骤、无第三方 CDN、离线可打开。
- 采用语义化元素：`header/nav/main/section/article/table/footer`；目录与过滤控件具备 ARIA 标签。
- 12 列底层网格，但正文采用 3/9 非对称分栏；移动端单列。
- 不依赖图片。签名视觉、风险分布与路线图均用 CSS/SVG 构建，并提供文本替代。
- 动效采用 `cubic-bezier(.2,.8,.2,1)`，180–420ms；不弹跳、不循环。
- 375px、768px、1440px 三个断点验证；打印样式保留内容、去除粘性导航和交互控件。

## 7. Anti-Patterns

- 不使用渐变 Hero；明亮乐观来自可读底色和精准强调色，而非 AI 产品页惯用霓虹。
- 不使用三列或六列圆角阴影卡片；长篇审查需要论证关系，不是功能陈列。
- 不用漂浮指标三件套；所有数字必须附口径和证据。
- 不用 emoji 做标题装饰；技术可信度由语言与结构承担。
- 不把所有建议做成按钮；只有真实动作才使用控件。
- 不做通用 FAQ；把未决问题放在证据链末端，明确谁来回答、何时回答。
- 不隐藏严重问题来维持“乐观”；乐观体现在问题可分解、进度可验收。
- 不用空泛 Hero 文案；首屏直接给审查对象、快照、结论和批准边界。
- 不把路线图写成没有依赖关系的三步流程；阶段数由工程事实决定。

## 8. Decision-Making

1. 证据真实性优先于视觉冲击；没有口径的数字不展示。
2. 可访问性底线不可协商；颜色或布局冲突时修改设计。
3. 阅读与定位优先于转化；这是决策文档，不是营销漏斗。
4. 风险与希望并置；每个高风险项必须连接到可执行修复和退出标准。
5. 结构优先于容器；先用排版、编号和分隔线，确有边界需求时才使用底框。
6. 一个页面只保留一个签名视觉；其余元素克制服务信息。

## 9. Workflow

1. 固定审查快照、日期、范围和“不执行”边界。
2. 先写执行摘要与证据表，再写页面文案。
3. 将发现映射到 P0–P3、依赖关系和可验证退出标准。
4. 用结构性 HTML 承载全部信息，CSS 只增强层级。
5. 做反模板检查：渐变 Hero、卡片阵列、空泛文案、无来源数字全部清除。
6. 做键盘、对比度、减弱动态和 375px 响应式检查。
7. 在真实浏览器渲染截图，修正溢出、节奏与错误链接。
8. 最终确认网页只展示计划，没有暗示计划已执行。

## Artifact Structure

1. **封面 / 审查契约**：项目、提交快照、审查日期、“计划已完成，执行待批准”；签名元素是从当前内核到可信内核的一条明亮轨迹。
2. **一句话判断**：当前成熟度、最大机会、最重要的收敛原则。
3. **事实基线**：代码面、测试面、治理面和声明一致性；数字均注明来源。
4. **风险地形**：按 P0–P3 和子系统排列，不做装饰性仪表盘。
5. **核心发现**：每项依次呈现证据、影响、建议、验收方法。
6. **目标架构**：内核最小边界、控制面/数据面、状态与执行语义、扩展接口。
7. **极限优化路线图**：阶段、依赖、工作包、退出标准、预估投入与回滚边界。
8. **验证体系**：测试金字塔、基准、可靠性演练、安全门禁、发布门禁。
9. **取舍与暂缓项**：明确哪些诱人功能不应立刻做以及原因。
10. **批准闸门**：用户批准后才允许执行的动作清单；当前状态保持只读。
11. **来源与方法**：仓库快照、命令、官方来源、已知限制。

## Decision Trace

```json
[
  {
    "decision": "采用编辑型技术刊物而非 SaaS 落地页",
    "reason": "内容是长篇工程审查，主要任务是建立可信判断和阅读路径，而不是促成注册。",
    "alternatives": ["营销型落地页", "传统管理驾驶舱"],
    "tradeoff": "首屏视觉冲击更克制，但长文可读性与证据可信度更高。"
  },
  {
    "decision": "亮色系统以暖白、日光黄和生长绿为核心",
    "reason": "满足亮色、积极乐观的明确要求，同时保留技术文档需要的稳定深绿文字。",
    "alternatives": ["紫蓝霓虹渐变", "纯白加品牌蓝", "深色终端风"],
    "tradeoff": "不像典型 AI 产品页那样炫目，需要更精确的排版维持辨识度。"
  },
  {
    "decision": "使用 Georgia 与人文无衬线系统字体配对",
    "reason": "衬线标题建立研究报告气质，系统字体保证中文与离线环境稳定。",
    "alternatives": ["全站 Inter 风格无衬线", "依赖外部中文 Web Font"],
    "tradeoff": "不同操作系统的字形略有差异，但不会因 CDN 失败破坏版面。"
  },
  {
    "decision": "风险不用卡片网格，采用编辑编号与边线",
    "reason": "发现之间有因果和优先级关系，卡片会把它们错误地表达为平级功能。",
    "alternatives": ["3×N 卡片矩阵", "KPI 仪表盘"],
    "tradeoff": "不能一眼看到大量彩色块，但更容易沿证据链阅读。"
  },
  {
    "decision": "唯一签名视觉是向上生长的内核年轮路线图",
    "reason": "将 OS 内核隐喻、迭代阶段和积极上升感合为一个有信息价值的视觉。",
    "alternatives": ["抽象 AI 芯片插画", "等距 3D Agent 人物", "通用时间轴"],
    "tradeoff": "SVG/CSS 实现成本更高，需额外验证移动端可读性。"
  },
  {
    "decision": "首屏明确显示执行待批准",
    "reason": "用户要求暂不执行，设计必须让状态边界在任何截图或转发场景中都不被误解。",
    "alternatives": ["仅在页尾备注", "用按钮暗示立即开始"],
    "tradeoff": "减少营销式紧迫感，但提高治理清晰度。"
  },
  {
    "decision": "纯静态、零外部依赖",
    "reason": "审查文档应可长期保存、离线打开和轻松审阅，不应引入新的构建或供应链负担。",
    "alternatives": ["React/Vite 单页应用", "外部图表库"],
    "tradeoff": "复杂交互受限，但当前信息展示不需要应用级框架。"
  }
]
```

## Anti-slop self-check

Clean：已排除渐变 Hero、圆角阴影卡片阵列、emoji 装饰、漂浮指标三件套、三步式 How it works、虚假 CTA 和空泛营销文案。明亮风格由配色与进展叙事承担，不以掩盖风险换取乐观感。