joeseesun Qiaomu Chart Report
把信息做成一份能读、能核对、能分享的单文件 HTML 报告，并交付真实浏览器截图。页面不是“数据堆成仪表盘”，而是一条从结论到证据的阅读路径。
Mandatory Workflow
- 把当前
SKILL.md所在目录记为SKILL_DIR，读 Vercel 式黑白默认视觉、报告设计与图表规则 和 交付契约。只要任务包含图表，再读 开源图表系统。 - 确认受众、用途、输入、时间范围、单位、统计口径和输出目录。信息足够时直接执行；只有缺失会改变结论或统计口径时才询问。
- 先做证据账本：区分
source fact / computed metric / interpretation / recommendation / missing evidence。不得把推断伪装成原始事实，也不得补造数字。 - 计算必须可复核。优先使用项目已有脚本或合适的数据工具；保留公式、筛选条件、分母、日期和单位。发现数据质量问题时在页面里显式披露。
- 写一个紧凑的
report-plan.md：核心结论、受众动作、章节顺序、每张图回答的问题、响应式降级、证据与限制。视觉默认锁定为vercel-monochrome；只有用户明确指定其他品牌、主题或参考图时才覆盖，并记录覆盖原因。 - 生成自包含 HTML：语义 HTML、内联 CSS、必要的内联 JS/SVG；默认不依赖 CDN、远程字体或网络资源。以
assets/styles/vercel-monochrome.css为默认 token 和组件基准，在<html>写data-qiaomu-style="vercel-monochrome"，整页只有一个视觉系统。 - 每张图只回答一个问题，标题写结论，图形展示证据。先在开源图表矩阵中匹配数据关系：普通图和多数高级图用 ECharts recipe；弦图、蜂群、山脊等特殊布局才用 D3 recipe。复杂图必须通过“有趣门禁”和移动端降级，不得从图库里随机挑一个炫技。
- 默认从
assets/chart-recipes.js复用图表配置，不重复手写脆弱布局。HTML 模板保留 vendor 占位符，再按需嵌入固定版本：
python3 "$SKILL_DIR/scripts/embed_chart_lib.py" report.template.html report.html --libraries echarts
# 只有使用 D3 recipe 时：
python3 "$SKILL_DIR/scripts/embed_chart_lib.py" report.template.html report.html --libraries echarts,d3
- 图表必须有标签、单位、来源/口径、figure/figcaption 和文本替代；颜色不是唯一编码。调用
QiaomuCharts.ready()，让截图器等待所有图表完成。没有数据关系时用文字、表格或简图，不强行画图。 - 运行静态审计：
python3 "$SKILL_DIR/scripts/audit_report.py" report.html --json-output audit.json
- 用临时、隔离的 Chrome/Chromium Profile 渲染桌面和移动截图：
node "$SKILL_DIR/scripts/render_html.mjs" report.html report-desktop.png --width 1440 --height 900 --full-page
node "$SKILL_DIR/scripts/render_html.mjs" report.html report-mobile.png --width 390 --height 844 --full-page
- 必须打开两张 PNG 做真实视觉检查。复杂图额外检查标签碰撞、图形守恒、tooltip 依赖和静态截图可理解性。修复横向滚动、裁切、重叠、孤行、标签拥挤、图例歧义、文字过密、对比度和移动端降级问题，再重新审计与截图。
- 交付
report-plan.md、HTML、桌面 PNG、移动 PNG 和audit.json。说明数据口径、图表 runtime、已验证项与missing evidence；不能只交源码或声称“应该正常”。
Decision Rules
- 默认视觉是 Vercel / Geist 启发的浅色黑白：白底、近黑文字、灰阶层级、无衬线紧凑排版、12 列网格、1px 细边框、8px 小圆角、无厚重阴影。不要复制 Vercel Logo、品牌文案或页面结构。
- “紧凑”不等于拥挤。拉丁 display 标题默认行高
1.02；中文、日文、韩文标题必须经:lang()使用独立 token，默认行高1.12、不得低于1.08，不能直接继承英文常见的.98紧行高。桌面与移动截图都要检查多行标题是否碰撞。 - 未经用户明确覆盖，禁止回到奶油纸色、墨绿/砖红编辑配色、衬线巨型 Hero、18px+ 大圆角卡片墙、紫蓝渐变和玻璃效果。
- Vercel 黑白风格约束网页外壳，不限制数据图形。图表可使用多色分类、连续色阶和正负语义色；默认采用统一、克制、兼顾色盲的纯色色板，并保留直接标签、线型、形状、排序或文字说明等冗余编码。禁止把 ECharts
aria.decal.show作为全局默认；纹理只能在某张图确有无障碍或打印需求时显式开启。不要为了“高级感”把所有系列强制成灰色，也不要把高饱和颜色扩散到页面背景、卡片和正文层级。 - 默认是“滚动型编辑报告”，不是控制台式 dashboard。只有用户需要持续监控、筛选或运营操作时才采用仪表盘结构。
- 首屏先给一个明确结论、范围和阅读入口；KPI 只保留能推动判断的 2–4 个。
- 优先直接标注，少用图例；优先条形图、折线图、点图和小倍图。饼图仅用于少量、互斥且总和明确为 100% 的构成。
- “有趣”来自合适的视觉语法，不来自装饰。支持但严格约束：棒棒糖、哑铃、排名变化、瀑布、日历热力、蜂群、山脊、主题河流、矩形树、旭日、桑基、弦图和平行坐标。
- 同一页面默认最多一个高复杂度主图。若移动端无法保留同一结论，必须改用 small multiples、热力表、排序条形或结构化列表。
- 同一数字只设一个视觉所有者。标题讲结论时，图注补口径或原因，不复读整句话。
- 卡片不是默认容器。用网格、留白、字号、完整细轮廓和色面建立层级；禁用左侧彩色竖线式 callout。
- 长表与代码块可局部横向滚动，页面本身不得横向滚动。移动端应重排，不是按比例缩小桌面版。
- 若用户只要固定尺寸封面/社交卡片，路由到
qiaomu-html-cover或qiaomu-info-card-designer；若要完整网站/应用，使用网站开发流程；若只要现有网页截图，使用浏览器截图能力。
Trust And Boundaries
- 默认离线，不上传用户数据，不复用用户浏览器 Profile，不读取 Cookie。
- 只读取用户提供或任务明确需要的输入，只写用户指定输出目录。
- 外部数据、远程字体或 CDN 必须得到任务授权，并在交付中声明依赖与失败降级。
- 脚本只启动临时 headless 浏览器并在结束后清理临时 Profile；不会修改现有 Chrome 配置。
- 自动审计可证明结构、资源边界和基础交付完整性；统计正确性与审美仍需数据复核和人工视觉检查。独立盲评、Windows/Linux 实机与跨浏览器比较为
missing evidence。