用途 该技能是 html-ppt 主技能中面向产品发布的整套幻灯片(full-deck)模板入口,让用户直接获得 product-launch 主题的视觉风格,用于产品发布、宣布新产品等演示场景(官方描述原句在此处被截断,完整触发条件暂未提供)。
主要能力
- 深色主视觉页 + 浅色内容页的对照版式。
- 暖橙到桃色(warm orange→peach)强调色。
- 内置功能卡片(feature cards)、定价档位(pricing tiers)与 CTA 版面。
- 支持主讲人模式、键盘运行时(keyboard runtime)与 36 套主题。
使用方式
- 先阅读主技能:所有编写规则位于 skills/html-ppt/SKILL.md,包含内容/受众清单、令牌规则、版面复用、主讲人模式、键盘运行时,以及“不要把仅给主讲人看的文字放到幻灯片上”的规则。
- 从对应模板文件夹开始:skills/html-ppt/templates/full-decks/product-launch/,把 index.html 与 style.css 复制到项目中,并保留 .tpl-product-launch 这一 body class。
- 处理共享运行时依赖。上游 index.html 以 ../../../assets/... 相对路径引用共享 CSS/JS,该路径仅在源码树内有效;复制到项目后会导致 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/(其中 animations.css 位于 assets/animations/),然后把 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 原样带入项目产物,它们只在源码树内有效。
- 选择主题:默认令牌即可;如需不同观感,可通过 <link id="theme-link"> 换入 skills/html-ppt/assets/themes/*.css 中的任一主题(共 36 套),并可用 T 键循环切换。
- 替换演示内容,但不要改动类名:.tpl-product-launch 作用域内的 CSS 只识别模板自带的结构性类,需保留。
- 演讲者备注放在 <aside class="notes"> 或 <div class="notes"> 内,不要作为幻灯片可见文字。
适用场景 用于产品发布、新产品宣布等需要统一视觉识别(深色主视觉、暖色调强调、功能卡片、定价与 CTA)的整套演示。
限制与说明 视觉系统、版面、主题与运行时键盘模型来自上游 MIT 许可的 lewislulu/html-ppt-skill;LICENSE 文件位于 skills/html-ppt/LICENSE,再分发时请保留。该技能的详细参数、收费与价格、平台支持等信息暂未提供。