# 视觉系统与 PDF 稳定输出规范

## 1. 金标准

以 `assets/golden_sample.html` / `assets/golden_sample.pdf` 为视觉金标准。未来所有 AI流程再造解决方案 PDF 都应看起来像同一套咨询产品线，而不是每次重新设计。

更准确地说：不是“像”，而是 **一比一继承视觉系统**。生成新报告时必须复制 golden sample 的 HTML/CSS，再替换业务内容。除非用户明确要求换视觉风格，否则 CSS 不应漂移。

允许改变：

- 报告标题；
- 行业和业务内容；
- 页面中的示例、数据、角色、流程名称；
- 章节数量可在 12-15 页之间微调。

不允许随意改变：

- A4 页面尺寸；
- 主配色；
- 组件风格；
- 版式密度；
- 作者尾页；
- PDF 输出方式。

## 2. 页面规格

```css
@page { size: A4; margin: 0; }
.page {
  width: 210mm;
  min-height: 297mm;
  padding: 14mm 15mm 13mm;
  page-break-after: always;
  overflow: hidden;
}
```

每一页用 `<section class="page">` 包裹，封面用 `<section class="page dark">`。

视觉锁定检查见 `visual-lock.md`。交付前必须运行 `scripts/verify_visual_lock.py`。

## 3. 配色

必须使用低饱和、咨询感、制造业/流程治理友好的配色。

```css
--ink: #1f2933;
--muted: #60707c;
--line: #d9e1e8;
--bg: #f5f7f4;
--teal: #0f766e;
--teal-soft: #d9f0ec;
--amber: #c7781c;
--amber-soft: #faecd6;
--coral: #d55745;
--coral-soft: #f9dfd9;
--green: #2f7d4f;
--green-soft: #e1f0e7;
--blue: #365f8f;
--blue-soft: #e0e9f4;
--dark: #24313a;
--cream: #fbfaf6;
```

封面深色渐变：

```css
background: linear-gradient(135deg, #1f2933 0%, #263b43 54%, #0f766e 100%);
```

内页使用 `#fbfaf6` 米白底，叠加轻微青绿和琥珀背景，不要使用大面积纯白或强烈渐变。

## 4. 字体

```css
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "STHeiti", "Heiti SC", "Microsoft YaHei", Arial, sans-serif;
```

字号参考：

- 封面 H1：40px，line-height 1.1，font-weight 900。
- 内页 H2：25px，line-height 1.22，font-weight 880。
- 卡片 H3：13-15px，font-weight 850。
- 正文：10.4-11.2px。
- 表格：9.4-9.8px。
- 页码：9px。

不要用 viewport 单位缩放字体。

## 5. 固定组件

### 5.1 Kicker

小胶囊标签，用于页眉分类：

- `Executive Summary`
- `Problem Diagnosis`
- `Mindset Shift`
- `Operating Model`
- `AI Copilot Capabilities`
- `Priority Model`
- `Example Matrix`
- `Governance`
- `Data Foundation`
- `90-Day Roadmap`
- `Weekend Discussion`
- `References`
- `About Author`

### 5.2 Statement

用于每页强判断：

```css
.statement {
  font-size: 18px;
  line-height: 1.62;
  font-weight: 780;
  border-left: 5px solid var(--teal);
  background: #f2f8f6;
}
```

每份报告至少 3 个 statement。

### 5.3 Cards

用于三点结论、问题症状、能力模块、治理机制：

- `.grid-3`：三列卡片；
- `.grid-2`：两列卡片；
- `.card.teal/.amber/.coral/.blue/.green`：顶部色条区分模块。

每张卡片只讲一个观点，标题必须是结论句。

### 5.4 Tables

用于旧做法 vs AI 做法、AI/人分工、角色治理、数据底座、指标。

表头深色 `#23343d`，正文细边框。不要做花哨表格。

### 5.5 Flow

用于 6 步端到端流程：

1. 入口/受理；
2. AI 预审/理解；
3. 风险分级/影响分析；
4. 决策/协同；
5. 执行/验证；
6. 知识沉淀/复盘。

### 5.6 Two Track

用于“旧思路 vs 新思路”。左栏灰色旧方案，右栏青绿色 AI 新机制。

### 5.7 Matrix

用于优先级示例、风险分级、场景分类。矩阵必须能帮助客户开会讨论，不只是装饰。

### 5.8 Roadmap

固定三段：

- 0-30 天；
- 31-60 天；
- 61-90 天。

### 5.9 Question List

最后讨论页使用 6-8 个问题卡。问题要引导客户意识到“需要下一步诊断/试点”。

### 5.10 Author Page

最后一页固定：

- 左侧作者介绍卡；
- 右侧公众号二维码；
- 使用 `assets/zhansheng_talk_qr_cropped.jpg`；
- 页码必须是最后一页。

## 6. 页面密度

目标是“高质量咨询 PDF”，不是营销海报，也不是厚重论文。

每页建议：

- 1 个主标题；
- 1 个说明短段；
- 1 个主要组件；
- 1 个结论/提示/页码。

避免：

- 一页只有大标题和空白；
- 一页超过 900 个中文字；
- 卡片套卡片；
- 文本溢出页面；
- 大面积单色主题。

## 7. 文件与图片

图片资源放在 HTML 同目录或 assets 目录。生成 PDF 前确认：

- 二维码可加载；
- 作者页不丢图；
- 所有相对路径可被浏览器解析。

## 8. PDF 输出

优先使用 Playwright + Chrome：

```bash
python3 scripts/render_pdf.py input.html output.pdf --screenshot output_preview.png
```

要求：

- `print_background=True`
- `prefer_css_page_size=True`
- margin 全部为 0
- A4 输出

## 9. 视觉验收

生成后必须至少检查：

- PDF 页数 12-15 页；
- 中文文本可抽取；
- 封面深色渐变正常；
- 最后一页包含作者介绍和二维码；
- 二维码主体足够大，适合扫码；
- 没有明显文字溢出、重叠、空白异常；
- 文件大小合理，通常 2-8MB。
