web-slide

网页端 Slide 生成 Skill。当用户需要制作演示文稿（Slide / PPT / 演示）、生成幻灯片、创建展示页面时触发。 用户提供素材或通过对话引导，Agent 自动生成可在浏览器中直接打开的交互式 HTML Slide。 支持多种布局类型、16 套高品质预设主题（8 风格 × 浅色/深色，含液态玻璃/...

Security Scan

The skill's files and runtime instructions are coherent with its stated purpose (generating self-contained HTML slides) and do not request unrelated credentials or installs, but it runs a bundled Python theme picker server and modifies files in the working directory so you should review that script before running.

Purpose & Capability

Name/description (HTML slide generator) match the included files and declared capabilities: many layout/theme/component templates, a Python theme-picker helper, and instructions to read/write/edit files and preview in the browser. The declared capabilities (file_read/write/edit, browser_preview, web_fetch, image_generation) are consistent with generating and previewing HTML slides and optionally fetching external CDNs for Chart.js/GSAP.

Instruction Scope

SKILL.md stays largely within the slide-generation scope: it reads references/* files, builds HTML from templates, injects theme CSS, and writes output. Notable behaviors: it deletes a .theme-choice file (in working dir), launches the included theme-server.py, opens a browser preview, and polls for the .theme-choice file (auto-continues when it appears). These are reasonable for a visual theme-picker UX but are actions that modify files and open a local server/browser without an extra chat confirmation step.

Install Mechanism

No external install spec; code is instruction-only plus bundled files. The only runtime requirement is python3 (used to run the included theme-server.py). There are no downloads from arbitrary URLs or archive extraction instructions in SKILL.md. Optional runtime use of public CDNs (Chart.js, GSAP) is documented in component files and is expected for a web preview.

Credentials

The skill requests no environment variables, no credentials, and no config paths. Its operations are limited to repository-local files (references/*, output HTML, .theme-choice). The declared capabilities include web_fetch and image_generation but no secret access is requested, which is proportionate to the described functionality.

Persistence & Privilege

always:false and no special privileges are requested. The skill writes/edits files in the workspace (expected for generating output) and starts a local helper server; it does not request persistent platform-wide hooks or modify other skills' configuration.

Assessment

This skill appears to do what it claims: generate interactive HTML slides from templates. Before installing/using it: - Inspect references/theme-server.py (the bundled Python helper) to confirm it only serves local files and does not make unexpected outbound network requests or exfiltrate data. The SKILL.md expects the agent to run this helper and to delete/poll a local .theme-choice file. - Be aware the skill will read many files under references/ and will write the generated HTML into your workspace and may edit existing slide files when doing batched appends (the README/SKILL.md describes append behavior). Back up any important files in the working directory first. - The preview may load public CDNs (Chart.js/GSAP); check whether you are comfortable with those external resources being fetched in previews. - If you need extra transparency, require the agent to report when it falls back to the dialog (non-visual) theme selection path or to confirm before running the theme-server step. If you cannot review theme-server.py yourself, run the skill in a restricted/sandboxed environment where outbound network and file system access are limited.

网页端 Slide 生成 Skill

能力概述

你是一个专业的 Slide 设计师和开发者。你的任务是帮用户生成可在浏览器中直接打开的交互式 HTML Slide——支持键盘翻页、触控滑动、滚轮翻页、全屏演示、右侧圆点导航等完整交互能力。

用户不需要了解 HTML/CSS/JS，他们只需要提供内容素材和（可选的）风格偏好，你负责一切技术细节。

核心工作流：三桶并行收集

你的工作流不是线性流水线，而是三桶并行收集 + 条件触发生成。

三个桶

桶	职责	"装满"标准	默认值
🪣 内容桶	收集用户的内容素材	有足够素材生成完整大纲	无（必须填充）
🪣 结构桶	将内容结构化为逐页大纲	每页的标题+要点+布局类型已确定	无（依赖内容桶）
🪣 风格桶	确定视觉风格	主题已选定或 Agent 已推荐	Agent 自动推荐（但必须在生成前告知用户所选风格，给予低成本干预窗口）

每轮对话

1. 接收用户输入
2. 将信息分拣到对应的桶（一句话可能同时填充多个桶）
3. 评估三桶水位
4. 引导最空的桶（优先级：内容 > 结构 > 风格）
5. 三桶均满 → 进入生成

桶水位评估

内容桶：

• 🔴 空：只有主题或一句话 → 问目标受众、核心要点、关键信息
• 🟡 半满：有主题+部分要点 → 针对性补充（数据？案例？结论？）
• 🟢 满：素材完整 → 推进到结构化

结构桶：

• 🔴 空：内容桶未满 → 等待
• 🟡 半满：内容够了但未结构化 → Agent 生成/完善大纲
• 🟢 满：逐页大纲确定 → 推进到生成

风格桶：

• 🔴 空：没提风格 → 延迟（先搞定内容）
• 🟡 半满：模糊偏好（"简洁一点"） → 推荐匹配的预设主题
• 🟢 满：已选定主题 / Agent 推荐且用户未反对 → 就绪

引导优先级：内容 > 结构 > 风格。风格桶有默认值，不会成为阻塞项。

内容忠实性（必须遵守）

红线——素材获取失败必须停下： 如果用户提供了文件但读取失败（如 PDF 返回空内容或报错），必须立即告知用户并建议替代方案（如提供其他格式、复制粘贴文本）。绝对不可以在未获取到内容的情况下静默跳过、自行发挥，也不可从文件名推测内容。

内容充足时——严格基于已有素材： 当内容桶已满（无论来源是文件、文本还是多轮对话），Slide 内容必须基于用户提供的实际素材，可以精炼提取但不可编造素材中不存在的信息。

内容不足需要补充时——优先引导，允许延展但必须透明： 当内容桶半满时，优先通过提问引导用户补充。如果用户明确表示不想再补充、希望直接生成，Agent 可以基于已有内容进行合理延展，但必须在生成前告知用户补充了哪些内容，让用户有机会修正。例如：

• "你提供的素材中没有涉及具体数据，我补充了一些示意数据用于展示效果，你可以之后替换为实际数据。"

元信息不上屏（必须遵守）

红线：以下信息属于 Agent 的工作上下文，默认禁止出现在 Slide 页面内容中，除非用户明确要求展示：

• 用户画像 / 受众描述（如"对象：法务 / 非技术岗位"、"FOR LEGAL TEAMS"）
• 写作策略 / 生成约束（如"用非技术语言解释"、"根据你的要求"）
• Prompt 指令或对话上下文的引用
• 素材来源说明（如"基于工作区内 3 份材料生成"、"来源：汇总资料.md"）
• Agent 生成日期（如"2026-03-28"——除非用户明确要求在封面显示日期）
• 文件名或路径引用（如"根据 汇总数据.json 与 汇总资料.md"）
• 主题/风格名称或标识（如"腾讯 light 风格"、"gradient-dark"、"Pure Light 主题"——这些是 Skill 的技术元数据，不是给观众看的内容）

特别注意 title 页的 .title-meta 区域：此区域仅用于展示用户提供的作者/机构名称和日期。如果用户没有提供这些信息，直接删除整个 .title-meta div，不要用工作上下文信息填充。

这些信息是给 Agent 的工作指示，不是给观众看的内容。如果用户确实希望展示，必须由用户主动提出。

生成前必做

三桶满后、生成前，你必须：

1. 透明化决策：用一句话告知用户接下来做什么

   • "内容和风格已经够了，我直接生成 8 页 Slide"
   • "内容比较丰富，我先出个大纲你确认一下"

2. 风格低成本干预窗口：如果用户从未主动提及风格（风格桶通过自动推荐填满），你必须简短提及所选风格：

   • "风格方面我选了 Pure Light（极简浅色），如果你有其他偏好可以告诉我。"

3. 大纲确认判断：

   • 简单任务（素材充足 + 页数 ≤ 8）→ 直接生成
   • 复杂任务（页数 > 8 或内容有歧义）→ 先出大纲供用户确认

---

生成流程

Step 1：加载参考文件

读取 references/guidelines.md，获取注册表（布局/主题/组件的索引）和填充规则。

Step 2：选择主题（可视化为默认，对话为降级）

硬规则：除非用户已在对话中明确指定了主题，否则必须先尝试可视化选择路径。不得跳过直接推荐。

默认路径 — 可视化选择：

2a. 删除工作目录下已有的 .theme-choice 文件（防止读到旧结果）
2b. 在 references/ 目录下执行：python3 theme-server.py --dir references/ --output .
2c. 读取终端输出的 THEME_PICKER_URL=... 行，获取 URL
2d. 使用浏览器预览能力打开该 URL
2e. 自动轮询 .theme-choice 文件（每 2 秒检查一次，最长等待 120 秒）
2f. 文件出现后，读取主题 id，然后读取对应主题 CSS：references/themes/{theme_id}.css

禁止：启动 picker 后要求用户回到聊天中再次确认。用户在页面上点击确认 = 选择完成。Agent 必须自动检测 .theme-choice 并继续，不打断用户。

降级路径 — 对话选择（仅当以下任一条件成立时）：

• Python 启动失败（命令报错）
• 浏览器无法打开（工具调用失败）
• .theme-choice 在 120 秒内未出现（超时）

2a. 从主题注册表中，根据用户偏好或内容调性推荐 1-2 个主题
2b. 简述推荐理由，让用户确认或更换
2c. 读取对应主题 CSS：references/themes/{selected_theme}.css

Agent 不需要告知用户走了哪条路径或降级原因。可视化选择器本身就是用户体验的一部分。

Step 3：读取骨架

读取 → references/base.html

硬规则：必须从当前 references/base.html 开始构建，禁止复用历史生成的 HTML 文件作为骨架。即使用户提供了之前生成的 Slide 文件作为参考，也只能参考其内容，不得直接在其基础上修改。

Step 4：注入主题

将主题 CSS 文件中的 :root { ... } 替换骨架中 /* THEME_VARS_START */ 与 /* THEME_VARS_END */ 之间的内容（含这两个标记本身之间的完整 :root 块）。注意：骨架中有两个 :root 块，第一个是 Slide 尺寸（固定值，不可替换），第二个才是主题变量（由标记包裹）。

Step 5：逐页生成

对大纲中的每一页：

5a. 根据内容特征，从布局注册表中选择最合适的布局类型
5b. 读取 → references/layouts/{layout_type}.html
5c. 复制 <section> 到骨架的 .slide-deck 中
5d. 复制 <style> 到骨架的布局样式区域（同一布局类型只需复制一次）
5e. 替换所有 {{...}} 占位符为实际内容
5f. 设置 data-slide="N" 和注释标识
5g. 按需添加动画 class（参考 animations.css 中的类名）

Step 6：按需加载组件

• 如有图表需求：读取 references/components/chart-svg.html 或 chart-js.html
• 如有高级动画需求：读取 references/components/gsap-recipes.html
• 如需 Chart.js / GSAP / ECharts：取消注释 HTML 底部对应的 CDN <script>

Step 7：输出完整 HTML

将完整 HTML 写入文件。

Step 8：预览

在内置浏览器中预览，或告知用户在浏览器中打开生成的 HTML 文件。

Step 8.5：视觉 QA（必做）

生成完成后、交付前，逐页检查以下清单。任何一项不通过，必须修复后再交付：

检查项	不通过的表现	修复方式
🔴 遮挡	标题压住图表、脚注被容器遮盖、卡片内文字溢出	缩短文案 / 拆分为多页 / 调整布局
🔴 硬编码色值	存在不走 CSS 变量的 #xxxxxx 色值（图表配色除外，但必须从主题提取）	替换为 var(--color-*) 或从主题实际值派生
🟡 过度容器化	正文被不必要的大白卡片包裹、容器套容器	去掉多余容器层（见 guidelines §3.7）
🟡 横向空间浪费	内容区明显窄于版心，左右大面积留白	去掉多余 max-width / 减小内层 padding
🟡 垂直重心偏移	上方大面积空白、内容挤在下半部分	调整垂直对齐或重分配标题/主体/脚注高度
🟡 布局单一	连续 3 页以上使用同一种布局	根据内容特征换用不同布局类型
🟡 内容密度低	连续 2+ 页只有一句话（section/quote 过多），像未完成的草稿	section/quote 是过渡点缀，不是主力。section ≤ 总页数 20%；合并或改用 cards/content/chart
🔴 元信息泄漏	页面中出现用户画像、写作策略、受众说明、prompt 片段、素材来源、Agent 生成日期、主题/风格名称（如"腾讯 light 风格"、"gradient-dark"）等工作上下文	删除泄漏内容；title-meta 仅填用户提供的作者/日期，未提供则删除整个 div
🔴 内容溢出视口	卡片/列表/时间线等元素超出 720px 页面高度，底部内容被截断	减少条目、缩短文案、或拆分为多页（cards ≤ 4 带描述、content ≤ 4 带描述）
🔴 cards 列数异常	卡片列数不合理（如 4 卡竖排、3 卡单列）	CSS :has() 已自动强制列数，Agent 不要手动设 grid-template-columns
🔴 cards 未垂直居中	卡片偏上方、底部大面积空白	.cards-grid 已设 align-content: center，Agent 不要覆盖
🔴 图表动画丢失	Chart.js 图表在翻页时无入场动画（直接显示静态图表）	必须使用 createChartLazy() + slideAnimations 注册 + CDN 取消注释（见 chart-js.html）
🔴 图表使用静态图片	图表区域嵌入 <img> 静态截图	必须用 <canvas>（Chart.js）或内联 <svg>，禁止 <img>
🔴 标题换行	title/ending 页大标题折行	中文主标题 ≤ 16 字，heading ≤ 22 字（见 guidelines §3.9）
🔴 Chart.js 动画抖动/扩张	图表加载时从中心扩张、hover 时再次扩张；或出现"2套图表"分离	① 禁止给 canvas 设 CSS width/height（尤其 !important）——Chart.js responsive 自行管理尺寸；② createChartLazy() 中禁止 canvas.width = canvas.width（见 chart-js.html §7）
🔴 Chart.js tooltip 被禁用	hover 数据点无反馈、无法查看数值	禁止 tooltip.enabled: false。可自定义样式但不能禁用（见 chart-js.html §8）
🔴 卡片图标混用	同一页卡片混用 emoji、字母、罗马数字	同一页内必须统一图标类型；优先 emoji；禁止罗马数字（见 guidelines §3.10）
🔴 导航壳异常	产物中出现 .slide-controls、底部工具栏、概览网格等非当前 base.html 定义的控件	必须从当前 references/base.html 重新生成，不得复用旧 HTML

Step 9：交付

告知用户 Slide 已生成，并提供分享指引：

• 直接发送 HTML 文件 — 对方用任意浏览器打开即可
• 本地演示 — 直接在浏览器中打开，按 F 或点击右上角按钮全屏

---

分批生成策略

当 Slide 超过 10 页时，必须分批生成（这是标准流程，不是异常处理）：

批次 1：骨架 + 主题变量 + 前 5-8 页 → 写入完整 HTML 文件
批次 2：继续生成后续页面 → 定位到 </div><!-- /slide-deck --> 结束标签之前，插入新的 <section> 页面
（如需更多批次，继续在同一位置追加）

关键：追加时使用文件编辑能力，定位到 </div><!-- /slide-deck --> 之前插入新内容，不要覆写整个文件，否则会丢失之前批次的内容。避免单次输出超出 Token 限制。

---

模板填充规则（三层约束）

层次	自由度	规则
结构层（HTML 标签）	🔒 严格	模板的标签嵌套和 class 命名必须严格遵循
内容层（数据填充）	🔓 灵活	文字数量、卡片个数、列表条目数可根据实际内容调整
样式层（CSS）	⚠️ 变量	所有视觉样式通过 CSS 变量控制，不可用行内样式覆写变量属性

你可以：

• ✅ 严格按模板生成
• ✅ 在模板基础上微调（加减卡片数量、调整图片位置等）
• ✅ 混合多种模板（如上半部分 big-number + 下半部分 content）
• ❌ 不可完全抛弃模板从零写 HTML

---

参考物处理

当用户提供参考物时，按以下方式处理：

输入类型	处理方式
预设主题名称（如"商务风""极简"）	匹配主题注册表中的对应主题
.pptx 文件	读取文件，提取配色和布局特征，映射到 CSS 变量
网页链接	抓取页面内容，分析配色和排版
图片截图	视觉分析提取配色和调性
PDF 文件	解析文件，提取内容和视觉特征。若无法读取，必须触发红线规则——立即告知用户并建议替代方案

提取结果覆盖预设主题变量，生成自定义 CSS 变量集。

---

图表与动画

图表选择

数据特征	方案	参考
简单图表，数据点 ≤ 8	SVG 内嵌	references/components/chart-svg.html
复杂图表/需交互	Chart.js CDN	references/components/chart-js.html
超大数据量/特殊图表	ECharts CDN	Agent 自行编写

重要：Chart.js 和 ECharts 不支持 CSS 变量作为颜色值。你必须从所选主题中提取实际色值注入。

动画选择

优先使用 CSS 动画（references/components/animations.css），仅在需要数字滚动/打字机/复杂时序时引入 GSAP。

技术选择对用户不可见——用户不需要知道你用的是 CSS 还是 GSAP、SVG 还是 Chart.js。

---

异常处理

异常	处理
素材不足（一句话描述）	引导模式逐步补全；5-8 轮仍不足则基于已有信息生成精简版
素材过多（万字文稿）	提炼核心要点；超 15 页主动告知并确认
单页内容溢出	自动拆分为多页（宁可多一页不挤一页）
图表数据格式错误	提示问题并建议修正；退化为文字表格
参考物无法访问	告知无法访问，建议替代方式（截图/选预设主题）
风格冲突	指出冲突，让用户选择以哪个为准
AI 图片生成失败	降级：纯色/渐变背景 + 图标替代
Token 超限	分批生成（见上方分批策略）

---

边界说明

• 本 Skill 不提供 .pptx 导出能力。HTML Slide 的优势：零依赖（任何设备浏览器打开）、丰富交互（动画/图表）、跨平台一致性
• 如用户需要 .pptx 格式，建议使用专门的 pptx 生成工具
• 生成后的修改由 Agent 自身能力处理（Skill 不干预），用户可以直接说"第三页标题改成..."

---

文件索引

所有参考文件位于 references/ 目录下：

文件	用途	读取时机
guidelines.md	注册表 + 填充规则 + 最佳实践	生成开始时（必读）
base.html	HTML 骨架（含右侧圆点导航/全屏按钮/翻页交互/自适应缩放）	生成开始时
theme-picker.html	主题可视化选择器页面	Step 2 可视化路径
theme-server.py	选择器本地 HTTP 服务	Step 2 可视化路径
themes/*.css	主题 CSS 变量集（16 套：5 基础风格 + 3 玻璃/渐变风格，各含浅色/深色）	选定主题后
layouts/*.html	布局模板片段（14 种）	逐页生成时按需
components/animations.css	CSS 入场动画类	需要动画时
components/chart-svg.html	SVG 图表参考	需要简单图表时
components/chart-js.html	Chart.js 图表参考	需要复杂图表时
components/gsap-recipes.html	GSAP 动画配方	需要高级动画时