【免费下载链接】html-ppt-skill
HTML PPT Studio — AgentSkill with 24 themes, 31 layouts, 20+ animations for building professional HTML presentations
product-launch 是 html-ppt（HTML PPT Studio）15 个 full-deck 模板之一，一份开箱即用的 8 页消费级产品发布演示：深色英雄页负责"秀肌肉"时刻，浅色页承载功能细节与定价，整体以暖橙→蜜桃渐变为强调色，风格定位是"Apple-event-on-a-budget"——自信、有质感、不杂乱。本文以 templates/full-decks/product-launch/README.md 描述的模板结构为骨架，结合仓库中的模板源码 index.html、style.css 与配套脚本，逐页拆解这套模板的叙事编排、CSS 令牌体系与落地换肤方法，读完后可直接用它搭建自己的产品发布会、v2 官宣、内部全员大会发布或媒体素材包（press kit）演示文稿。
一、模板定位：什么时候该用它
原始文档给出的适用场景与气质定位，是选择模板的第一依据：
- Use when（适用场景）：产品发布（launching a product）、v2 版本官宣（announcing a v2）、内部全员大会揭幕（internal all-hands reveals）、媒体素材包演示（press kit decks）；
- Feel（气质）：Apple-event-on-a-budget——自信（confident）、有触感（tactile）、不杂乱（uncluttered）。
这一判断与 references/full-decks.md 中的模板目录表一致：product-launch 被归类为 "Scenario decks (generic, reusable)"——它不是从某一份真实 PPT 提取的，而是面向最常见演示任务的通用脚手架，"visually distinctive and content-rich out of the box"（开箱即有完整内容）。模板目录中还给出了与它并列的选项：融资路演用 pitch-deck、技术分享用 tech-sharing、周报用 weekly-report、3:4 小红书图文用 xhs-post。
模板目录内每个 full-deck 都由三件套组成（见 references/full-decks.md）：
| 文件 | 职责 |
|---|---|
| index.html | 完整多页 deck，本例为 8 页 |
| style.css | 以 .tpl-product-launch 类前缀做作用域隔离，多模板可共存不冲突 |
| README.md | 设计意图、灵感来源与使用指引 |
所有 full-deck 都从 skill 根目录拉取共享的 assets/fonts.css、assets/base.css 与 assets/runtime.js，键盘导航、进度条、演讲者模式等能力全部由 runtime 提供，模板本身不需要写任何 JS。
二、8 页叙事结构：从 Hero 到 CTA 的完整动线
README 一句话概括了整副 deck 的页面序列：hero cover（英雄封面）→ "introducing" moment（揭幕时刻）→ three feature slides（三个功能页）→ how-it-works（工作原理）→ pricing tiers（定价档）→ closing testimonial + pre-order CTA（收尾证言 + 预购 CTA）。对照 index.html 源码，每一页的暗/亮节奏如下：
| # | data-title | 页面 | 背景 | 核心结构类 |
|---|---|---|---|---|
| 1 | Cover | 英雄封面：渐变"产品图"+ 渐变大标题 | 深色 .slide.dark | .hero-shot、.kicker、.h1 |
| 2 | Introducing | 揭幕：140px 超大产品名 | 浅色居中 .center.tc | .h1、.lede |
| 3 | Sound | 功能一：开放式空间音频三卡片 | 浅色 | .grid.g3 + .feature-card |
| 4 | Fit | 功能二：4.9g 佩戴三卡片 | 深色 | .grid.g3 + .card（玻璃拟态） |
| 5 | Intelligence | 功能三：AI 实时翻译/会议纪要双卡片 | 浅色 | .grid.g2 + .feature-card |
| 6 | How it works | 三步上手流程 | 浅色 | .stack + .step |
| 7 | Pricing | 三档定价（$179 / $279 / $399） | 浅色 | .grid.g3 + .price-card（含 .pro） |
| 8 | Ship | 媒体证言 + 预购 CTA | 深色 | .testimonial、.cta-btn |
可以看到深色页分布在 1、4、8 三处，形成"亮—暗—亮"的视觉呼吸感：开场与收尾两个最强记忆点用深色，功能细节页用浅色保证信息密度。每一页都带 data-title 属性，runtime 的 O 键总览网格（overview grid）会读取它作为缩略图标题，这也是模板可维护性上的一个细节。
2.1 封面页：hero-shot 是纯 CSS 伪元素"产品图"
封面页（index.html L15-L22）没有任何真实图片，右侧的"耳机产品图"完全由 CSS 画出来。style.css L22-L24 的实现：
.tpl-product-launch .hero-shot{position:absolute;right:-60px;top:50%;transform:translateY(-50%);
width:640px;height:640px;border-radius:50%;background:var(--grad);filter:blur(2px);opacity:.85}
.tpl-product-launch .hero-shot::after{content:"";position:absolute;inset:80px;border-radius:40px;
background:linear-gradient(160deg,rgba(255,255,255,.3),transparent 60%),#1a1a28;
box-shadow:inset 0 2px 0 rgba(255,255,255,.2)}
.tpl-product-launch .hero-shot::before{content:"Halo v2";position:absolute;inset:80px;
display:flex;align-items:center;justify-content:center;color:#fff;font-size:44px;font-weight:900;...}
结构上：一个 640px 的渐变圆盘（外圈）→ ::after 画内嵌圆角矩形的"设备机身"（带顶部高光 inset shadow）→ ::before 用 content 直接把产品名 "Halo v2" 印在机身上。换品牌时只需改 --grad 与 ::before 的 content 文案。
标题侧的亮点是行内渐变色：
<h1 class="h1 anim-fade-up" data-anim="fade-up">Meet Halo v2.<br>Your ears,<br>
<span style="background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent">rewritten.</span></h1>
data-anim="fade-up" 会在该页激活时触发入场动画——assets/runtime.js 的 go() 在每次切换时移除再重加 anim-<name> 类并强制重排，保证每次进入都重放入场效果（动画定义在 assets/animations/animations.css）。页脚的 halo.audio + .slide-number 由 assets/base.css 的 ::before/::after 从 data-current/data-total 属性渲染页码，runtime 每翻一页都会同步这两个属性。
2.2 深色功能页：玻璃拟态卡片
第 4 页 Fit 页是全 deck 第二处深色页。深色页下的卡片样式在 style.css L18：
.tpl-product-launch .slide.dark .card{background:rgba(255,255,255,.06);
border-color:rgba(255,255,255,.12);box-shadow:none;backdrop-filter:blur(20px)}
6% 白色透明底 + 20px 背景模糊，是典型的 glassmorphism 处理，与浅色页的 .feature-card（实底白卡 + 渐变 icon 方块，见 style.css L26-L27）形成对比。深色页的标题、导语、kicker 也各有覆写（L16-L19），保证对比度。
2.3 定价页：三档卡片 + 高亮 Pro 档
定价页（index.html L77-L100）是"锚定 + 主推"的标准商业排版：Lite $179 / v2 Pro $279 / Studio $399。主推档用 .price-card.pro 从 style.css L31 获得三重视觉强调：
.tpl-product-launch .price-card.pro{background:#0a0a12;color:#fff;border-color:#0a0a12;
transform:scale(1.04);box-shadow:0 30px 80px rgba(255,90,54,.25)}
反色（白底卡中唯一一张黑卡）+ 放大 4% + 带橙红色调的大阴影。卡片标题（16px 大写字距拉开的产品名）、64px 金额、带分隔线的特性列表（.price-card li{border-top:1px solid var(--border)}）都是纯 CSS 令牌控制，改档位数、改价格只需动 HTML。
2.4 收尾页：证言 + 预购 CTA
第 8 页（index.html L103-L117）把媒体证言与预购 CTA 合并在一张深色页里完成收尾：左侧 44ch 宽、Playfair Display 衬线体 44px 的引语（style.css L40），右侧 96px 黑体价格 + 胶囊形渐变按钮：
.tpl-product-launch .cta-btn{display:inline-block;padding:20px 40px;border-radius:999px;
background:var(--grad);color:#fff;font-weight:700;font-size:20px;
box-shadow:0 20px 50px rgba(255,90,54,.4)}
按钮 40% 不透明度橙红投影与 Pro 档卡片同源，整页形成"看完证言 → 顺眼就看到价格 → 一键 Pre-order"的转化动线。
三、设计令牌：.tpl-product-launch 作用域与换肤入口
style.css 全文只有 40 行，全部声明都挂在 .tpl-product-launch 前缀下——这是 full-deck 体系的作者规范（references/full-decks.md "Authoring notes"：每个模板把 CSS 限定在 .tpl-<name> 下，两个模板可以同页加载不冲突；换内容时要保留结构性类名，它们才是模板的身份所在）。令牌全集：
| 令牌 | 值 | 用途 |
|---|---|---|
--bg / --bg-soft / --surface / --surface-2 | #ffffff / #f5f5f7 等 | 浅色页底色与卡片底 |
--ink / --text-1..3 | #0a0a12 → #8a8a96 | 三级文字灰阶 |
--accent / --accent-2 / --accent-3 | #ff5a36 / #ff8c5a / #ffb36b | 橙→蜜桃三级强调色 |
--accent-ink | #0b1024（注释标注 6.1:1 对比度） | 强调色填充上的文字色 |
--grad | linear-gradient(120deg,#ff5a36 0%,#ff8c5a 60%,#ffb36b 100%) | 全局品牌渐变（hero 圆盘、icon 块、步骤序号、CTA） |
--radius / --radius-lg | 22px / 32px | 卡片圆角 |
--shadow | 0 20px 60px rgba(10,10,18,.1) | 浅色页卡片投影 |
font-family | 'Inter','Noto Sans SC',sans-serif | 模板字体栈（衬线引语另用 Playfair Display） |
其中 --accent-ink 的细节值得注意：assets/base.css 的设计系统规定"画在 --accent 填充上的文字必须用 var(--accent-ink)，因为各主题的 accent 从纯白到纯黑都有，任何写死的墨色都无法通吃"——product-launch 特意选了近黑的 #0b1024 而不是直觉上的白色，源码注释里直接标了 6.1:1 的对比度。这是该模板对 base.css 无障碍规范的一个落地样本。
换肤（re-skin）实操：README 声称 "easy to re-skin for any brand"，落点就是 L2-L13 这个令牌块。典型三步：
- 改
--accent*三件套与--grad为品牌色（如冷科技蓝：#2563eb → #38bdf8），hero 圆盘、icon、CTA、步骤序号全部跟随； - 改
font-family与（可选）.testimonial的衬线字体； - 改文案层：hero-shot
::before的content、封面<p class="brand">、页脚域名、定价与 CTA 文案。
其余结构类（.feature-card、.step、.price-card、.cta-btn）保持不动即可。
四、模板如何站在 base.css 共享层之上
模板 HTML 里大量使用的类——.slide、.dark、.center、.tc、.kicker、.h1/.h2、.lede、.dim、.grid、.g2/.g3、.stack、.row、.mt-m/.mt-l、.deck-footer、.slide-number——都不在模板 CSS 里，而是来自 assets/base.css 的"设计画布 + 排版 + 布局原语"层：
- 固定 1920×1080 设计画布（assets/base.css L70-L73）：
.deck以固定像素尺寸绘制，再由 assets/runtime.js 的initCanvasFit()计算--deck-scale等比缩放适配视口。浏览器、演讲者预览、总览缩略图与无头渲染看到的是同一张图，这就是模板里可以放心写 96px 大标题的原因； - 一页一
.slide：runtime 让.slide.is-active可见、其余隐藏，翻页即切换is-active（并给前一页加is-prev做位移动画）； - chrome 槽位：
.deck-header/.deck-footer/进度条/页码由 base.css + runtime 提供，作者只需声明，不要重复实现。
这个"共享层出骨架、模板层出个性"的分层，也是 SKILL.md 作者规则里反复强调的："Use tokens, not literal colors"、"Respect chrome slots"。
五、落地：用脚本脚手架出你的发布 deck
full-deck 模板不要手工复制——模板里的 ../../../assets/ 前缀是相对它自己位置写的，手抄到别的目录深度会整体断链（SKILL.md 的 "Never hand-edit the ../ depth" 规则）。正确做法是从仓库根目录运行 scripts/new-deck.sh：
./scripts/new-deck.sh my-launch -t product-launch
# 产物：examples/my-launch/index.html（默认父目录为 examples/）
open examples/my-launch/index.html
脚本做了两件事（见 scripts/new-deck.sh 的 rewrite_assets）：
- 重写资产前缀：用
relpath()计算新位置到 skill 根目录的相对路径，再把 HTML/CSS 中所有../…assets/前缀替换为正确深度，-t接受 full-deck 名、single-page 布局名或任意路径； - 引用自检：枚举产物中全部本地
href/src/url()引用（包括最容易漏的style.css自身引用），逐个按浏览器 file:// 规则做词法解析，任何一条解析不到真实文件就报错退出——这是模板"移动即断链"历史缺陷的防线。
脚手架完成后，把 8 页里的演示文案（Halo v2 耳机）替换成你的产品内容即可；页面增删时保持"一个逻辑页一个 <section class="slide">"约定。
键盘运行能力
deck 引入 assets/runtime.js 后自动获得（SKILL.md 键盘速查表）：
← → Space PgUp PgDn Home End 翻页（触屏左右滑动同样翻页）
F 全屏 O 总览网格（读取各页 data-title）
S 演讲者窗口（CURRENT/NEXT 像素级预览 + 逐字稿 + 计时器四张磁贴卡片）
N 底部便签抽屉 #/N URL 深链到第 N 页
若页面声明 data-themes 属性，T 键还能循环切换 assets/themes/ 下的 36 个主题；product-launch 模板自带的是自绘作用域配色，未引用主题文件，两者机制不同但可叠加——脚手架后的 deck 上加一个 <link id="theme-link"> 与 data-themes 属性即可让 T 键生效。
渲染与导出
-
PNG 批量导出：scripts/render.sh 封装 headless Chrome，按
#/N深链逐页截图：./scripts/render.sh examples/my-launch/index.html all # 自动探测 8 张 slide注意脚本目前硬编码 macOS 的 Chrome 路径（
/Applications/Google Chrome.app/...），在其他环境需自备 Chrome 后调整该变量（scripts/render.sh L14）。 -
打印 / PDF：assets/base.css 的
@media print块把.deck展开为每 slide 一页（page-break-after:always），并隐藏页眉页脚与进度条，浏览器直接打印即可获得逐页 PDF；所有声明带!important是为了压过.tpl-*作用域规则的高优先级，注释里记录了这是修过的真实分页缺陷。
六、在仓库中继续深挖
- 模板三件套：index.html / style.css / README.md
- 全部 15 个 full-deck 的目录与适用场景：references/full-decks.md
- 交互画廊（每个模板一页 iframe 实时预览）：templates/full-decks-index.html
- 36 个主题、36 个单页布局与 27+20 动画的完整目录：references/themes.md、references/layouts.md、references/animations.md
- 完整作者工作流（含中英文混排、导出细节）：references/authoring-guide.md
小结：product-launch 模板的价值不在某一页的视觉，而在一条被验证过的发布叙事动线（英雄封面 → 揭幕 → 功能三章 → 上手三步 → 定价锚定 → 证言+CTA）与一套只有 40 行、全部令牌化的作用域 CSS。结构类保留、令牌替换、文案重写，三步即可把它换成任何品牌的发布会 deck；脚手架脚本负责路径正确性，runtime 负责交互能力，作者只需要专注于内容本身。
【免费下载链接】html-ppt-skill
HTML PPT Studio — AgentSkill with 24 themes, 31 layouts, 20+ animations for building professional HTML presentations
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
