用途：把用户提供的内容转成可移植的 HTML 成品和 PNG 预览，按需求选择输出规模。两种模式共用来源映射、撰写、渲染与质检流程。
模式选择：card 为单帧装饰性信息、金句、知识、社交、摘要或封面图，需保留要点与限定条件，参考 references/card-design.md，从 assets/card-template.html 起步，交付用 references/card-output-template.md，按密度选大字号、均衡分区或报纸网格。report 为多章节或滚动长文，用于理解结构、决策、取舍、风险与证据，参考 references/output-template.md 与 references/html-skeleton.md。应根据请求的产物推断模式，不把完整文档压成卡片，也不把单卡请求写成报告。
核心原则：用强调提升可读性，而不是把内容摘要掉；在请求范围内保留原意，可改写、重排或删去真正重复处，但不得用要点摘要替代实质文档，即使做摘要卡也要保留限定条件。视觉服务于内容，不能成为丢弃内容的借口。对未成稿的原始想法，需区分已给事实、假设与新作判断。
报告内容模型（可选脚手架，按需选用，不输出空块）：Header（标题、范围、生成日期）；Verdict（仅当来源本身给出结论时呈现）；Structure Map（Mermaid 或布局图，作为导航）；Core Sections（按主题承载正文，仅在澄清关系、对比、顺序、层级或证据时配图）；Decision Matrix；Timeline/Phases；Risks and Proof；Next Move。视觉结构由内容决定：复杂关系用 Mermaid 图，清晰流程用时间线或步骤条，选项对比用矩阵，风险用网格，范围用纳入/排除面板。
工作流：选模式；card 用一句话说明密度与布局，report 先判定类型（想法、需求、目标、评审、架构式）以设定可选块重点；通读输入并标注章节与要点，再决定何处加视觉或排版强调；写 HTML 前先读对应设计资源。输出单个完整 .html 文件：遵循用户指定路径，否则用 mktemp -d 建唯一临时目录写入，不依赖未解析的环境变量；CSS 与 JS 内联或走 CDN（Tailwind CDN、Mermaid CDN 可用），避免项目本地资源，使 .html 保持单文件可移植。中文请求用中文界面文案，英文请求用英文，代码标识符不变。
质检与返回：若含 Mermaid，运行 node scripts/lint_mermaid.js <file.html> 并修复所有 ERR，密度警告视为简化提示；再用 node scripts/render_report.mjs <file.html> --mode report 渲染整页预览，或 --mode card 以 2x DPR 渲染 .card 元素。检查 PNG 中图表失败、溢出、裁切、字号不可读与层级断裂。浏览器渲染不可用时，应说明视觉质检未完成，不得声称通过。
Mermaid 标签安全：未加引号的节点或边标签遇特殊字符会报错，/ 最常见，还有 ()、[]、{}、<>、&、:、#。含标点的标签一律用双引号包裹，如 A["Timeline / Phases"]；仍报错时用 HTML 实体码，如 / 写作 #47;。不确定时给所有标签加引号。
报告风格：安静、专业的报告风格，而非营销落地页；卡片只用于重复出现的发现、选项、风险、指标或提示。若来自架构评审，保留架构图优先、选项矩阵、why-not 备选与红蓝对抗评审，但架构判断本身归 hai-architecture。
输出：使用所选模式的输出模板，报告真实的 HTML 与 PNG 路径、来源保真状态与已完成的质检；卡片在支持时内联展示 PNG，并检查正文 ≥ 18px、移动端可读性与视觉层级。
两个陷阱：以摘要代替增强；把事实、假设与判断混在一起。
不适用场景：需要交互应用或可复用 UI 组件时用前端构建技能；需要印刷海报或文档产物时用文档或图像设计技能；需要架构级判断（APoSD/Ousterhout 评审、模块边界批评）时用 hai-architecture，即使同时要 HTML，架构结论也归其所有，本技能只负责渲染报告。