Menü
Content to HTML — 文章转 HTML 页面、slides、deck 或海报。6 种输出格式，8 种风格预设，1280x720 固定画布。
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| 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)