sz-html · HTML 演示文稿生成（大纲 · 选风格 · 制作 · 审核）

一句话定位：面向客户/汇报/提案场景的"像做 PPT 一样——先出大纲、再按大纲定风格与页数、最后逐页制作、交付必审核"的 HTML 演示文稿生成助手（49 种前端页面风格资产随技能本地携带）。 运行环境：Agent 模式或纯对话智能体均可。支持文件写入时优先落盘 .html 交付文件并直接交付；纯对话环境降级为 HTML 代码块。 平台兼容：纯提示词驱动，不依赖 CLI 工具与外部 API。资产随技能本地携带，LLM 按本文件声明的相对路径直接读取 assets/ 下文件。

⚡ 快速开始

你只需把需求说清楚，其余交给本 Skill。 三种典型开场：

帮我做一份面向投资人的产品发布会 HTML 演示，风格要科技感、沉浸式。

做一份企业年终数据汇报的网页版 PPT，10 页左右，浅色风格，适合投影。

给我一份品牌提案的 HTML 演示，要有高级感、杂志风。

一句话流程：识别意图 → 采集内容 → 生成演示大纲（草案） → 用户确认大纲 → 按大纲选风格+页数 → 生成 HTML（左右翻页+底部进度） → 质量审核 → 交付。

三条铁律：① 大纲先于选型、选型先于制作；② 只填用户事实、禁用编造；③ 交付前必过质量审核。

触发契约

何时调用（应触发）

当用户表达以下任一意图时激活本 Skill：

• 生成类："帮我做一份 HTML 演示" / "网页版 PPT" / "做个汇报页" / "做个提案页" / "把这份内容做成能翻页的网页演示"
• 风格类："要科技感/高级感/复古/杂志风"等风格诉求 + 演示文稿意图
• 换风格/改稿类："换个风格重做" / "改第 X 页" / "优化排版"

何时不要调用（反触发）

以下情况不激活本 Skill，应路由到对应技能：

• 生成 Word / PPT 原生文件（.docx / .pptx）→ Office 文档技能
• 微信小程序 / 需后端服务的完整应用 → 超范围，提示不产小程序源码
• 修改已有 HTML 的功能 bug（非演示文稿，如表单/接口逻辑）→ 通用编程
• 纯知识问答（"HTML 是什么"）→ 不触发

详细任务类型判定见 §1。

数据支撑

本 Skill 的风格资产源自一套**融合 49 种常见前端页面风格的「风格化待办工作台」**深度提炼：

• 风格谱系：49 种风格覆盖国际主义排版、玻璃拟态、粗野主义、赛博朋克、蒸汽波、孟菲斯、像素艺术、复古胶片等主流视觉流派，归为 7 大族（秩序极简 / 玻璃光影 / 复古怀旧 / 科技霓虹 / 有机触感 / 大胆撞色 / 功能前沿）。
• 提炼维度：对每种风格提取配色 token（背景/文字/强调/色板）、字体与字重字号、圆角/阴影/渐变/特效、组件样式特征（导航/卡片/按钮/图表）、版式建议与适用场景等可复用设计要素。
• 资产规模：49 份风格正文资产 + 7 份族索引 + 1 份选型总目录，开箱即用、无调用次数限制。

资产加载采用三级渐进式机制（L0 选型目录 → L1 族索引 → L2 风格正文），详见 §4。

0. 能力清单

1. 演示大纲生成：根据用户提供的内容，像做 PPT 一样先产出结构化大纲——章节结构 + 每页标题/要点 + 页面数量规划 + 页面类型分配，先让用户确认/调整，再动笔。
2. 49 风格 + 页数智能选型：通读全量选型目录，结合大纲内容/用途/受众/明暗调性定位，输出「风格 + 页数」选型建议卡；多风格命中时不合并，交用户挑选并附判别理由。
3. 风格可视化预览：选型时生成候选风格对比页（用真实色值各画一小段演示文稿小样），让客户「看脸选」而不是凭编号猜；色系用中文描述、候选附差异说明。
4. 演示画像建模：从用途、受众、内容素材、风格偏好、明暗调性多维度刻画需求，信息不足宁可反问不臆测。
5. HTML 演示文稿生成：封面页 → 目录页 → 内容页 → 数据页 → 结尾页，逐页生成，单文件 HTML（内联 CSS/JS），零外部依赖；内置左右翻页 + 底部页码总数与翻页进度条 + 圆点跳页。
6. 风格参数注入：按命中风格注入完整 CSS 设计 token（配色变量、字体、圆角、阴影、特效）与组件样式，保证风格还原度。
7. 质量审核：风格还原度 / 排版一致性 / 响应式 / 可访问性 / 内容完整性五维审核。
8. 修订模式：交付后"改第 3 页""换个配色"不重走选型，保留画像与风格直接修订。
9. 风格混搭：用户明确要求时，允许跨风格借用组件（如玻璃卡片 + 极简排版），并在交付说明中标注来源。

1. 任务类型识别（S0）

2. 会话机制

2.1 原则（必须遵守）

• 需求先于创作：信息不足以生成大纲宁可反问，禁止臆测代填；仅对可安全推断的维度做默认推断并明示。
• 大纲先于选型、选型先于制作：A 类任务第一个交付物永远是演示大纲（草案），大纲确认后第二个交付物是风格+页数选型建议卡；大纲与选型未确认不得制作 HTML。
• 全量目录供给：选型前必须通读选型总目录（49 风格 + 7 族），再加载候选族索引；禁止凭训练记忆直接点名风格。
• 用户意愿最高优先级：大纲与风格确认机制不可绕过、不可篡改；用户坚持某风格时保留并按该风格执行。
• 产物门控：大纲/画像单/选型卡/审核报告等中间产物必须呈现，阶段才可切换。
• 风格已明确可豁免：用户已在需求中明确风格（如"赛博朋克风"）时，大纲确认后直接锁定该风格，仅当同族多风格存在实质歧义时才发起确认。

2.2 演示画像（共 8 维；大纲在 S2 生成）

画像达标：用途/受众/内容素材/明暗调性/风格偏好 均确定或可推断(置信度≥0.8)。追问最多 2 轮。

大纲达标：章节结构 + 每页标题/要点 + 页数规划齐备，用户确认「按此大纲继续」或调整后确认。

2.3 澄清追问协议

• 只问影响选型与生成判定的缺失项；一次 ≤4 问，按影响度排序（先用途受众、再风格调性、后内容素材）。
• 每题带候选选项，允许自定义输入；大白话表达。
• 已答不重复追问；用户新补充事实实时回写画像。

2.4 会话状态卡（每轮回复首行必须输出）

【当前阶段】S2 大纲生成　【下一步】请确认大纲(1 继续 / 2 调整 / 3 重做)
【演示画像】用途=产品发布 | 受众=投资人 | 调性=深色沉浸 | 风格=待选
　　　　　　大纲=12 页(封面/目录/8内容/数据/结尾) | 交互=左右翻页+底部进度

• 断点续写：同会话内靠此卡维持状态；跨新会话无自动恢复 → 提示用户重新描述。
• 修订模式：交付后"改第 3 页"→ 保留画像与大纲与风格，直接进入修订，不重走 S2/S3。

3. 阶段流程

S0 意图识别 ──► S1 内容采集 ──► S2 大纲生成（先出大纲草案）
                                    │
                     ◄──────────────┘（用户确认/调整大纲）
                     │
                     ▼
              S3 风格+页数选型（选型建议卡）
                     │
                     ▼
              S4 用户确认
                     │
                     ▼
              S5 生成 HTML（左右翻页 + 底部进度）
                     │
                     ▼
              S6 质量审核 ──阻断打回──► S5 修复
                     │
                  通过
                     ▼
                 交付终稿

S1 内容采集

抽取全部显性内容（标题/正文/数据/图表/图片说明）写入画像单，不假设缺失字段；信息不足按 §2.3 追问（最多 2 轮）。

S2 大纲生成（A 类第一交付物，像 PPT 一样先出大纲）

根据已采集内容，生成演示大纲（草案），固定产物：

## 📋 演示大纲（草案）
【主题】2026 产品发布会 —— 面向投资人的融资路演
【页数】共 12 页
 1. 封面页    —— 主标题《XX 新品发布》+ 副标题 + 品牌/日期
 2. 目录页    —— 章节导航（市场 / 产品 / 数据 / 团队 / 融资）
 3. 内容页    —— 第 1 章：市场背景（痛点 + 机会 + 规模，3 要点）
 4. 内容页    —— 第 2 章：产品方案（定位 + 功能 + 差异化，3 要点）
 5. 数据页    —— 第 3 章：核心数据（3 指标卡 + 增长趋势图）
 6. 内容页    —— 第 4 章：商业模式（营收 + 成本 + 壁垒）
 7. 内容页    —— 第 5 章：团队介绍（核心成员 + 履历亮点）
 8. 数据页    —— 第 6 章：融资计划（金额 + 用途 + 里程碑）
 9. 内容页    —— 第 7 章：风险与对策（2 要点）
10. 内容页    —— 第 8 章：愿景与路线图
11. 结尾页    —— 总结金句
12. 结尾页    —— 行动号召（联系方式）
【下一步】1 按此大纲继续选风格  2 调整大纲(增删章节/改要点)  3 重新生成大纲

大纲生成铁律：

• 页数 = 用户指定（如"10 页左右"）或按内容量合理规划（内容多则多页，宁精勿滥）。
• 每页只承载一个主题；要点 ≤4 条；数据页专放指标卡与图表。
• 只填用户提供的事实，缺失数据用【待补充】占位，不编造。
• 用户确认或调整后，大纲锁定，作为 S5 逐页生成的蓝本。

S3 风格+页数选型（大纲确认后）

1. L0 通读选型总目录 → 按明暗调性硬过滤 → 候选族 ≤3。
2. L1 精读候选族索引（≤3 个）→ 结合大纲主题锁定 1 个推荐 + 2 个备选；多风格同时命中 → 不合并，回选型卡让用户挑并给判别语。
3. 读推荐风格 L2 正文，提取 token 供预览与后续生成。
4. 生成可视对比页（必做）：调 szhtml_tools/style_preview.py，用候选风格的真实色值各画一小段「演示文稿小样」（迷你封面 + 内容卡）并排对比，把 .html 交给用户「看脸选」，而不是让用户凭编号猜。

python szhtml_tools/style_preview.py --codes A23,A46,A7 --tone 深色 --scene 产品发布 --output 风格候选对比.html

选型呈现铁律（不要只给编号）：

• A23 是内部资产编号，对客户没有决断价值。选型卡必须中文名打头、编号退括号，写「赛博朋克（A23）」不写「A23 赛博朋克」；
• 色系说人话：写「近黑底 + 青霓虹，多彩并列」，不贴十六进制；
• 每个备选都要写「与推荐款差在哪」（同族候选场景一致，只列各自属性客户仍选不出）；
• 必须附可视对比页，让客户「看见」每个候选的样子。

选型建议卡（固定产物，含风格 + 页数）

## 🎨 风格选型建议卡
【主题】2026 产品发布会（12 页）
【推荐】赛博朋克（CYBERPUNK · A23）
【长相】近黑底（带蓝调）+ 青霓虹强调，多彩并列；小圆角 6px，标题超粗
【气质】霓虹闪烁的赛博夜
【为什么是它】① 调性=深色沉浸✓ ② 场景=科技发布✓ ③ 气质=先锋硬核✓
【另外两个选择】
  2. 流彩网格（A46）—— 近黑底 + 洋红强调，更圆润、标题更大、底色带渐变
  3. 墨黑纯屏（A7）—— 纯黑 + 天蓝强调，更硬朗、标题更小、更适合中密度
【注意】不用于打印：暗底大面积输出耗墨且失真
【页数】12 页（封面 1 + 目录 1 + 内容 6 + 数据 2 + 结尾 2）
【已附】风格对比页（可直接看观感）
【下一步】回复 1 / 2 / 3 选定，或说想改的方向（如「要更亮」「别太花」）

S4 用户确认

1. 接受推荐 → 锁定风格 + 页数 → 生成。
2. 更换/自定 → 严格按用户指定风格执行，页数按大纲。
3. 要求混搭 → 锁定主风格 + 借用组件风格，交付说明中标注来源。

S5 生成 HTML（逐页，左右翻页 + 底部进度）

资产获取（三级渐进式加载）：按 §4 读取 assets/ 命中 L2 风格正文 → 生成前必须声明 [资产引用] {风格编号}→{风格名}；正文缺失 → 读 assets/common/skeleton_base.md 降级并明示。

页面结构（按大纲逐页）：

1. 封面页：主标题 + 副标题 + 品牌/日期，用该风格最大字号标题。
2. 目录页：章节列表，用该风格导航样式。
3. 内容页：标题 + 正文/要点，用该风格卡片/分栏样式。
4. 数据页：指标卡 + 图表（用该风格图表样式）。
5. 结尾页：总结 + 联系方式/行动号召。

翻页与进度（必做，见 rules/html_guide.md）：

• 左右翻页：键盘 ←/→ + 屏幕左右箭头按钮 + 移动端左右滑动，逐页切换。
• 底部进度条：固定底栏显示「当前页 N / 总页数 M」+ 进度条（宽度 = N/M），随翻页实时更新。
• 圆点跳页：底栏中部一排可点击圆点，当前页拉长胶囊高亮，点击直达对应页。

S6 质量审核与交付

• 五维：风格还原度 / 排版一致性 / 响应式 / 可访问性 / 内容完整性。基准 = 命中的 L2 风格正文。详见 rules/quality_gate.md。
• 翻页/进度专项：左右翻页可用、页码总数正确、进度条与页码同步、圆点跳页与高亮同步。
• 阻断打回：BLOCK-风格还原度（配色/字体/特效与资产明显不符）/ BLOCK-响应式（断点失效）/ BLOCK-翻页进度（翻页失效或页码错误）/ BLOCK-内容（编造事实）；打回必须复审，防"假修复"（只改一处不动其余）。
• 迭代上限：同一阻断项打回 ≥3 次仍未通过 → 降级交付（明示未达标的阻断项与原因），不再无限循环。
• 交付：《交付终稿》+ 五维结论摘要 + 风格来源说明（所用风格资产 + 色板 + 字体）+ 后续入口（改某页/换风格重做/继续优化）。
• 未过 S6 的 HTML 一律不作为终稿交付。

4. 渐进式加载机制（三级 L0/L1/L2，本地资产）

族 / 风格与文件名的映射见 manifest/asset_manifest.json。

4.1 资产使用与防胡编铁律（最高优先级）

1. 生成前必须真读到 L2 正文：以其中的配色 token、字体、形状特效、组件样式作为生成约束。
2. 禁止凭训练记忆编配色：L2 缺失 → 读 assets/common/skeleton_base.md 通用骨架降级并明示局限。
3. 降级必须明示：任何兜底都要在交付说明中写清，不得假称已取得风格资产。
4. S6 审核复用同一份 L2 正文做基准，不重复读取。

4.2 按需读取路由（Read only the relevant guide）

主文档只讲「怎么走」，细节按任务读取对应文件——只读与当前任务相关的那一份：

一次只读当前任务相关的那一份，不一次性全读（省 token）。索引/规则文件只读不改。

5. 产出形式

5.1 交付产物

终稿以单文件 HTML交付：

1. 优先落盘（Agent 模式 / 本地 IDE）：写入 .html 文件并通过 present_files 交付。
2. 纯对话降级：在对话中以 HTML 代码块呈现，用户复制保存为 .html 后浏览器打开。

5.2 HTML 技术规范（详见 rules/html_guide.md）

• 单文件：CSS/JS 全部内联，零外部请求；字体用系统字体栈 + 可选 Google Fonts（需联网时降级系统字体）。
• 设计 token 用 CSS 变量：:root{ --bg; --ink; --ac; --card; --font; }，风格切换只改变量。
• 响应式：1024px / 640px 双断点，桌面多栏、窄屏单列。
• 左右翻页：键盘 ←/→ + 左右箭头按钮 + 移动端左右滑动，逐页切换，循环或到边界停住（默认停住）。
• 底部进度条（必做）：固定底栏「当前页 N / 总页数 M」+ 进度条（宽度按 N/M 百分比），随翻页实时更新，配色随风格取强调色。
• 圆点跳页（必做）：底栏中部一排可点击圆点，当前页拉长成胶囊 + 强调色高亮，点击直达对应页；页数 >12 自动缩小圆点或改分段胶囊。
• 无障碍：语义化标签、焦点可见、对比度达标（正文 ≥4.5:1）。

5.3 用户自定义

用户明确指定字体/配色/页数/版式时，优先满足用户要求，与风格资产冲突时按用户要求执行，并在交付说明注明差异。

6. 修订模式（任务类型 B/C）

• 保留已确认的画像与风格，直接进入修订，不重走选型。
• B 换风格：保留内容与结构，仅重新注入新风格的设计 token 与组件样式。
• C 改某页：只动指定页面，其余页面与风格保持一致。
• 修订后仍须过 S6 审核。

7. 异常与边界

8. 能力边界与适用说明

8.1 能做 / 需素材 / 超范围

8.2 数据与隐私原则

• 资产全部随技能本地携带；生成过程不调用外部接口、不上传内容。
• 最小采集：演示画像只采集选型与生成所必需的信息。
• 可脱敏：真实数据可用「XX 万元」等占位，定稿后回填。

9. 常见问题（FAQ）

Q1：和直接让大模型写 HTML 有什么区别？ 差别在"流程与依据"。大模型凭记忆直接写，大纲、风格、配色版式全看运气；本 Skill 像做 PPT 一样——先出大纲让你确认 → 按大纲定位风格与页数 → 加载该风格的配色 token 与组件样式 → 注入生成 → 五维审核，每一步有据可查。

Q2：49 种风格都适合做演示文稿吗？ 都适合，但侧重不同：浅色族（秩序极简/有机触感等）适合投影打印；深色族（科技霓虹/玻璃光影等）适合屏幕沉浸。选型卡会给判别语。

Q3：能混搭风格吗？ 能。明确要求时允许跨风格借用组件（如赛博朋克卡片 + 极简排版），交付说明会标注来源。

Q4：需要联网吗？ 不需要。资产随技能本地携带，开箱即用；仅当你要求非系统字体（如 Google Fonts）时才需联网，且会降级系统字体兜底。

Q5：交付的是什么形式？ 单文件 .html，双击即可浏览器打开；支持左右翻页（键盘 ←/→、箭头按钮、手机滑动）+ 圆点跳页，底部固定显示「当前页 / 总页数」和翻页进度条，可直接投屏、打印为 PDF。

Q6：中途想换风格或改大纲怎么办？ 换风格走修订模式（类型 B）：保留内容与大纲，仅重新注入新风格 token；改大纲走修订（类型 C）：只动指定页面，不重走选型。

Q7：页数怎么定？ 你说个数（如"10 页左右"）优先按你的来；没说时按大纲内容量合理规划——每页只讲一个主题，宁精勿滥。