Adapted from zarazhangrui/frontend-slides by zarazhangrui (MIT).
本技能为功能性改编：保留原仓库「零依赖单文件 HTML 演示 + 视觉化风格探索 + 固定舞台」的核心方法论，重写为与平台无关的中文工作流，并附纯标准库校验脚本 scripts/slide_lint.py；剥离了 Claude Code 插件壳、.claude 命名空间与 PPT 转换所需的 python-pptx 依赖（PPT 转换作为可选阶段保留思路，但不绑定第三方库）。

网页演示文稿制作（Web Slides Craft）

生成零依赖、动画丰富、可在浏览器直接打开的 HTML 演示文稿——从零新建，或把已有内容整理成网页幻灯片。目标用户是非设计背景的人，因此核心交付不是「让他描述审美」，而是「生成给他看，让他挑」。

何时使用

• 用户要做一个演示 / 路演 / 教学 / 内部汇报的幻灯片。
• 用户想把一篇 PPT/PPTX 或一组素材变成可在网页直接播放的幻灯片。
• 用户要增强、修改一份已有的 HTML 演示文稿。

核心原则

1. 零依赖：单 HTML 文件，内联 CSS/JS。不要 npm、不要构建工具、不要框架。一个文件双击即开。
2. Show, Don't Tell（展示而非询问）：不要逼用户用文字描述「想要什么风格」。先生成 2–3 个真实的首屏预览让他挑。人是通过「看见」发现自己喜好的。
3. 独特而非通用（反 AI 味）：拒绝千篇一律的「AI 味」输出。每一份都要像为这个场景专门设计的。
4. 渐进披露：先读轻量的风格索引，等用户选定模板，再读该模板的完整 design.md；不要一次性倾倒全部资料。
5. 固定 16:9 舞台（不可协商）：每张幻灯片都在 1920×1080 的固定画布上绘制，整张舞台整体缩放。任何屏幕（含手机）都保持 16:9，绝不按设备重排内容。

设计美学（反 AI 味清单）

你天然会收敛到「安全但平庸」的输出。前端设计上这就是用户口中的「AI 味」。主动规避：

• 字体：避免 Inter、Roboto、Arial、系统默认字体作展示字体。选有性格、有美感的字体（Fontshare / Google Fonts）。注意：你仍会反复收敛到 Space Grotesk 之类——要有意识跳出。
• 配色：用 CSS 变量统一主题；「主色 + 锐利强调色」优于平均分布的怯懦调色板。从 IDE 主题、文化质感里找灵感。明确避开「白底紫色渐变」这套陈词滥调。
• 动效：用动画制造高潮与微交互。优先纯 CSS 方案；React 场景才用 Motion 库。抓重点：一次编排精良的载入（staggered 错峰揭示）比散落的微交互更打动人。
• 背景：制造氛围与纵深，不要默认纯色块。叠加 CSS 渐变、几何图案、与主题呼应的语境效果。
• 整体：在明/暗主题、字体、质感之间变换。每份都要有「为这个场景而写」的视觉论点（distinctive typography + committed palette + recognizable layout system + 一个强氛围/图形装置）。

固定 16:9 舞台规则（每张幻灯片、每份演示都适用）

• 整个文档有一个填满浏览器窗口的 .deck-viewport 外层。
• 每张幻灯片都画在固定的 1920×1080 的 .deck-stage 里。
• 舞台整体用 transform: translate(...) scale(...) 均匀缩放适配视口；可以留黑边（letterbox/pillarbox），但绝不重排内容。
• 不要用响应式断点为手机重排幻灯片内容。
• 幻灯片内部一律用 1920×1080 设计尺寸的固定度量。
• 幻灯片切换用 .active / .visible 控制 visibility、opacity、pointer-events（见 viewport-base.css），不要用 display:none/display:block 切换——否则后续 .slide-content { display:flex } 之类的布局类会把所有幻灯片同时显示出来。
• 非幻灯片 UI 才可用 clamp()；或仅在完整舞台 impractical 的小预览里用。
• 必须包含 prefers-reduced-motion 支持。
• 不要直接给 CSS 函数加负号（-clamp()/-min()/-max() 会被浏览器静默忽略）。用 calc(-1 * clamp(...))。
• 生成时把 viewport-base.css 的全部内容内联进每份演示。 该文件是固定舞台的强制基底。

内容密度模式

先问用户这是「阅读型」还是「演讲型」，再据此设计：

基线限制始终生效：不滚动、不溢出、面板不重叠、文字不小于舒适阅读尺寸。内容超出所选密度就拆成更多页，而不是缩到拥挤。

工作流

阶段 0：判定模式

• A 新建：从零开始 → 阶段 1。
• B PPT 转换：把 .pptx 转成网页（可选阶段，见阶段 4）。
• C 增强：改进一份已有 HTML 演示 → 读它、理解它、增强，遵守阶段 5 的修改规则。

阶段 1：内容发现（新建）

一次性把所有问题问齐，让用户一次填完（用结构化提问 UI 最好，否则用一条带编号选项的消息）：

1. 目的：路演 / 教学 / 会议演讲 / 内部汇报？
2. 长度：约多少页？短 5–10 / 中 10–20 / 长 20+？
3. 内容：内容齐了 / 只有粗略笔记 / 只有主题？
4. 密度：演讲主导 / 阅读优先？

图片评估（若用户提供图片文件夹）：扫描列出图片 → 用图像理解能力逐张判定 USABLE / NOT USABLE（含理由）→ 与文字共同构思大纲（不是「先规划再塞图」，而是从一开始就图文一起设计）→ 用结构化提问确认大纲与选图。

记住用户选的密度，它影响页数、字号、每页文字量、布局密度。

阶段 2：风格发现（Show, Don't Tell）

默认直接生成 3 个单屏 HTML 预览，各自展示排版、配色、动效、整体气质。不要问用户「要不要选项 / 预设选择器」——默认体验永远是视觉对比。

预览组合规则（默认 3 个）：
- 1 个来自 references/style-presets.md 的安全预设；
- 至少 1 个来自风格库的「大胆模板」；
- 1 个 wild-card（第二个大胆模板，或自创设计——哪个能制造最强、最有用的对比就用哪个）。

Wild-card 自创规则：遵守上面「设计美学（反 AI 味）」；给用户场景一个明确的视觉论点；保证能扩展成节、内容、引言、对比、结尾页；用固定 1920×1080 舞台并过同样的预览真实性校验；绝不在幻灯片上渲染 custom/wildcard/AI-generated/设计流程标签。

预览真实性（不可协商）：
- 每个预览必须像用户演示里真实的「第一屏」，不是诊断卡片。
- 绝不在幻灯片上渲染内部工作流文本：preview、generated from、preview.md、template、preset、style option、Option A/B/C、文件名、路径、源文档标签都不行。
- 模板/风格名只出现在「给用户看的消息」里，不在幻灯片上。
- 如果幻灯片需要 chrome，只用真实 deck chrome：标题、节标题、日期、作者、公司、页码，或用户材料里的真实内容短语。
- 打开预览前，检查可见文字，凡出现内部元数据一律改掉。

把预览存到 .web-slides-craft/previews/（style-a.html 等），每个自包含、紧凑，展示一个带动效的标题页。自动为用户打开每个预览。

用户选定后（哪个风格 / 要不要混搭），再进入构建。

阶段 3：构建

• 把 viewport-base.css 全文内联进 <style>。
• 用 :root CSS 变量定义主题（颜色、字体、字号、间距、缓动）——改这几行就能换整套皮肤。
• 字体用 Fontshare 或 Google Fonts 的 <link>，绝不用系统字体。
• 动画经 .visible 类触发：给需要揭示的元素加 .reveal，在该幻灯片 .active/.visible 时过渡到可见；用 :nth-child 做错峰（staggered）揭示。
• 舞台缩放用一个极简控制器：监听窗口尺寸 → factor = min(innerWidth/1920, innerHeight/1080) → translate(居中偏移) scale(factor)。
• 导航：键盘（←/→、空格）、触摸滑动、可选底部 .deck-controls。
• 遵守密度模式与每页要点上限；超了就拆页。
• 参考 references/animation-patterns.md（动效→情绪对照、入场/背景/交互效果、排障表）与 references/html-template.md（基础骨架）。

阶段 4：PPT 转换（可选）

把 .pptx 转成网页、保留全部图片与内容。原仓库用 python-pptx 抽取，但本改编版不绑定第三方库——如需转换，可用本机已有的 python-pptx 环境，或让用户提供「每页文字 + 图片」的结构化清单，按阶段 3 重建为网页幻灯片。核心纪律不变：固定舞台、反 AI 味、视觉化确认。

阶段 5：增强（Mode C 修改规则）

增强已有演示时，固定舞台适配是最大风险：

1. 加内容前：数现有元素，对照密度上限。
2. 加图片：放进 1920×1080 画布内；若本页已接近满载，拆成两页。
3. 加文字：每页最多 4–6 个要点；超了拆成续页。
4. 任何修改后验证：舞台仍 16:9、文字不溢出卡片、面板不重叠、在 1280×720 与一个手机视口截图都正常。
5. 主动重组：若修改会导致溢出，自动拆页并知会用户，别等他来问。

动画模式速查

入场基类：.reveal（淡入+上移）、.reveal-scale（缩放）、.reveal-left（左滑入）、.reveal-blur（模糊入）。背景：gradient-bg 渐变网格、noise-bg 内联 SVG 颗粒、grid-bg 网格。详见 references/animation-patterns.md。

风格预设速查

安全预设（详见 references/style-presets.md，均为抽象几何、无插画）：
- 暗色：Bold Signal（自信大胆、橙色卡）、Electric Studio（白蓝分屏、高对比）、Creative Voltage（电蓝+霓虹黄）、Dark Botanical（优雅植物、暖金）
- 亮色：Notebook Tabs、Split Pastel（桃/薰衣草分屏）、Vintage Editorial（奶油+几何、诙谐编辑）
- 特色：Neon Cyber（深蓝+青/品红霓虹）、Terminal Green（开发者终端绿）、Swiss Modern（纯白黑红、包豪斯网格）、Paper & Ink（暖奶油+深红、首字下沉+引文）

字体配对速查：Bold Signal=Archivo Black+Space Grotesk；Electric Studio=Manrope；Creative Voltage=Syne+Space Mono；Dark Botanical=Cormorant+IBM Plex Sans；Neon Cyber=Clash Display+Satoshi（Fontshare）；Swiss Modern=Archivo+Nunito；Paper & Ink=Cormorant Garamond+Source Serif 4。

禁用（通用 AI 模式）：展示字体用 Inter/Roboto/Arial/系统字体；颜色用 #6366f1、白底紫渐变；布局全盘居中、通用 hero、千篇一律的卡片网格；写实插画、无谓的玻璃拟态、无目的的投影。

校验：固定舞台规则

交付前用 scripts/slide_lint.py 校验生成的 HTML 是否守住固定舞台铁律：

python scripts/slide_lint.py your-deck.html        # 校验单个文件，退出码 0=硬规则全过
python scripts/slide_lint.py --selftest            # 跑内置夹具自测
python scripts/slide_lint.py --help                # 查看参数

硬规则（不过则失败）：① 含 .deck-viewport/.deck-stage/.slide 结构；② 画布固定 1920×1080；③ 整体 scale() 均匀缩放；④ 切换用 visibility/opacity 而非 .slide{display:none}；⑤ 含 prefers-reduced-motion。软警告：出现为手机重排幻灯片的 max-width 断点。

交付与输出契约

• 产出单文件 .html，内联全部 CSS/JS，双击即开。
• 必须内联 viewport-base.css 全文，守住固定 16:9 舞台。
• 交付前过 scripts/slide_lint.py；硬规则不过不交付。
• 不滚动、不溢出、面板不重叠；密度超标就拆页。
• 反 AI 味：独特排版+笃定配色+可识别布局+一个强氛围装置。