Tufte 风格数据报告

技能文档

---
name: tufte-report
title: Tufte 风格数据报告
category: 内容创作
description: 创建 Tufte 风格的独立 HTML 数据报告与信息图仪表盘，使用 EB Garamond 正文字体、Monaspace Argon 数字字体、Chart.js 交互图表和内联 SVG 迷你图。当用户需要制作数据报告、活动仪表盘、信息图、个人分析页面、健康数据可视化，或任何结合叙事文本与交互图表的文档时触发。触发词：数据报告、信息图、仪表盘、Tufte、数据可视化。
---

# Tufte 数据报告 — 数据驱动的信息图技能

创建独立 HTML 报告，将编辑叙事与交互式数据可视化相结合，遵循 Edward Tufte 风格：高信息密度、极简图表装饰、排版优先设计。

## 设计理念

Tufte 的核心原则驱动每一个决策：

- **数据墨水比**：每一滴墨水都应代表数据，而非装饰
- **小多图**：重复同一设计来展示对比，而非动画
- **迷你图**：嵌入文字中的词级图形
- **分层**：先概览，再按需展示细节
- **整合**：文字与图形共享同一视觉空间（旁注，而非脚注）

报告应像一篇精心编辑的杂志特稿——从上到下阅读，叙事引导你穿过数据，每个图表都因回答了特定问题而有存在的理由。

## 技能工作流

### 步骤1：构建前确认

编写任何代码之前，必须先确认以下问题。全部回答后才能继续：

1. **你有什么数据来源？**（CSV、JSON、SQLite、API 端点或原始数字）
2. **这份报告要回答的核心问题是什么？**（一句话——这将成为标题并驱动所有设计决策）
3. **需要多少个章节？**（上限 8 个——超出时建议合并相关主题）
4. **输出格式？**（独立 HTML 文件，或嵌入式组件）
5. **时间预算？** 提供估算：
   - 1-2 个章节，仅表格：约 200 行代码
   - 3-4 个章节，2-3 个图表：约 500 行代码
   - 5-8 个章节，含图表+健康数据+迷你图：约 1200 行代码

### 步骤2：数据适配

将用户数据规范化为 ReportData 中间格式。查阅 `references/data-adapter.md` 获取 JSON 模式和适配器说明。

1. 识别数据来源类型
2. 转换为 ReportData JSON
3. 与用户确认规范化结构
4. 使用组件库从 ReportData 生成 HTML

### 步骤3：报告生成

按以下骨架生成独立 HTML 文件：

```
1. 标题 + 副标题 + 数据来源标签
2. [可选] 状态仪表盘（4 列 KPI 条）
3. 概述叙事 + 内联迷你图 + 目录侧栏
4. 摘要卡片（2-4 个 KPI 卡片含迷你图）
5. 章节（每节：状态行 → 图表+叙事旁注 → 表格+叙事旁注）
6. [可选] 决策登记表
7. 页脚（生成日期、来源）
```

### 步骤4：预览与交付

可选启动实时预览服务器：

```bash
python3 scripts/serve.py report.html
```

## 范围保护

- **最多 8 个章节**
- **每节最多 2 种图表类型**
- **每个图表最多 3 种颜色**
- **禁止 3D 图表、饼图、环形图**
- **禁止无意义动画**
- **每个图表必须有标题说明**

## 架构

```
report.html（独立文件，无需构建步骤）
├── Google Fonts CDN（EB Garamond）
├── jsDelivr CDN（Monaspace Argon woff2）
├── jsDelivr CDN（Chart.js 4.x UMD）
├── 内联 <style>（设计系统 CSS）
├── 内联 HTML（语义结构）
└── 内联 <script>（数据 + Chart.js 配置 + 迷你图 + 滚动动画）
```

## 设计系统

- 查阅 `references/design-tokens.md` 获取 CSS 变量、排版比例和色彩方案
- 查阅 `references/components.md` 获取可复用组件的 HTML+CSS 代码片段
- 查阅 `references/charts.md` 获取 Chart.js 配置模式和内联 SVG 迷你图代码
- 查阅 `references/blocks.md` 获取完整组件目录

## 双字体策略

| 场景 | 字体 | 原因 |
|------|------|------|
| 正文、标题、图表说明 | EB Garamond | 经典编辑感，可读性极佳 |
| 表格数字、大数字、状态值 | Monaspace Argon | 等宽对齐，精确信号 |

## 色彩原则

- **橙色**（#c45a28）：主数据流
- **绿色**（#2a7a5a）：增长、正面信号
- **紫色**（#5a5aaa）：社交/沟通指标
- **红色**（#a02a2a）：警报、负面趋势
- **琥珀色**（#c89000）：警告信号

单图表不超过 3 种颜色。

## 常见问题

1. Chart.js CDN 使用 `@4` 而非特定补丁版本
2. 逐个设置 Chart.js 默认属性，不要替换整个对象
3. 图例圆点用 `usePointStyle: false` + `borderRadius: 4`
4. 通过 localhost 测试，不用 file://
5. 连续图表间必须用叙事或表格分隔

使用说明

# Tufte 风格数据报告

创建 Tufte 风格的独立 HTML 数据报告，结合编辑叙事与交互式数据可视化，排版优先、极简装饰。

## 使用

告诉 AI 你的数据和核心问题：

```
用这份 CSV 数据做一份 Tufte 风格的健康报告，核心问题是「我的睡眠质量在改善吗？」
```

或直接提供原始数字：

```
HRV 42ms（之前 48），睡眠评分 72（之前 81），步数 6200（之前 9100），做一份分析报告
```

## 工作原理

1. 确认数据来源、核心问题和章节数量
2. 将数据规范化为标准 ReportData 中间格式
3. 生成独立 HTML 文件：EB Garamond 正文 + Monaspace Argon 数字 + Chart.js 交互图表 + 内联 SVG 迷你图
4. 可选启动实时预览服务器，修改后自动刷新

## 特性

- 高数据墨水比，无图表垃圾
- 双字体策略：衬线正文 + 等宽数字
- 可组合组件库：迷你图行、KPI 卡片、趋势图、数据表、相关矩阵等
- 响应式布局，移动端自适应
- 零依赖，单文件打开即用

如何安装此技能？

访问技能市场，点击「安装」按钮，按提示将技能包放入 AI 编程助手的 skills 目录即可。