ph-xlsx — 把表格变成精美动效报告网页

把一份 Excel 表格，变成一份「看起来像设计师做的」、带动效、可在浏览器直接打开的单文件 HTML 数据报告。单网页参考案例：https://pic.201782.com/2026/1784524707912-gtsb6cng.html

本 skill 的核心资产是一套固定的视觉设计系统（颜色 / 字体 / 组件 / 动效）和一套通用的数据分析 → 章节选择方法论。无论表格是评论、销售、问卷、库存还是任何业务数据，最终网页的"气质"始终一致；变化的是章节内容与图表，它们根据每份数据的语义量身选择。

你要交付什么

一个单文件 .html（HTML + CSS + JS 全内联，< 100KB，无外部图片依赖）
保存到源 xlsx 所在目录，文件名形如 <主题>数据报表.html
用 open 命令在浏览器打开，并在对话里给出路径与一句话总结

不可妥协的设计 DNA（每份报告都必须长这样）

这些是"品牌级"约束——它们让所有报告同源、且远离 AI 默认审美。细节见 references/design-system.md。

暖调象牙纸张底色，永远不用纯黑/纯白、不用蓝紫渐变、不用 Tailwind 默认色。色板：--paper #F6EFE4 / --ink #241C16 / --coral #DD4B43 / --clay #C9794E / --gold #C29A3F / --sage #7C8A6B。
衬线大标题：Fraunces + Noto Serif SC 做标题，Inter + Noto Sans SC 做正文。标题用 font-weight:900 + clamp() 流式字号。
编号章节节奏：每个章节 01／02／...，含主标题 + 一句副标题。
必含动效：顶部滚动进度条、数字 count-up、滚动揭示（staggered reveal）、条形图宽度动画、hover 上浮。一个"签名动效"（如主题相关的飘动元素）。
洞察驱动：每个数据章节配一个深色「关键发现」callout，讲一句结论，而不是只摆数字。
可交互数据浏览器：报告末尾必有"完整数据流"——可搜索 + 可分类筛选，树形/列表展示全部记录。
数据自校验：HTML 里所有统计数字必须由嵌入的 JSON 现算或与源表核对一致；不允许编造。
响应式 + 无障碍：880px / 480px 断点；prefers-reduced-motion；可见 focus 态；语义化标签。

执行流程

1. 定位并分析 xlsx

拿到 xlsx 路径后，优先用自带脚本读取、推断列类型、算基础统计、导出干净 JSON——不要每次手写 openpyxl 解析：

python3 <skill-dir>/scripts/analyze_xlsx.py "<xlsx 路径>"

脚本会：

自动安装 openpyxl（如缺失）
打印每个 sheet 的列类型、填充率、唯一值数、数值列的 min/max/sum/mean、低基数分类列的取值计数、日期列的范围、若干样本行
在 xlsx 同目录写出 <原名>.json（日期已转字符串、空值保留），供你嵌入 HTML 的 DATA 常量

读完输出，你应该能回答：这份数据讲的是什么？哪些列是分类/数值/日期/文本？最有"故事感"的维度是哪几个？

2. 选章节（数据形状 → 章节类型）

根据列的语义挑选 5–7 个章节。映射表与决策规则见 references/section-recipes.md。最低标配：

Hero：报告标题 + 一句话定位 + 关键概览数字
数据概览（stat tiles）：4 个 count-up 数字卡（总数 / 累计量 / 覆盖维度 / 关键比率）
2–3 个图表章节：从条形图 / 环形图 / 标签云 / 排行榜 / 时间趋势 / 互动线程里按数据选
完整数据浏览器：搜索 + 筛选的列表/树

不要照搬「窗帘报告」的具体章节（窗帘热度、IP 地域、作者互动是那份数据特有的）——要迁移的是组件与气质，不是章节。

3. 算分析

把每张图表所需的聚合数据算好（在 Python 里算，或写进 HTML 的 <script> 由 JS 现算）。关键数字要双跑核对：Python 算一遍，再在 HTML 渲染后用 JS 从 DATA 复算，两者一致才能定稿。

4. 生成 HTML

以 assets/template.html 为唯一起点——它已经内联了完整设计系统的 CSS 和全部动效工具 JS。你的工作是：

保留整段 <style> 不动（这就是设计系统，改它就破坏一致性；仅按需微调如「签名动效」形状）
保留 <script> 里的工具函数不动（count-up / reveal observer / progress / bar-fill / donut 生成器 / 搜索筛选器）
重写 <body> 的章节：从 template 里复制对应组件的 HTML 片段，换成真实内容
替换 DATA 常量为脚本导出的 JSON（或其子集）
替换标题/副标题/footer 的文案与数据来源信息

template 里每个可复用组件都有  注释，照着抄即可。

5. 自检（必做）

交付前在终端跑一遍校验，参考窗帘报告的做法：

HTML 标签闭合：section/div/header/footer/script/style 的 open/close 数相等
编码不乱码（关键）：<meta charset="utf-8"> 必须在文件前 1024 字节内、且是 <head> 第一个子元素。校验：python3 -c "d=open('文件','rb').read();print(d.find(b'<meta charset'),'<1024?',d.find(b'<meta charset')<1024)"。若超 1024（通常是因为在 charset 前放了长注释/长 title），浏览器会检测不到编码 → 中文乱码 + HTML 注释外溢到页面。任何注释只能写在 charset 之后。
编辑器兼容（关键）：给最终 HTML 加 UTF-8 BOM，否则 Sublime 等编辑器会把 UTF-8 当 GBK 打开 → 源码中文乱码、制表符变宫格。加 BOM：python3 -c "p='文件';d=open(p,'rb').read();open(p,'wb').write(d if d[:3]==b'\xef\xbb\xbf' else b'\xef\xbb\xbf'+d)"。浏览器会自动忽略开头 BOM，无副作用。源码注释里避免用 ═ 等罕见制表符，改用 ASCII =/-，杜绝字体缺字导致的「宫格」。
JSON 合法：DATA 能被 json.loads 解析，外键/父引用都能对上
数字一致：HTML 里写死的统计数字 == 从 DATA 复算的值
JS 语法：抽出 <script> 内容 node --check 通过
体积 < 100KB
用 open -a "Google Chrome" <文件> 打开确认渲染

6. 保存与交付

保存到源 xlsx 所在目录（不是工作目录，除非两者相同）
文件名：<主题>数据报表.html（主题从数据/笔记标题提炼，简短中文）
确保 UTF-8 BOM（见自检「编辑器兼容」），保证 Sublime 等编辑器打开不乱码
open 打开，给出一句话总结 + 路径

写作原则

先读懂再动手。花两分钟搞懂数据在讲什么，胜过堆十个无意义图表。一份好报告有明确的"观点"，不是数据的罗列。
少即是强。5–7 个章节足够。每多一个图表，都要问"它回答了一个真实问题吗"。删掉凑数的。
中文优先。用户多用中文，标题/正文用中文；英文仅作小写点缀（kicker、拉丁副标）。
动效克制。count-up + 揭示 + 条形宽度 + 一个签名动效，就够了。不要每个元素都飘。
解释 why。每个 callout 不仅给数字，还解释"为什么这个数字重要、意味着什么"。

参考文件（按需读）

references/design-system.md — 完整视觉语言：色板、字体、间距、全部组件目录、动效规范
references/section-recipes.md — 数据形状 → 章节类型的决策表与示例
assets/template.html — 唯一 HTML 起点，内联完整设计系统
scripts/analyze_xlsx.py — xlsx 读取 + 分析 + JSON 导出

触发后第一步

收到 xlsx 路径 + 用户需求时：

读 assets/template.html（了解组件库与设计系统全貌）
跑 analyze_xlsx.py 看数据结构
在心里（或简短跟用户确认）定下 5–7 个章节
复制 template，替换内容，自检，保存到 xlsx 同目录，打开