制作 HTML 演示文稿

在一个可独立打开的 HTML 文件中制作完整 Deck。幻灯片使用固定 16:9 画布，并在不同视口中等比缩放和留黑边，不依赖手工调整每页尺寸。

1. 确认简报

读取全部来源材料，确认受众、演讲时长或页数、语气、品牌、宽高比，以及是否需要讲者备注。上下文充分时直接开始；没有品牌且视觉方向会影响结果时，先确定方向。

讲者备注默认关闭，只有用户明确要求才添加。

2. 规划叙事与版式系统

先写出每页的一句话目标和整体叙事顺序，再确定 4–6 种可复用版式，例如封面、章节页、内容页、对比页、重点引语和结尾行动页。

限制背景和强调色数量，统一标题位置、正文区域、页码和品牌标识。每页只承载一个主信息，删除没有叙事作用的填充页。

3. 构建 Deck 外壳

创建固定尺寸舞台，默认 1920×1080。每页为直接子 <section>，提供 1 开始的 data-screen-label。外壳至少支持：

• 根据视口等比缩放并居中留边。
• 键盘方向键、空格及可用的点击或触摸导航。
• 当前页和总页数。
• 打印或导出 PDF 时一页一张幻灯片。

是否保存当前页到 localStorage 取决于用户需求，不要让持久化增加不必要复杂度。

4. 逐页制作

• 1920×1080 画布正文通常不小于 24px，标题通常为 60–96px；根据语言和内容密度调整。
• 所有页面复用设计 token，不在单页发明新色值和间距。
• 图像使用品牌素材、合法素材或明确标注尺寸的诚实占位符。
• 图表只保留支持当前结论的数据。
• 每完成 1–2 张先预览方向，再扩展到整套 Deck。

5. 验证与交付

逐页检查多种视口下的缩放、溢出、导航、页码、文字可读性、对比度、打印分页和资源加载。无法真实验证的行为要明确说明。

交付最终 HTML，简要列出页数、叙事结构、仍需替换的素材和需要用户确认的决定。

示例

输入：“根据这份 PRD 做 5 页工程全员会 Deck，深色主题，不要讲者备注。”

**输出：**生成单个 deck.html，包含封面、问题、架构、发布计划和结尾行动五页，使用 1920×1080 舞台、键盘导航、页码和打印样式，并验证常见视口无溢出。

来源与许可

本 Skill 基于 Trystan Sarrade 的 claude-design-system-prompt 进行中文化与 Claude Skill 规范适配。上游与本改编均按 MIT License 发布，详见 LICENSE.txt。