Weekly report html

Weekly Report HTML（一页纸周报）

一套团队共享的渲染契约，把一页纸周度经营报告做成干净、静态、可打印的 HTML。它将某条业务线 本周的数字，渲染成一份读起来是「结论先行 → 证据在后 → 行动收尾」、各团队风格完全一致、 可打印成一页 A4 的报告。

顶部是叙事头部（一句话结论 + 三支柱），下接详细计分卡 （KPI + 图表 + 表格），以「下周行动」收尾。你不是每次重新发明设计——而是 用当前用户的数据填充一个固定骨架，同时保持设计不变。

你是如何被调用的

你会以以下四种方式之一到达这里。逐一处理后，继续往下走 工作流程。

1. 已安装的 skill —— 用户在其项目里要一份周报 / 周报 / 大盘。直接进行。
2. 贴来的 GitHub 地址 —— 用户把本仓库地址贴给你，说「帮我搭起来 / 用它帮我做周报」。 先克隆，再从克隆目录操作：

   git clone <repo-url> weekly-report-html && cd weekly-report-html
   

   读 README.md、本 SKILL.md 和 references/design-spec.md，然后跑下面的工作流程。
3. 为新业务线适配 —— 用户已有本仓库，想要一个属于他们团队的版本（不同的指标、主色、 分段）。同一套工作流程；真正需要改的只有数据和 --accent 主色。
4. 给你一份 Markdown 周报 —— 用户给一个 markdown 周报文件（路径或粘贴正文），让你渲染成一页纸 HTML。 这是主数据源：先读 references/markdown-source.md，把 markdown 映射到数据契约，再渲染。

工作流程

1 — 拿到数据（首选 Markdown 源）

数据来源优先级：① 用户给的 Markdown 周报文档（主数据源，见 references/markdown-source.md ——把 markdown 的小节/表格/序列映射到数据契约，缺的标 "—"，「本周总结」照搬原文）；② 退而填 templates/data.example.json；③ 再退而访谈用户收集。三条路最终都汇成 references/data-schema.md 的字段。不要因为数据不完美就卡住——收集真正重要的，缺的标 "—"，不要编造数字。核心输入：

• 身份：团队 / 公司名、报告周期、数据口径（口径）。
• 结论：本周最重要的一件事，一句话——包含那个但是（张力所在）。这会成为头部 headline。
• 三支柱：本周的赢点、最大风险、值得加注的方向——各配一个 hero 数字 + 一条 8 点迷你趋势。
• KPI 计分卡：4–6 个核心指标，各含值、单位、环比变化（WoW）。
• 一条趋势（≤12 期）和一组构成（≤5 段）值得画成图。
• 一张明细表（如按地区/分段）和一张风险表（指标、当前值、阈值、状态）。
• 下周行动：2–4 条，每条含责任人和截止日。

2 — 读设计规则

写任何 HTML 之前，先读 references/design-spec.md。它是让每个团队的报告保持一致的契约。 不可自行发挥的部分：

• 只用一个主色。 中性灰 + 单一主色（默认深青 #0f766e）。正向 = 主色/绿， 负向 = 暖橙红 #c2410c。换主色只改一个 CSS 变量——绝不引入第二个亮色。
• 涨跌符号：▲/▼ 表示数字的方向，颜色表示好/坏。当二者冲突时 （如成本上升是坏事——标 ▼ 是错的、标 ▲ 又会读成好事），去掉箭头、改用纯色文字。 见 spec 的「涨跌与符号」一节；这条不直观、很容易做错。
• 图表选择：趋势→折线/面积图，迷你趋势→火花柱，部分占整体→环图（≤5 段，超过改条形）， 分类明细→表格，状态→信号灯 pill。不要多片饼图、不要双 Y 轴、不要 3D、不要装饰性配色。
• 打印与可访问性不是可选项：@media print 块、AA 对比度（≥4.5:1，含小号 pill）、 以及单调的标题层级（h1→h2→h3）都是 spec 的一部分——因为 CEO 报告会被打印、被转发。

3 — 产出 HTML

从 templates/report-template.html 起步——它已编码了完整骨架、配色、打印规则、图表， 以及修正过的涨跌/对比度/层级规则。复制它，逐段把示例内容替换为用户数据 （模板里用 🔧 替换 注释标记了各处）。

• 保留结构与 class 名。只改数据、标签和 --accent 变量。
• 数据变了就重算 SVG 几何——不要留旧坐标。spec 的「图表」一节给了折线 points 和环图 stroke-dasharray/stroke-dashoffset 的精确公式。
• 如果用户的报告确实需要模板没有的板块，用同一套设计语言加（同样的卡片、间距、主色）， 而不是硬塞一个外来风格。

4 — 交付前自检

跑下面的质量检查清单。然后把产物路径和查看方式告诉用户（浏览器打开；打印/⌘P → 另存为 PDF 得到一页纸）。再主动提议帮他换主色或接入真实数据源。

质量检查清单

交付报告前，逐条确认：

• headline 是结论，不是数字堆砌 —— 它用一句话说清发生了什么以及张力所在。
• 每个数字用 tabular-nums，符号与数值同写（+12.3%、-5.2%），单位统一。
• 数字格式整页一致 —— 每个指标固定唯一小数位（金额 2 位/亿级 1 位/占比 0 位）， $12.4 与 $12.40 不混用；负数写法、币种符号位置统一；多币种不直接相加（design-spec §5）。
• 没有箭头与语义打架（成本上升的情形）。每个环比按 design-spec §4 判定树从 5 个类里选 （.up/.down/.cost-good/.cost-bad/.muted）：成本类方向冲突用无箭头的 .cost-*； 普通指标即便是坏消息、只要「跌=坏」方向一致仍用 .down（带 ▼），别误套 .cost-bad。
• 颜色是稀缺告警，不是自动着色 —— 常规同向回调用中性灰 .muted（去箭头、留 +/- 号）； 红/主色只留给头部判定为「需跟进 / 异常」的项（design-spec §1）。整页不是一片红绿。
• 红绿语义消歧（交易所/加密场景） —— 含币价/代币涨跌语境数字时：价格字段用中性 .muted （不用好坏色），并在抬头/页脚加 .color-legend 声明「颜色=经营好坏，非币价红涨绿跌」（design-spec §3）。
• 小基数不夸大 —— 基数 < 10 的指标（上币 2→3、机构 1→2）以绝对值为主、环比 .muted 弱化， 不进 headline/支柱高亮位，禁「翻倍」措辞（design-spec §5）。
• 比率变化用百分点 pt —— 成功率/拒付率/费率/转化率等比率指标的环比用 pt，不用 %（design-spec §5）。
• 没有编造趋势 —— 火花柱/折线基于真实多期序列；只有当期值 + 环比的指标只展示数字 （design-spec §6）。少量真实点（如 3 个）照实画，不要凑到 8 个。
• 少于 3 期不连线 —— 只有 2 个点的指标只用 KPI 卡 + 环比，绝不画折线/面积/火花 （「点数真实」≠「可以连线」；design-spec §6）。
• 缺失图型退化为表/条形 —— 分布（直方图）、相关（散点）这类 skill 没有的图型，退化为 分桶横向条形或分档表并注明，不手搓带坐标轴的一次性 SVG（design-spec §6）。
• 一次性项不冒充结构 —— 若环图某段大部分来自一次性事件（如追溯结算），须标注 「含一次性」/ one-off，并与 headline 的定性一致（design-spec §6）。
• 业务线「本周总结」照搬源报告的解读原文，不在大盘里重新归纳（design-spec §2/§7）。
• 策展声明 + 非经营内容不进大盘 —— HR/团建/聚餐/花絮等非经营内容直接剔除（不当「本周大事」、不给「完成」色）；仅当确有省略时页脚才写明（含非经营事项），全量报告不加多余免责（design-spec §2）。
• 只用一个主色；负向用暖橙红，不是第二个亮色。状态永远不靠颜色单独表达—— 配文字（超标/偏高/健康）。
• 图表与数据形状匹配（按选择规则），且 SVG 几何按新数字重算过（各段之和 = 整体； 趋势点铺满坐标轴；最新点高亮）。
• 排序：Others/一次性 置底 —— 表格/图例/条形里实际项按值降序，但「其它/Others」和 一次性项恒置底（即便数值更大），一次性项加「含一次性」标注（design-spec §6）。
• 数字内部自洽 —— 头部、支柱、KPI 卡、表格、图表讲的是同一组数字、同一套阈值 （当前值绝不被误标成阈值）。
• 标题层级单调 h1→h2→h3（为 PDF 书签/读屏器），且 @media print 块存在。
• 它克制自己 —— 同一个数字不在相邻三处反复出现；图表副标题写口径（口径）， 不再复述头部已下的结论。

本 skill 的文件

• README.md —— 上手说明（含「把地址贴给 AI」的流程）与人类快速上手。
• references/design-spec.md —— 完整设计契约（风格、配色、符号、图表、组件、打印、 可访问性、反模式）。生成前先读它。
• references/data-schema.md —— 数据契约：每个字段、含义，以及访谈清单。
• references/markdown-source.md —— 主数据源：如何用 Markdown 周报作为输入（结构约定、字段映射、解析与诚实规则）。
• templates/report-template.html —— 可改肤模板；开箱即用示例数据渲染，改标记处 + --accent 即成为你的版本。
• templates/data.example.json —— 数据契约的填好示例（JSON）。
• templates/source.example.md —— Markdown 源的填好示例（渲染即得演示大盘）。