html-ppt-obsidian-claude-gradient

HTML PPT · GitHub 暗紫渐变

html-ppt 主技能的精简入口，可直接将用户引导至 obsidian-claude-gradient 全套幻灯片模板。

何时选择此卡片

Examples 图库会将“使用此提示词”关联到上方的 example_prompt。接受该提示词后，如果用户想要与 obsidian-claude-gradient 完全一致的视觉风格（截图和设计思路请参阅上游全套幻灯片目录），就应选择此卡片。

如何制作幻灯片

1. 先阅读主技能。 所有制作规则都在 skills/html-ppt/SKILL.md 中，包括内容与受众检查清单、 令牌规则、布局复用、演讲者模式、键盘运行时，以及 “幻灯片上绝不放置仅供演讲者查看的文本”规则。
2. 从匹配的模板文件夹开始： skills/html-ppt/templates/full-decks/obsidian-claude-gradient/ — 将 index.html 和 style.css 复制到项目中，并保留 .tpl-obsidian-claude-gradient body 类。
3. 将共享运行时与模板一并带上。 上游的 index.html 通过 ../../../assets/... 链接共享 CSS/JS，因为它位于 skills/html-ppt/templates/full-decks/ 下三层目录中。 将 index.html 复制到项目后，这些相对于父目录的 URL 将无法解析，base.css、animations.css 和 runtime.js 会返回 404 — 这意味着幻灯片组无法启动，幻灯片导航也会失效。每个项目可选择以下两种方案之一：
   • 方案 A — 复制并改写（推荐）： 将 skills/html-ppt/assets/fonts.css、skills/html-ppt/assets/base.css、 skills/html-ppt/assets/animations/animations.css 和 skills/html-ppt/assets/runtime.js 复制到项目本地的 assets/（并包含 assets/animations/animations.css），然后将 index.html 中的四个 <link>/<script> 标签从 ../../../assets/... 改写为对应的项目本地路径 （assets/fonts.css、assets/base.css、 assets/animations/animations.css、assets/runtime.js）。
   • 方案 B — 内嵌： 读取同样的四个文件，将每个 <link rel="stylesheet" href="../../../assets/..."> 替换为包含文件内容的 <style>...</style>，并将 <script src="../../../assets/runtime.js"> 替换为包含 runtime.js 的 <script>...</script>。这样会生成一个独立的 index.html。 无论选择哪种方案，都不要将上游的 ../../../assets/... URL 原样放入项目产物中 — 它们只在原目录树中有效。
4. 选择主题。 默认令牌效果不错；如果用户想要不同的风格，可通过 <link id="theme-link"> 引入 skills/html-ppt/assets/themes/*.css 中的 36 种主题之一，并使用 T 循环切换。
5. 替换演示内容，而不要替换类。 .tpl-obsidian-claude-gradient 作用域 CSS 只 识别模板中提供的结构类 — 请保留这些类。
6. 演讲者备注应放在 <aside class="notes"> 或 <div class="notes"> 内 — 切勿将其作为可见文本放在幻灯片上。

致谢

视觉系统、布局、主题和运行时键盘模型均来自上游采用 MIT 许可证的 lewislulu/html-ppt-skill。LICENSE 文件位于 skills/html-ppt/LICENSE；重新分发时请保留该文件。