메뉴
零依赖、单文件、极致美观的 HTML 网页幻灯片生成器。当用户提到"幻灯片"、"PPT"、"演示文稿"、"slides"、"网页PPT"、"HTML 演示"、"做一份 slides"、"生成 PPT"、"keynote 风格的网页"、或任何将内容转化为演示文稿的意图时，必须调用此技能。即使用户只是说"帮我做一个关于 X 的 slides"而没有明确说 HTML，也应主动触发——这是默认的输出格式。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
一站式内容资产化引擎：默认对内容进行深度优化（契合公众号阅读场景），精排版渲染，一键上传草稿箱。当用户提到"推文"、"公众号"、"排版"、"发布"、"草稿"、或任何将内容转化为公众号图文的意图时，必须调用此技能。
基于艾德勒《如何阅读一本书》四层次阅读法，系统化帮用户阅读、提炼、批判一本书。 不是摘要，不是书评——而是帮用户建立阅读的认知框架，让他在翻开书之前知道该看什么、怎么提问、如何评判。 触发条件（满足任意一条即触发）： 1. 用户给出书名 + 任何分析/框架/方法类意图：「怎么读《X》」「《X》的阅读指南」「拆解《X》」「梳理《X》的结构」「《X》的核心论点」「分析《X》」「如何阅读《X》」； 2. 用户给出书名 + 表达阅读意愿（裸声明也触发）：「我想读《X》」「帮我看看《X》」「《X》讲了什么」「《X》值不值得读」「推荐我怎么读《X》」； 3. 用户把书名和「框架」「方法」「策略」「入手」「重点」「主线」「逻辑」「结构」等词放在一起； 4. 用户读完后想复盘：「刚读完《X》」「《X》读完了，帮我整理」「《X》的读书笔记怎么整理」； 5. 用户提到微信读书书架上的书 + 任何分析意图。 宁可多触发，不可漏过——用户可能只说「我想读《X》」，但这正是最需要认知框架的时刻。
| name | html-slides-generator |
| description | 零依赖、单文件、极致美观的 HTML 网页幻灯片生成器。当用户提到"幻灯片"、"PPT"、"演示文稿"、"slides"、"网页PPT"、"HTML 演示"、"做一份 slides"、"生成 PPT"、"keynote 风格的网页"、或任何将内容转化为演示文稿的意图时，必须调用此技能。即使用户只是说"帮我做一个关于 X 的 slides"而没有明确说 HTML，也应主动触发——这是默认的输出格式。 |
顶尖的网页幻灯片设计师兼前端工程师。专精于创建零依赖、单文件、极致美观的 HTML 演示文稿。
| 文件 | 用途 | 加载时机 |
|---|---|---|
SKILL.md（本文件） | 核心工作流与规则 | 始终 |
STYLE_PRESETS.md | 37 个精选视觉预设全文 | Phase 2：用户确认结构后 |
bold-template-pack/templates/*/design.md | 选中风格的完整设计系统 | Phase 3：用户选定风格后 |
references/style-preview-cards.html | Phase 2 三选一视觉预览卡片模板 | Phase 2：推荐风格时 |
references/viewport-base.css | 16:9 舞台缩放 CSS | Phase 3：生成 HTML 时 |
references/html-template.md | HTML 骨架 + JS 交互功能 | Phase 3：生成 HTML 时 |
references/animation-patterns.md | CSS/JS 动画参考 | Phase 3：需要自定义动画时 |
scripts/extract-pptx.py | PPTX 内容提取 | 用户提供 .pptx 时 |
scripts/deploy-vercel.sh | 一键部署到 Vercel | 用户要求部署时 |
scripts/export-pdf.sh | 导出 PDF | 用户要求导出时 |
transform: scale() 适配窗口。不响应式重排。prefers-reduced-motion 支持、F 键全屏。通读所有材料，抓住核心主题、论点、数据、故事线。
将内容组织为 PPT 逻辑结构：
封面 → 目录/议程 → 内容页 ×N（每页 1-3 核心点）
→ 数据/视觉页 → 总结 → 致谢/Q&A
若用户未明确，必须询问：
用简洁的文本展示结构（每页标题 + 1-2 句要点），等待用户确认后再进入 Phase 2。如果用户说"直接出"或"不用确认"，则跳过确认直接进入 Phase 2。
读取 STYLE_PRESETS.md，了解全部 37 个可用视觉预设。
基于内容主题和场景，从 37 个预设中精选 3 个最契合的。选择原则：
只输出文字描述，不生成任何 HTML 代码。每个推荐包含：
### 推荐 A：[风格名称]
**氛围**：一句话描述
**配色**：`bg` | `text` | `accent` — 简短色值
**字体**：Heading / Body
**为什么适合**：1 句话解释与该主题的契合点
### 推荐 B：[风格名称]
...
### 推荐 C：[风格名称]
...
推荐末尾必须注明：
以上从内嵌的 37 个视觉预设中精选。不满意可以说"换一批"查看更多，或者直接描述你想要的风格（如"深色背景 + 金色衬线字体"），我为你定制。
文本推荐完成后，必须生成一份视觉预览 HTML 文件，让用户可以直观对比三个风格的配色、字体与幻灯片实际呈现效果。
references/style-preview-cards.html，获取预览卡片模板结构。{{STYLE_A/B/C_*}} 占位符）。<原文件名>.preview.html（如 proposal.preview.html）。预览卡片数据来源：
bold-template-pack/templates/<id>/ 下有 design.md，从中提取精确的配色、字体参数。STYLE_PRESETS.md 中），则根据预设描述自行构建参数。Google Fonts 加载：合并三个风格所需的所有字体 URL，去除重复后写入 {{GOOGLE_FONTS_IMPORT}}。中文字体一律使用 Noto Serif SC 或 Noto Sans SC（无需从 Google Fonts 加载，系统自带）。
微型预览区的设计原则：
bg 色text/ink 色仅生成预览 HTML 文件。不要在此阶段生成完整的幻灯片 HTML。
用户选定风格后，进入生成。
读取对应模板的 design.md（或根据用户自定义风格自行构建设计系统）。
读取 references/viewport-base.css + references/html-template.md。如需特殊动画则读取 references/animation-patterns.md。
输出单个完整 .html 文件（用 ```html 包裹）。
设计系统一致性：
--color-bg、--color-text、--color-accent、--font-heading 等，写在 #stage 上）动画规范：
opacity + translateY(20px→0)，0.6s cubic-bezier(0.16,1,0.3,1)prefers-reduced-motion: reduce → 瞬间完成内容密度参考：
| 类型 | 标题字号 | 正文字号 | 每页字数 |
|---|---|---|---|
| 演讲型 | 64-96px | 28-36px | 15-40 字 |
| 阅读型 | 48-72px | 22-30px | 40-100 字 |
在 HTML 末尾以注释形式附上使用说明（翻页/全屏/导出 PDF/部署/修改配色）。
用户提供 .pptx → 运行 python scripts/extract-pptx.py <file> 提取文本+图片 → 用选定风格重新设计。
用户可要求修改（"第 3 页改两列"、"色调更暗"）→ 输出完整新 HTML（不输出 diff）。
bash scripts/deploy-vercel.sh <file.html>bash scripts/export-pdf.sh <file.html>index.html 到 gh-pages 分支#stage 上定义<section class="slide"> 每页，<h1>-<h3> <p> <ul> 内容/* STYLE: 配色 */ <!-- IMG: 占位 --> 方便手动修改