# Sn Md To HTML Report

将 Markdown 报告、研究笔记、行业分析、战略备忘录、技术白皮书、复盘、周报等长文档，重组并创作为有编辑判断、网页美感和证据秩序的自包含 HTML...

- Repository: https://github.com/OpenSenseNova/SenseNova-Skills (6002 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-10-29
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add OpenSenseNova/SenseNova-Skills --skill sn-md-to-html-report -g -a claude-code -y`
Codex: `npx skills add OpenSenseNova/SenseNova-Skills --skill sn-md-to-html-report -g -a codex -y`
Cursor: `npx skills add OpenSenseNova/SenseNova-Skills --skill sn-md-to-html-report -g -a cursor -y`
Gemini CLI: `npx skills add OpenSenseNova/SenseNova-Skills --skill sn-md-to-html-report -g -a gemini-cli -y`

## Description

将 Markdown 报告、研究笔记、行业分析、战略备忘录、技术白皮书、复盘、周报等长文档，重组并创作为有编辑判断、网页美感和证据秩序的自包含 HTML 专题页。用户要求“转成 HTML”“网页化报告”“美化报告”“做成专题页”“便于分享”“提升可读性/设计感”“把报告做成网页”时使用。必须先写 plan.md 再写 HTML，保留原文事实断言和结论强度，不套模板，不做机械 Markdown 转换。

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Report HTML

把报告文本创作为一份有编辑判断、网页美感、证据秩序、且只属于这份主题的单文件 HTML。

核心原则：**保留事实断言，重构阅读和视觉体验，让设计从报告所属领域和内容任务里长出来。主题自己的世界, , 它的材质、工具、器物与语汇, , 是产生独特设计选择的来源。**

## 设计判断原则

- **首屏即论点**：首屏先找到这份报告所属领域里最有识别度、最能承载主题气质的事物或机制，并用最适合它的形式呈现：标题、图片、动画、实时演示或一个可互动瞬间。这个选择必须有明确判断；不要默认使用“大数字 + 小标签 + 辅助统计 + 渐变强调”，只有当它确实是主题最自然、最有力的入口时才使用。
- **文字系统承载页面性格**：标题字体与正文字体要被有意搭配，不要沿用任何项目都能套上的常用字体组合；同时建立清晰的字阶，并有意识地设置字重、字宽和间距。让文字排印本身成为设计中可被记住的一部分，而不是只负责传递内容的中性容器。
- **结构即信息**：编号、眉题、分隔线、标签等结构性手段，应该传递内容的真实信息，而不是装饰内容。许多通用设计都使用编号标记（01/02/03），但这仅适用于内容本身就是一个序列的情况, , 例如一个真实的流程或一份文字时间线，其中顺序承载着读者所需的信息。在使用编号标记之前，请先思考其是否真的有意义。
- **有意识地使用动效**：先判断动效是否能服务主题、阅读或信息理解，再决定用在哪里：页面加载序列、滚动触发展示、悬停微交互或环境氛围。一个被编排好的关键动效通常比零散特效更有力量；动效选择必须服从整体美学方向。有些主题更适合克制处理，额外动画反而会削弱专业感，并让页面显得像 AI 生成的模板作品。
- **复杂度匹配愿景**：视觉方向越繁复，执行就越需要足够的层次、细节和完成度；视觉方向越极简，间距、字阶、对齐和微细节就越要精准。优雅不等于少，也不等于多，而是把选定的方向执行到位。
- **认真处理文案**：标题、导语、标签、按钮和说明都要被当作设计的一部分处理。可以对源报告的内容重写、压缩、合并和组织表达，但不得发明事实、口径或结论强度。文案和视觉一样会产生模板感。

## 设计知识的使用方式

- **层级**：先决定读者第一眼、第二眼、第三眼分别看什么，再分配尺度、重量、留白和位置。
- **对比**：用字体气质、字号、明暗、密度、动静和空间关系制造差异；不要只靠颜色强调。
- **对齐与网格**：正文、图表、卡片、注释和导航都落在同一套网格和宽度档里，避免右边缘和左基线随手漂移。
- **邻近与分组**：证据靠近判断，注释靠近对象，相关项成组，不相关项拉开。
- **重复与变奏**：重复建立秩序，变奏表达章节差异；整页不能一章一个系统，也不能每章完全同形。
- **图地关系**：纹理、背景、氛围和动效永远退到内容之后，不能抢走正文和证据的可读性。
- **节奏**：长报告要有轻重、疏密、转场和停顿；不是把所有模块等权堆叠。

## 硬规则

- Markdown 是素材，不是页面结构；不要逐段照搬，也不要把所有内容塞进卡片。
- 先写 `plan.md`，再写 HTML；没有完整 plan 不动 HTML。
- 页面默认是单文件 HTML：语义 HTML + 内联 CSS；除非用户要求或项目已有资源体系，不拆分文件、不引 CDN。
- 可以用领域隐喻组织视觉和结构，但页面里的数字、来源、案例、判断、结论强度必须来自原报告。
- 不发明 logo、客户、证言、排名、地图点位、图表数据、置信度或看似合理但原文无法支撑的归纳。
- 图表、流程、时间线、地图式分组等必须自包含手写。

## 工作流

The rest: https://github.com/OpenSenseNova/SenseNova-Skills/blob/HEAD/skills/sn-md-to-html-report/SKILL.md