content-to-html

name	content-to-html
invocation	user
description	Content to HTML — 文章转 HTML 页面、slides、deck 或海报。6 种输出格式，8 种风格预设，1280x720 固定画布。
version	4.2
last_updated	2026-04-19

Content to HTML — 6 种格式，统一入口

核心架构（最重要，先读这里）

四格式四方法论

格式	方法论	一句话
page	Visual Hierarchy	不压缩，分层赋权重
slides	Assertion-Evidence	找断言+找证据，一页一概念
deck	Narrative Curation	跨源策展，编织故事
poster	AIDA Screenshot	找截图点，3秒理解

6 步提取 Pipeline

0.文章类型识别 → 1.IU切分 → 2.信号扫描(+评分) → 3.IU选择 → 4.再格式化 → 5.布局匹配 → 5.5.叙事重排 → 6.保真度检查

每步的完整定义见 format-specs.md。这里是速查：

• Step 0：翻译+Takeaways? 教程? 观点? 案例? → 决定提取变体
• Step 1：全文切分为信息单元（IU），每 IU = 1-3 句独立可理解的信息块
• Step 2：slides 用 5 信号（数字/对比/命名/引用/列表）扫描断言，poster 用 4 特征（信息差/数字冲击/可引用/有立场）扫描截图点
• Step 3：slides 选 40-55% IU，poster 选 4-10% IU
• Step 4：断言→slide 标题，证据→body 内容，数据→表格/KPI，引用→Quote
• Step 5：IU 数量和类型 → 选 slide type → 输出 Extraction Plan Table
• Step 6：对照保真度矩阵验证——slides 禁新增信息，poster 允许文案化

这个 skill 的质量取决于 Pipeline 执行得多好。CSS/字体/动画都是装饰。

---

格式总览

格式	画布	输入	输出
page	响应式滚动	一篇长文	精美可阅读 HTML 页面
slides	1280x720 (16:9)	一篇长文	提炼要点翻页演示
deck	1280x720 (16:9)	多篇碎片	策展叙事演示
poster-9x16	1080x1920	文章要点	竖屏海报/小红书
poster-1x1	1080x1080	核心观点	方形社交卡片
poster-16x9	1920x1080	文章摘要	横屏分享卡

Commands

Command	What
/content-to-html	Interactive: choose format
/content-to-html page <path>	Article → HTML page
/content-to-html slides <path>	Article → 16:9 slide deck
/content-to-html deck	Multi-source → narrative deck
/content-to-html poster <path>	Article → poster (选尺寸)

NOT for

Need	Use instead
Create slides from scratch (no source article)	A frontend slides skill
Data analysis → ECharts visualization	A data-slides skill
AI-generated cover images	An image generation tool
Single standalone chart	A chart generation tool

Bundled Assets（本 skill 目录下）

文件	用途
format-specs.md	6 种输出格式的提取策略+画布规范
slide-design-principles.md	PPT 排版设计原则（三分法/留白/图文/卡片/列表布局）
slide-types.md	15 种 slide 类型的精确 px 布局
STYLE_PRESETS.md	8 种风格预设（CSS 变量+字体+氛围）
viewport-base.css	双模式 CSS（固定卡片 + 滚动页面）
html-template.md	slides/deck/poster HTML 架构
animation-patterns.md	动画分角色系统
slide-schema.md	JSON Schema for 15 slide types（代码即策略的数据契约）
slide-engine.html	JSON→HTML 渲染引擎（self-contained，8 预设 + 15 type + nav + 验证 + 交互）
quality-gate.md	三层质量控制
mermaid-guide.md	Mermaid 集成 + 7 坑指南

---

Phase 0: 定位文章（共享，必做）

1. 用户指定路径，或给关键词搜索
2. Read 文章全文
3. Glob 同目录 images/ 扫描图片
4. 逐个 Read 图片评估可用性
5. 提取 metadata：title, date, tags, description

输出：文章字数 + 图片数量 + 结构概览

---

Phase 1: 选择格式（共享，必做）

用户命令已指定格式则跳过。否则 AskUserQuestion：

选项	说明
page	完整文章 → 可阅读网页
slides	文章要点 → 16:9 翻页演示
deck	多篇碎片 → 叙事演示
poster	文章要点 → 固定尺寸海报（再选 9:16 / 1:1 / 16:9）

---

MODE: page

Read format-specs.md Format 1 获取完整规范。

Phase 2p: 分析结构

从文章提取：标题+副标题、一句话摘要、目录结构、特殊内容块、阅读时间。

Phase 3p: 选风格

6 个 page 预设（Editorial / Notebook / Terminal / Ink / E-Ink Paper / Magazine Grid）。 生成 3 个 hero 预览到 /tmp/content-html-previews/。

Phase 4p: 生成

1. Read quality-gate.md Layer 1 — State Your Approach + Slop Test
2. Read format-specs.md Format 1 — 布局/字号/间距
3. 按 Content-Type Routing 渲染各内容块
4. 必须包含 6 种交互 + OG tags + Print CSS

保存：{文章目录}/html/{slug}.html

---

MODE: slides

Read format-specs.md Format 2 + slide-types.md 获取完整规范。

Phase 2s: 结构提取（两步，核心）

Step 1: 内容提取 — Assertion-Evidence 适配

Read format-specs.md "slides 提取策略" 获取完整规则。核心要点：

• 每张 slide = assertion 标题（结论句 ≤20 词）+ visual evidence
• "和"测试：标题含"和"就拆两页
• 字数预算：标题 ≤20 词，evidence ≤60 词，超过切 Slidedoc 模式

Step 2: Type 选择 — 匹配内容量

Read format-specs.md "提取后：内容决定布局" 获取完整映射表。核心原则：根据提取到的内容量和性质选 type，不是先选 type 再填内容。

Read slide-types.md Content Density Limits — 超过上限拆页，低于下限补充或换 type。

Extraction Plan Table（必做，用户确认后才生成）

提取完内容后，输出一张表给用户审阅：

| 原文位置 | 提取内容 | Slide # | 布局类型 | 内容量 | 预估填充率 | 密度策略 |
|---------|---------|---------|---------|--------|-----------|---------|
| P1-3 | 问题: 4仓库+逻辑错+静默出错 | S2 | Content | 5条x2行 | ~60% ✅ | D=1.0 标准 |
| P4 | 6个子系统 | S3 | Dashboard | 6卡片 | ~40% ⚠️ | D=1.25 中等 |
| P5-6 | 50+ Agent + 架构图 | S4 | Split | 图+3行 | ~35% ⚠️ | 降级→Content |
| P7 | 五问框架 | S5 | Content | 5条x2行 | ~60% ✅ | D=1.0 标准 |

检查项：

• 每页预估填充率标注（✅ >60% / ⚠️ 40-60% / ❌ <40%）
• 填充率 <40% 的页必须标注密度策略（Breathing 档位或降级方案）
• 全 deck 平均填充率决定统一密度系数 D（字号不变，间距×D）
• 布局类型是否匹配内容特征
• 原文关键论据是否遗漏
• 叙事顺序是否合理

用户确认后才进入生成阶段。这是从 data-slides 学到的核心模式：提取过程可见、可审。

叙事顺序模板（from data-slides）

Slides 不是按原文顺序罗列，要有叙事弧线：

Title → Problem(为什么重要) → Scale(多大规模) → Solution(怎么做) → Detail(关键细节) → Results(效果数据) → Insight(核心洞察) → Action(怎么用) → Closing

每页推进一步。用户可以在大纲阶段调整顺序。

Phase 3s: 选风格

Read STYLE_PRESETS.md — 8 个预设。推荐 3 个，生成 title slide 预览。

Phase 4s: 生成

1. Read quality-gate.md Layer 1
2. Read format-specs.md Format 2 — 1280x720 固定卡片架构
3. Read slide-types.md — 每种 type 的精确 HTML + CSS + 间距
4. Read animation-patterns.md — 动画参考
5. 派发 sub-agent 生成，prompt 包含：大纲 + 预设 CSS + slide-types 规范

两条生成路径（v4.0）

路径	适用场景	sub-agent 输出	设计规则位置
JSON→Engine	标准 slides/deck（推荐）	slide-schema.md 定义的 JSON	锁在 slide-engine.html 渲染引擎里
直接 HTML	page 模式、poster 模式、需要自定义布局时	完整 HTML+CSS	散在 slide-types.md 各 type 定义里

Roadmap: poster 模式结构简单（单张固定画布），适合引擎化。page 模式因内容类型多变，短期保持直接 HTML。

JSON 路径：sub-agent 只负责内容决策（选 type、填内容），设计规则零犯错空间。v4.1 新增交互：Content click-to-reveal（expand 字段）+ Dashboard/Hero Stat 数字滚动动画。注意：JSON 路径不含入场动画，如需 fadeUp/fadeScale 效果请用直接 HTML 路径（参考 animation-patterns.md）。 直接 HTML 路径：灵活但依赖 sub-agent 遵守 slide-types.md 规范。

画布核心

body { background: #1a1a2e; display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; }
.slide { width: 1280px; height: 720px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); box-shadow: 0 8px 32px rgba(0,0,0,.25); border-radius: 6px; overflow: hidden; }

5 层结构（非 Title/Divider/Quote 页）

hdr  16px 40px 0  (~40px)
sub  4px 40px 0   (~20px)
body 12px 40px 0  (flex:1, ~628px)
ft   8px 40px 12px (~32px)

保存：{文章目录}/presentation/index.html

---

MODE: deck

Read format-specs.md Format 3。画布同 slides（1280x720）。

Phase 2d: 收集 + 提取（核心区别：多源策展）

Step 1: 收集素材

1. 用户提供多篇文章路径或关键词
2. Read 每篇来源，标记与主题相关的段落
3. AskUserQuestion 确认主题、听众、时长

Step 2: Extraction Plan Table（deck 版）

| 来源文章 | 提取内容 | Slide # | 布局类型 | 叙事作用 |
|---------|---------|---------|---------|---------|
| 《做了三版 Data Agent》 | 核心痛点: 隐性知识难获取 | S2 | Content | 背景-问题 |
| 《Meta 隐性知识》 | 50+ Agent 预计算方案 | S4 | Split(图) | 过程-解法 |
| 《OpenAI Data Agent》 | Less is More 原则 | S6 | Quote | 过程-佐证 |
| 用户口述 | 自己的实践经验 | S8 | Content | 结果-验证 |

检查项（同 slides）+ 额外：

• 每页标注了来源吗（—— 《文章标题》）
• 叙事弧线是否连贯（Opening → 背景 → 过程 → 结果 → 收获 → Closing）
• 多篇来源的内容没有重复/矛盾

Step 3: Type 选择

同 slides 的内容→布局映射规则。

---

MODE: poster

Read format-specs.md Format 4/5/6（按尺寸选）。

Phase 2-poster: 选尺寸 + 提取

Step 1: 选尺寸

AskUserQuestion：9:16（竖屏/小红书）/ 1:1（方形/社交）/ 16:9（横屏/封面）

Step 2: 极致提取

海报是极致压缩。从整篇文章里只保留最有冲击力的内容。

尺寸	提取什么	上限
9:16	1 个标题 + 最多 5 个要点（每个带 1 行说明）+ 1 个 highlight 数据/引用	300 字
1:1	1 个核心观点（大字）+ 最多 3 个支撑数据	100 字
16:9	左栏：标题 + 3-5 bullet / 右栏：1 个大元素（图/引用/数据）	150 字

Step 3: Extraction Plan（poster 版，单行即可）

| 提取内容 | 区域 | 字数检查 |
|---------|------|---------|
| 标题: "Meta 用 50+ Agent 提取隐性知识" | poster-title | 15字 ✅ |
| 要点1: 瓶颈是隐性知识不是模型 + 4仓库3语言 | body-section1 | 30字 ✅ |
| 要点2: 指南针不是百科全书 + 25行/文件 | body-section2 | 25字 ✅ |
| highlight: "工具调用减少 40%" | body-stat | 10字 ✅ |
| 总计 | | 120字 ✅ (上限300) |

Phase 3-poster: 选风格

同 slides 预设。

Phase 4-poster: 生成

单张固定尺寸 HTML 卡片。严格遵守 format-specs.md 的间距和字号规范。

保存：{文章目录}/poster/{slug}-{ratio}.html

---

Shared: Error Warnings

错误	正确
page 正文超 720px	max-width: 720px
slides 一页塞太多	Read slide-types.md density limits
slides body 内容浮在中间	检查 justify-content 策略
字号不在 6 级表内	只用 Display/Title/Heading/Body/Small/Label
side padding 不统一	slides 40px, poster 48-60px, page 24px
图片用绝对路径	相对路径 ../images/
使用 Inter/Roboto/Arial 做 display font	禁止（body font 可搭配其他 display）
slides 用了 Reveal.js	不用，固定 1280x720 卡片
emoji 做图标	SVG 或 CSS 圆点 label
CSS -clamp(...)	calc(-1 * clamp(...))

Shared: Quality Gate

Read quality-gate.md。交付前必过 Squint Test + Swap Test + 格式对应检查清单。

---

Version

• v4.2 — 2026-04-19 — Style presets 校准（对齐 Apple/Stripe/Linear/Vercel/Material）：正文字体 mono→sans-serif，文字颜色 hex→rgba 三级透明度（Material 0.87/0.60/0.38），暗色主题强调色去饱和 30-40%，移除 scan lines/grid overlay（Tufte minimize non-data ink），8 预设加 Ref tag，Font Pool 加 Code 列
• v4.1 — 2026-04-10 — Slide 内交互：Content click-to-reveal（expand 字段）、Dashboard/Hero Stat 数字滚动动画、export 模式自动降级
• v4.0 — 2026-04-09 — JSON→Engine 架构（slide-schema.md + slide-engine.html），密度系数公式化，全局字号一致性铁律，截图验证闭环
• v3.8 — 2026-04-09 — PPT agent 调研落地：min-height+padding 替代 aspect-ratio，稀疏降级矩阵，Card Anti-Float
• v3.3 — 2026-04-09 — A-E 方法论整合，新增 5 种 slide type，presentation scale typography

Earlier versions: see git log.

Credits

Page design: ship-page-skill, visual-explainer, visualize Slides layout: makino-data-slides (spacing rules), revealjs-skill Style system: ui-ux-pro-max-skill, zara-frontend-slides by zarazhangrui (MIT)