制作 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。