技能介绍

技术演示文稿的制作困境

工程师做技术分享时，常面临一个两难：用 PowerPoint 或 Keynote 做演示，代码高亮、架构图、暗色主题这些技术场景的刚需很难满足；而用前端工具搭建幻灯片，又要处理构建配置、依赖管理、导出分享等琐事。对于一次技术分享来说，这样的投入产出比实在太低。

sja-ppt 的思路很直接：生成一个自包含的单文件 HTML。所有样式、幻灯片类型和交互功能都内联在这个文件里，唯一需要的外部依赖是 CDN 加载的 highlight.js（用于代码高亮）和 Google Fonts。这意味着生成的文件可以直接分享、双击打开、在浏览器里全屏演示，不需要任何构建步骤。

核心能力与工作流程

这个技能的工作流程分为四个主要阶段：

收集内容：先向用户询问演示主题、大致章节数、是否有特定的代码片段或图表需要包含、品牌或配色偏好。如果用户已有大纲就直接使用。
选择风格：内置 8 种视觉风格，包括 Dark Tech（极简黑科技）、Academic White（清新学术白）、Cyber Terminal（赛博终端）、Glassmorphism（毛玻璃）等。每种风格都预设了调色板、字体组合和 highlight.js 主题。
内容驱动设计选择（可选）：对于需要精致设计的演示，可以从 116 个提示词库中提取字体配对、配色方案、组件类型和动画技巧。这一步会先根据主题匹配氛围关键词（比如技术架构分享匹配 "dark + tech"），然后过滤出相关的提示词，从中提取字体、颜色和设计技巧，最后与初始风格建议合并优化。
规划布局并生成 HTML：将内容映射到 11 种幻灯片类型（Cover、Section Divider、Code、Architecture Diagram、Chart、Comparison、Timeline 等），然后基于选定的风格模板生成最终的 HTML 文件。

生成的文件内置了完整的演示框架：幻灯片导航、全屏模式、演讲者模式（按 P 键显示演讲者备注）、渐进揭示、鼠标滚轮支持。所有容器宽度使用视口百分比而非固定像素，确保在不同显示尺寸下内容都能适当填充屏幕。

适用场景与限制

这个技能面向的是技术演示文稿——架构深度剖析、框架介绍、技术策略、研究论文总结、CLI 工具演示、设计系统分享等。对于商业产品宣传、营销材料或非技术类的通用演示，它并不擅长。

需要注意的几点：

内容驱动设计选择步骤只在需要生产级精致设计时使用，快速或简单的幻灯片可以直接跳过这一步。
生成的文件依赖外部 CDN（Google Fonts 和 highlight.js）。在离线或网络受限的环境中，需要预先下载这些依赖或调整 CDN 链接为本地引用。
中文文本使用原生 UTF-8 字符，不使用 HTML 实体编码，确保在各种环境下都能正确显示。