Menú
Content to HTML — 文章转 HTML 页面、slides、deck 或海报。6 种输出格式，8 种风格预设，1280x720 固定画布。
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
| name | content-to-html |
| invocation | user |
| description | Content to HTML — 文章转 HTML 页面、slides、deck 或海报。6 种输出格式，8 种风格预设，1280x720 固定画布。 |
| version | 4.2 |
| last_updated | 2026-04-19 |
| 格式 | 方法论 | 一句话 |
|---|---|---|
| page | Visual Hierarchy | 不压缩，分层赋权重 |
| slides | Assertion-Evidence | 找断言+找证据，一页一概念 |
| deck | Narrative Curation | 跨源策展，编织故事 |
| poster | AIDA Screenshot | 找截图点，3秒理解 |
0.文章类型识别 → 1.IU切分 → 2.信号扫描(+评分) → 3.IU选择 → 4.再格式化 → 5.布局匹配 → 5.5.叙事重排 → 6.保真度检查
每步的完整定义见 format-specs.md。这里是速查：
这个 skill 的质量取决于 Pipeline 执行得多好。CSS/字体/动画都是装饰。
| 格式 | 画布 | 输入 | 输出 |
|---|---|---|---|
| page | 响应式滚动 | 一篇长文 | 精美可阅读 HTML 页面 |
| slides | 1280x720 (16:9) | 一篇长文 | 提炼要点翻页演示 |
| deck | 1280x720 (16:9) | 多篇碎片 | 策展叙事演示 |
| poster-9x16 | 1080x1920 | 文章要点 | 竖屏海报/小红书 |
| poster-1x1 | 1080x1080 | 核心观点 | 方形社交卡片 |
| poster-16x9 | 1920x1080 | 文章摘要 | 横屏分享卡 |
| 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 (选尺寸) |
| 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 |
| 文件 | 用途 |
|---|---|
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 坑指南 |
images/ 扫描图片输出：文章字数 + 图片数量 + 结构概览
用户命令已指定格式则跳过。否则 AskUserQuestion：
| 选项 | 说明 |
|---|---|
| page | 完整文章 → 可阅读网页 |
| slides | 文章要点 → 16:9 翻页演示 |
| deck | 多篇碎片 → 叙事演示 |
| poster | 文章要点 → 固定尺寸海报（再选 9:16 / 1:1 / 16:9） |
Read format-specs.md Format 1 获取完整规范。
从文章提取：标题+副标题、一句话摘要、目录结构、特殊内容块、阅读时间。
6 个 page 预设（Editorial / Notebook / Terminal / Ink / E-Ink Paper / Magazine Grid）。
生成 3 个 hero 预览到 /tmp/content-html-previews/。
quality-gate.md Layer 1 — State Your Approach + Slop Testformat-specs.md Format 1 — 布局/字号/间距保存：{文章目录}/html/{slug}.html
Read format-specs.md Format 2 + slide-types.md 获取完整规范。
Read format-specs.md "slides 提取策略" 获取完整规则。核心要点：
Read format-specs.md "提取后：内容决定布局" 获取完整映射表。核心原则：根据提取到的内容量和性质选 type，不是先选 type 再填内容。
Read slide-types.md Content Density Limits — 超过上限拆页，低于下限补充或换 type。
提取完内容后，输出一张表给用户审阅：
| 原文位置 | 提取内容 | 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 标准 |
检查项：
用户确认后才进入生成阶段。这是从 data-slides 学到的核心模式：提取过程可见、可审。
Slides 不是按原文顺序罗列，要有叙事弧线：
Title → Problem(为什么重要) → Scale(多大规模) → Solution(怎么做) → Detail(关键细节) → Results(效果数据) → Insight(核心洞察) → Action(怎么用) → Closing
每页推进一步。用户可以在大纲阶段调整顺序。
Read STYLE_PRESETS.md — 8 个预设。推荐 3 个，生成 title slide 预览。
quality-gate.md Layer 1format-specs.md Format 2 — 1280x720 固定卡片架构slide-types.md — 每种 type 的精确 HTML + CSS + 间距animation-patterns.md — 动画参考| 路径 | 适用场景 | 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; }
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
Read format-specs.md Format 3。画布同 slides（1280x720）。
| 来源文章 | 提取内容 | Slide # | 布局类型 | 叙事作用 |
|---------|---------|---------|---------|---------|
| 《做了三版 Data Agent》 | 核心痛点: 隐性知识难获取 | S2 | Content | 背景-问题 |
| 《Meta 隐性知识》 | 50+ Agent 预计算方案 | S4 | Split(图) | 过程-解法 |
| 《OpenAI Data Agent》 | Less is More 原则 | S6 | Quote | 过程-佐证 |
| 用户口述 | 自己的实践经验 | S8 | Content | 结果-验证 |
检查项（同 slides）+ 额外：
—— 《文章标题》）同 slides 的内容→布局映射规则。
Read format-specs.md Format 4/5/6（按尺寸选）。
AskUserQuestion：9:16（竖屏/小红书）/ 1:1（方形/社交）/ 16:9（横屏/封面）
海报是极致压缩。从整篇文章里只保留最有冲击力的内容。
| 尺寸 | 提取什么 | 上限 |
|---|---|---|
| 9:16 | 1 个标题 + 最多 5 个要点（每个带 1 行说明）+ 1 个 highlight 数据/引用 | 300 字 |
| 1:1 | 1 个核心观点（大字）+ 最多 3 个支撑数据 | 100 字 |
| 16:9 | 左栏：标题 + 3-5 bullet / 右栏：1 个大元素（图/引用/数据） | 150 字 |
| 提取内容 | 区域 | 字数检查 |
|---------|------|---------|
| 标题: "Meta 用 50+ Agent 提取隐性知识" | poster-title | 15字 ✅ |
| 要点1: 瓶颈是隐性知识不是模型 + 4仓库3语言 | body-section1 | 30字 ✅ |
| 要点2: 指南针不是百科全书 + 25行/文件 | body-section2 | 25字 ✅ |
| highlight: "工具调用减少 40%" | body-stat | 10字 ✅ |
| 总计 | | 120字 ✅ (上限300) |
同 slides 预设。
单张固定尺寸 HTML 卡片。严格遵守 format-specs.md 的间距和字号规范。
保存：{文章目录}/poster/{slug}-{ratio}.html
| 错误 | 正确 |
|---|---|
| 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(...)) |
Read quality-gate.md。交付前必过 Squint Test + Swap Test + 格式对应检查清单。
Earlier versions: see git log.
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)