html-ppt-skill pitch-deck 模板：YC/VC 风格融资演示的 10 页结构、设计令牌与换肤实践
html-ppt-skill pitch-deck 模板：YC/VC 风格融资演示的 10 页结构、设计令牌与换肤实践
本文以 templates/full-decks/pitch-deck/README.md 描述的核心内容为主线——一套面向融资路演、Office Hours 和"公司近况汇报"场景的经典 10 页 YC/VC seed pitch 模板。读完本篇，你可以完整理解这套模板的 10 页叙事骨架与每一页的结构化占位、style.css 中的设计令牌体系（含品牌色一键换肤机制）、基于固定设计画布的渲染原理，以及从直接预览、脚本脚手架生成到批量导出 PNG 的完整工作流。
一、pitch-deck 是什么：一页 README 背后的模板定位
pitch-deck 是 html-ppt-skill 中 15 个 full-deck 模板之一，在 references/full-decks.md 的模板索引中被归类为"Scenario decks（通用场景模板）"，索引中对它的定位是：
pitch-deck· 10 slides · White + blue→purple gradient, YC/VC vibe, big numbers, traction chart · Fundraising, startup pitch, investor meeting
其 README.md 给出了三要素定位：
- 结构：Classic 10-slide YC/VC seed pitch——cover（封面）、problem（问题）、solution（方案）、product（产品）、market（市场）、business model（商业模式）、traction（数据进展）、team（团队）、ask（融资诉求）、thanks（致谢）。
- 视觉：Clean white background, bold blue→purple gradient accent, oversized headlines and big numbers——干净白底、蓝→紫渐变强调色、超大标题与大号数字，README 原话是"the look investors expect when they skim 40 decks a day"（投资人一天快速浏览 40 份 deck 时期望看到的样子）。
- 使用时机与气质：
**Use when:**pitching a fundraise、office hours、或"state of the company" update；操作原则是 Swap copy, keep structure（替换文案，保留结构）。**Feel:**confident, data-forward, founder-friendly。 - 换肤入口：
**Brand color:**override--gradinstyle.cssto re-skin（覆盖style.css里的--grad变量即可完成品牌换肤），这是后文第五节的实现依据。
与仓库中其他 full-deck（如小红书 3:4 竖版、课程模块等）不同，pitch-deck 是"整个 deck 拥有统一且强观点视觉"的典范：references/full-decks.md 明确指出 full-deck 系列用于"want a coherent, opinionated look for an entire deck"的场景，且每个模板视觉上都可被一眼识别。
二、10 页叙事骨架：index.html 逐页解析
模板入口是 templates/full-decks/pitch-deck/index.html，全文 148 行，共 10 个 <section class="slide">。每页都带 data-title 属性（供 O 键总览网格与演讲者模式显示页名）。以虚构公司"Lumen"（面向 solo founders 的一体化经营工具）为示例文案，逐页结构如下：
| # | 页面（data-title） | 源码位置 | 结构与占位 |
|---|---|---|---|
| 1 | Cover | index.html#L14-L23 | 柔和渐变底 cover-bg + 右上大渐变光斑 cover-blob；品牌点 brand-dot + 品牌名；kicker 轮次标签（"Seed round · 2026"）；86px 的 h1（带 data-anim="fade-up" 入场动画）；lede 一句话定位；页脚 deck-footer 含创始人署名与自动页码 slide-number |
| 2 | Problem | index.html#L25-L35 | 220px 水印页码 section-num"01" + 大写标签 num-tag"PROBLEM"；62px 标题下用 grid g3 三张 card 陈述三个痛点（工具碎片化 / 每月 $480 浪费 / 每周 14 小时流失） |
| 3 | Solution | index.html#L37-L50 | 一句话链路式 lede（开票→收款→预留税款→合同归档→看板更新），下方 5 个 pill pill-accent 胶囊列举能力域（Billing / CRM / Contracts / Taxes / Banking） |
| 4 | Product | index.html#L52-L63 | grid g2 四张 card card-hover（悬停上浮）按"jobs to be done"组织：Get paid / Stay legal / Sell smarter / See the business |
| 5 | Market | index.html#L65-L76 | grid g3 三个 metric 大数字（73M / $186B / 9.4%），.metric .n 用渐变裁切文字渲染 72px 数字，配 16px 说明文字；底部 lede 界定细分人群 |
| 6 | Business Model | index.html#L78-L89 | grid g3 三档定价卡（$29 / $79 / 0.4% rake，中间档加 card-accent 顶部强调线），底部一行 dim 注释 LTV/CAC payback |
| 7 | Traction | index.html#L91-L105 | 纯 CSS 柱状图 traction-bar：6 根 .bar 用内联 style="height:18%"～100% 表达 6 个月 MRR（$6k→$54k），柱顶 em 标金额、柱底 span 标月份；底部 dim 一行客户数/NPS/净留存 |
| 8 | Team | index.html#L107-L117 | grid g3 三张 team-card，各含 96px 圆形渐变 avatar（首字母缩写）、姓名与背景一行 |
| 9 | The Ask | index.html#L119-L131 | 全渐变底 ask-box（白字 + 大投影）：融资额标题、用途配比 lede（40% 工程 / 35% 增长 / 15% 合规 / 10% 缓冲），下方 44px 三组关键数字（$4.5M / 18 mo / $3M） |
| 10 | Thanks | index.html#L133-L144 | 居中 center tc 布局，180px 渐变裁切文字 mega（"Thanks."）+ mega-sub 联系方式 + 两个收尾 pill |
这套结构的可复用要点正是 README 强调的"Swap copy, keep structure"：references/full-decks.md 的 Authoring notes 进一步说明——"Swap demo content, but keep the structural classes — they are what gives each template its identity"。也就是说，替换的是 Lumen 的文案与数字，保留的是 section-num、num-tag、metric、traction-bar、ask-box 这类决定模板气质的结构性类名。
另外值得注意的运行期细节：
- 封面页码
<span class="slide-number" data-current="1" data-total="10">无需手写——assets/runtime.js 每次翻页会自动更新data-current，并由 assets/base.css 的.slide-number::before/::after渲染成"1 / 10"。 - 封面标题上的
data-anim="fade-up"在每次导航到该页时都会被 runtime 重新触发（assets/runtime.js 中移除并强制重排后重新添加anim-fade-up类）。 - 全模板零图表库依赖：traction 柱状图是手写 CSS（
flex+ 百分比高度），符合 references/full-decks.md "Charts are hand-rolled SVG (no CDN dependency)" 的通用约定。
三、视觉系统：style.css 设计令牌全解
templates/full-decks/pitch-deck/style.css 仅 41 行，全部规则都挂在 .tpl-pitch-deck 作用域下（<body class="tpl-pitch-deck">），这一前缀机制让多个 full-deck 的样式可以共存于同一页面而互不冲突。核心令牌与排版参数：
/* templates/full-decks/pitch-deck/style.css 摘要 */
.tpl-pitch-deck{
--bg:#ffffff; /* 干净白底 */
--bg-soft:#f6f7fb; --surface:#ffffff; --surface-2:#f2f4fa;
--border:rgba(20,25,60,.08); --border-strong:rgba(20,25,60,.18);
--text-1:#0d1130; --text-2:#4a5070; --text-3:#8a90ad; /* 三级文字色 */
--accent:#3b5bff; /* 品牌蓝 */
--accent-2:#7a46ff; /* 品牌紫 */
--accent-3:#d94cff; /* 品红收尾 */
--accent-ink:#ffffff; /* 压在 --accent 上的文字色，注释标明 5.1:1 对比度 */
--grad:linear-gradient(135deg,#3b5bff 0%,#7a46ff 55%,#d94cff 100%); /* 换肤关键变量 */
--grad-soft:linear-gradient(135deg,#eef1ff,#f4edff 55%,#fbedff); /* 封面柔光底 */
--radius:20px; --radius-lg:28px;
--shadow:0 14px 40px rgba(20,25,60,.08),0 2px 8px rgba(20,25,60,.04);
font-family:'Inter','Noto Sans SC',sans-serif;
}
从源码结构看，这套"投资人审美"由几个夸张的字号与渐变复用共同构成：
- 超大标题：
.h186px / 900 字重 / -0.035em 字距；.h262px / 800 字重（style.css#L16-L17）；结束页.mega更是 180px / 900 字重并用background-clip:text裁切成渐变文字。 - 大号数字：
.metric .n72px 渐变数字（style.css#L27-L29），定价卡里再内联font-size:56px压缩到卡片尺度。 - 背景水印页码：
.section-num220px / 900 字重，颜色取--surface-2（极浅灰紫）贴在右下角，.slide > *{z-index:1}保证内容压在它之上（style.css#L39-L40）。 - traction 柱状图：
.traction-bar固定 240px 高，.bar用flex:1均分宽度、background:var(--grad)上色，min-height:20px保证最小值可见（style.css#L35-L38）。 - The Ask 色块：
.ask-box整块铺var(--grad)并配0 30px 70px rgba(59,91,255,.35)蓝色投影，白字（style.css#L32-L34）。 - 团队头像：
.avatar96px 圆形渐变底 + 32px 白色首字母（style.css#L31）。
这些变量名（--bg、--accent、--grad 等）与 assets/base.css 的 :root 默认令牌一一对应——base.css 先定义一套全局默认，模板在 .tpl-pitch-deck 作用域内按自身气质覆写，页面其余未覆写处（如卡片圆角基类 .card、页眉页脚 .deck-footer、pill 胶囊）继续复用 base.css 的布局基元（assets/base.css 的 .grid/.g2/.g3、.row、.card、.pill 等）。
四、渲染与运行原理：固定设计画布 + 零依赖运行时
pitch-deck 与所有 full-deck 一样，只引入 skill 根的四个共享资源（见 index.html#L6-L9 与结尾的 runtime 引入 index.html#L147）：
<link rel="stylesheet" href="../../../assets/fonts.css">
<link rel="stylesheet" href="../../../assets/base.css">
<link rel="stylesheet" href="../../../assets/animations/animations.css">
<link rel="stylesheet" href="style.css">
...
<script src="../../../assets/runtime.js"></script>
关键机制（均可在源码中核对）：
- 1920×1080 固定画布：assets/base.css 中
.deck固定为var(--deck-w,1920px) × var(--deck-h,1080px)，再由 assets/runtime.js 的initCanvasFit按min(视口宽/1920, 视口高/1080)计算--deck-scale整体缩放——只缩放、不重排。这保证浏览器窗口、演讲者预览、总览缩略图与无头 PNG 渲染"是同一张图"。pitch-deck 未设置data-w/data-h，即按默认 16:9 画布工作（竖版场景如xhs-post才会覆写为 810×1080）。 - 翻页与状态：assets/runtime.js 的键盘映射为
← → / 空格 / PgUp PgDn / Home End导航、F全屏、S演讲者模式（新窗口，BroadcastChannel 同步）、N备注抽屉、O总览网格、T主题循环、A当前页动画循环；URL 哈希#/N支持深链跳页（runtime.js#L1153-L1159），手机还支持单指横滑翻页（runtime.js#L1097-L1151）。 - 演讲者模式：pitch-deck 当前未写
<aside class="notes">逐字稿；若路演时需要看稿，可参考 references/presenter-mode.md 给各页补充 notes（runtime 从.notes / aside.notes / .speaker-notes选择器读取，见 assets/runtime.js#L26-L28）。 - 打印/导出 PDF：assets/base.css 的
@media print块把.deck压平为普通文档流、每页.slide独占一页（page-break-after:always），隐藏页眉页脚与进度条——投给投资人的 PDF 版可直接走浏览器打印。
五、品牌换肤：覆盖 --grad 的连锁效应
README 给出的唯一一条换肤指引——"override --grad in style.css"——之所以够用，是因为模板内几乎所有强调面都引用了 var(--grad)。从 style.css 源码可以列出它的消费点：
| 消费点 | 选择器 | 效果 |
|---|---|---|
| 封面右上光斑 | .cover-blob（style.css#L21） |
560px 圆形渐变 + blur |
| 品牌点 | .brand-dot（style.css#L22） |
14px 渐变圆点 |
| 渐变文字 | base.css 的 .gradient-text（assets/base.css#L107）经 .metric .n 覆写（style.css#L28） |
封面标题关键词、73M/$186B 等数字 |
| traction 柱 | .traction-bar .bar（style.css#L36） |
6 根柱子颜色 |
| 团队头像 | .avatar（style.css#L31） |
圆形底 |
| The Ask 色块 | .ask-box（style.css#L32） |
整块背景 |
因此换肤只需一行（此处仅示意对模板副本的修改方式，不要改动本仓库内文件）：
/* 例：把品牌色换成公司主色 绿→青 */
.tpl-pitch-deck{
--accent:#0aa36f; --accent-2:#0e8f9a; --accent-3:#37b3a5;
--grad:linear-gradient(135deg,#0aa36f 0%,#0e8f9a 55%,#37b3a5 100%);
--grad-soft:linear-gradient(135deg,#eefaf4,#eafaf8 55%,#e6f7f3);
--accent-ink:#ffffff; /* 注意核对压在 accent 上的文字对比度，模板注释默认按 5.1:1 标注 */
}
建议同步覆盖 --accent（影响 kicker、num-tag、pill-accent、进度条等单色强调处）与 --grad-soft（封面柔光底），否则会残留默认蓝紫的中间态。这也与 assets/base.css 注释中的对比度约定一致：--accent-ink 必须选能与自身 accent 达成 WCAG AA 的白色或近黑。
六、获取与运行工作流
6.1 直接预览模板
模板是自包含的，用浏览器直接打开 templates/full-decks/pitch-deck/index.html 即可演示；O 键查看 10 页总览，#/7 哈希可直达 Traction 页。
6.2 用脚手架脚本生成自己的 deck
scripts/new-deck.sh 专为"把模板搬到任意深度且资源路径不断链"而设计（见其 头部注释）：
# 在 skill 根目录下：以 pitch-deck 为模板，生成 my-company/seed-pitch/
./scripts/new-deck.sh seed-pitch examples -t pitch-deck
脚本的关键行为（均见源码）：
- 模板解析顺序（resolve_template）：先按原样路径、再
deck、再templates/full-decks/<name>目录、再templates/single-page/<name>.html；full-deck 会整目录复制（含style.css与README.md）。 - 资源重写（rewrite_assets）：把产物中所有指向
assets/的../前缀重算为"产物目录 → skill 根"的相对路径，因此 deck 放在仓库内任意层级甚至仓库外都不会 404。 - 自检（scripts/new-deck.sh#L194-L205）：枚举
index.html里全部本地href/src/url()引用（含常被漏掉的style.css），逐一解析，任何断链即报错退出。 - 成功输出会提示下一步：打开
index.html，按T循环主题、← →翻页、O总览，并可render.sh ... all渲染 PNG。
注意：生成物中请替换 Lumen 的示例文案（公司名、数字、人名、邮箱如 maya@lumen.app 均为占位演示内容），但保留第二节列出的结构性类名。
6.3 批量导出 PNG
scripts/render.sh 用无头 Chrome 逐页截图，利用 pitch-deck 的 #/N 深链能力逐页定位：
./scripts/render.sh templates/full-decks/pitch-deck/index.html all
# 生成 10 张 PNG（自动识别 <section class="slide"> 数量）
用法与参数（render.sh#L2-L8）：render.sh <html> <a href="https://link.gitcode.com/i/9c01884af931732f38b0e97608b43fa5" target="_blank">N|all] [out-dir]，all 会自动 grep 统计 slide 数；--window-size=1920,1080 与固定画布设计一致。适用前提：脚本当前硬编码了 macOS 的 Chrome 路径（[render.sh#L14），在其他系统上需自行调整 CHROME 变量或等价改写。
七、与其他模板的关系与选型建议
- 想换整体气质而非微调：pitch-deck 自带完整配色体系，一般不需要再叠加
assets/themes/的主题；若确要试T键主题循环，需在<html>或<body>上声明data-themes="a,b,c"（assets/runtime.js#L1026-L1027）。 - 演讲/路演需要逐字稿：优先参考 references/presenter-mode.md 为 pitch-deck 各页补
<aside class="notes">，或改用同样面向路演场景的presenter-mode-reveal模板（见 references/full-decks.md 的索引说明）。 - 只要单页：
templates/single-page/下另有cover.html、kpi-grid.html、chart-bar.html等 36 个单页布局可混用，但 references/full-decks.md 的建议是——需要整场统一观感时选 full-deck，而非 layout 混搭。
八、小结
pitch-deck 的价值在于把"投资人快速扫读"的阅读习惯固化成了可复用的 HTML 结构：10 页固定叙事、白底 + 蓝紫渐变 + 超大数字的强识别视觉、纯 CSS 的 traction 图表，以及"换文案不换结构、改 --grad 即换肤"的低成本定制模型。结合 skill 根的 1920×1080 固定画布与零依赖运行时（键盘导航、演讲者模式、总览、深链、打印分页），这套模板从本地预览、new-deck.sh 脚手架到 render.sh 批量出图形成完整闭环，是 html-ppt-skill 中把"融资演示"这一高频场景产品化最完整的一个 full-deck 模板。