令牌策划网页PPT · 版式库

这是引擎的「版式原语库」——不是全部，而是可自由拼装的基础构件。生成 PPT 时，AI 会按内容自动匹配最合适的版式与原语，并突破固定清单自由组合（嵌套 / 分栏 / 留白 / 密度变化），所以实际能生成的版面远多于这里列出的 32 种，且都遵循统一蓝金设计语言、保证好看。每种给出「预览 + 可复制 HTML」，点「复制」抓代码，点「▸ 代码」展开。

01 封面cover
复制 HTML 结构
<section class="slide cover">
  <img class="logo-bar" src="assets/logo-trans.png">
  <h1>主标题前缀<span>高亮词</span></h1>
  <p class="cover-lead">一句话背景说明</p>
  <div class="cover-nums">
    <div><b>100</b><span>示例指标一</span></div>
  </div>
</section>
02 导航/目录toc
复制 HTML 结构
<section class="slide toc">
  <div class="s-head"><div class="s-kicker">CONTENTS</div><h2 class="s-title">目录</h2></div>
  <div class="s-body"><div class="toc-grid">
    <div class="toc-item" data-go="2"><span class="toc-n">01</span><div><div class="toc-t">结论先行</div><div class="toc-d">说明</div></div></div>
  </div></div>
</section>
03 结论区concl
复制 HTML 结构
<div class="concl-grid">
  <div class="concl-main"><div class="cm-label">核心判断</div><div class="cm-text">...</div></div>
  <div class="concl-side">
    <div class="cs-item"><span class="cs-n">1</span><div><b>发现一</b>...</div></div>
  </div>
</div>
04 数据表格dt
复制 HTML 结构
<table class="dt">
  <thead><tr><th class="tl">项目</th><th>来访</th><th>占比</th><th>成交</th></tr></thead>
  <tbody><tr><td class="tl"><b>示例一</b></td><td class="num">60</td>
    <td><div class="minibar"><i style="width:24%"></i><em>12.6%</em></div></td>
    <td class="num strong">50</td></tr>
  </tbody>
</table>
05 渠道卡片ch-grid
复制 HTML 结构
<div class="ch-grid">
  <div class="ch-card bad"><div class="ch-name">示例一</div>
    <div class="ch-pct">46.7% <em>占大面积来访</em></div>
    <div class="ch-tag bad">被动到访</div></div>
  <div class="ch-card ok">...</div>
</div>
06 四象限quad
复制 HTML 结构
<div class="quad">
  <div class="q q-blue"><div class="q-h">类型一</div><ul><li><b>示例一</b> ...</li></ul><div class="q-f">结论</div></div>
  <div class="q q-amber">...</div>
  <div class="q q-red">...</div>
  <div class="q q-green">...</div>
</div>
07 核心问题卡core-grid
复制 HTML 结构
<div class="core-grid">
  <div class="core-card core-card-big">
    <div class="core-h bad"><b>示例一</b><span>标签</span></div>
    <ul class="core-l"><li>要点</li></ul>
    <div class="core-f">建议</div></div>
</div>
08 达标矩阵mx
复制 HTML 结构
<div class="mx-wrap"><table class="mx">
  <thead><tr><th class="un"></th><th class="mh mh-A">A1</th>...</tr></thead>
  <tbody><tr><td class="un">示例一</td><td class="c ok">●</td><td class="c warn">◐</td><td class="c bad">○</td></tr></tbody>
</table></div>
<!-- ●完善 ◐不完善 ○缺失 -->
09 提升计划plan
复制 HTML 结构
<div class="plan-wrap">
  <div class="plan-block w2"><div class="pb-h"><b>2周</b><span>价值传递</span></div>
    <div class="pb-l"><div class="pi-n">专项说辞</div><div class="pi-d">...</div></div></div>
  <div class="plan-block rt">...</div>
</div>
10 时间轴tl-axis
复制 HTML 结构
<div class="tl-axis"><div class="tl-line"></div>
  <div class="tl-item"><div class="tl-dot"></div><div class="tl-when">第1周</div>
    <div class="tl-card"><b>标题</b><span>说明</span></div></div>
  <!-- 复制 tl-item 增加节点 -->
</div>
11 大数字墙+引文statwall + quote
复制 HTML 结构
<div class="statwall">
  <div class="sw"><b>100<i>套</i></b><span>指标</span></div>
  <div class="sw"><b>17.1<i>%</i></b><span>实证</span></div>
</div>
<div class="quote">问题不在市场，而在<b>基本功</b>。</div>
12 左右对比cmp
复制 HTML 结构
<div class="cmp">
  <div class="cmp-col bad"><div class="cmp-h">方案A 风险</div>
    <ul class="cmp-l"><li>点一</li><li>点二</li></ul></div>
  <div class="cmp-col good"><div class="cmp-h">方案B 优势</div>
    <ul class="cmp-l"><li>点一</li></ul></div>
</div>
13 图文混排img-text-row
复制 HTML 结构
<div class="img-text-row">
  <div class="itr-img"><div class="itr-placeholder"><strong>📷 半屏图片</strong></div></div>
  <div><div class="ins-box"><div class="ins-t">说明</div>解读</div></div>
</div>
<!-- 全宽：<div class="itr-full">...</div> -->
14 三栏特性three-col
复制 HTML 结构
<div class="three-col">
  <div class="tc-card"><b>特性一</b><span>描述</span></div>
  <div class="tc-card"><b>特性二</b><span>描述</span></div>
  <div class="tc-card"><b>特性三</b><span>描述</span></div>
</div>
15 结尾页ending
复制 HTML 结构
<section class="slide ending">
  <h1>三大核心原则</h1>
  <div class="principles">
    <div class="prin"><div class="prin-t">不降价</div><div class="prin-desc">...</div></div>
  </div>
</section>
16 流程图flow
复制 HTML 结构
<div class="flow">
  <div class="flow-row"><div class="flow-step"><b>获客</b><span>渠道接入</span></div><div class="flow-arrow">→</div><div class="flow-step"><b>转化</b><span>...</span></div></div>
  <div class="flow-row"><div class="flow-step active"><b>签约</b>...</div>...</div>
</div>
17 照片墙photo-wall
复制 HTML 结构
<div class="photo-wall">
  <div class="photo-item"><div class="photo-label">示范区入口</div></div>
  <div class="photo-item"><img src="..."></div>
  <!-- 首图自动占两行；其余等分填充 -->
</div>
18 KPI 仪表盘kpi-row
复制 HTML 结构
<div class="kpi-row">
  <div class="kpi-card"><div class="kpi-val">1.2<i>亿</i></div><div class="kpi-label">月度认购</div>
    <div class="kpi-trend up">▲ 12.5%</div><div class="kpi-spark"><span style="height:40%"></span>...</div></div>
  <div class="kpi-card green">...</div><div class="kpi-card red">...</div>
</div>
19 组织架构 / 团队org-chart
复制 HTML 结构
<div class="org-chart">
  <div class="org-node ceo"><b>项目总</b><span>统筹决策</span></div>
  <div class="org-line"></div>
  <div class="org-level"><div class="org-node"><b>营销</b>...</div>...</div>
</div>
20 Q&A 答疑页qa-list
复制 HTML 结构
<div class="qa-list">
  <div class="qa-item"><div class="qa-q">Q</div><div class="qa-body"><b>交付时间是？</b><p>答：...</p></div></div>
</div>
21 空白页（自由排版）blank-page
复制 HTML 结构
<div class="blank-page">
  <div class="ins-box">...任意组件...</div>
  <div class="three-col">...</div>
</div>
22 数据图表（5 种）chart-box
复制 HTML 结构
<div class="chart-box" data-type="bar" data-labels='["1月","2月","3月"]' data-values='[120,180,150]' data-units='套'></div>
<!-- data-type 取值：bar / line / pie / donut / funnel -->
23 金句 / 大字pull-quote
复制 HTML 结构
<div class="pull-quote">问题不在市场，而在<b>基本功</b>。
  <span class="pq-cite">—— 项目总 · 月度经营会</span>
</div>
24 全幅章节过渡fullbleed
复制 HTML 结构
<section class="slide"><div class="fullbleed">
  <div class="fb-img"></div>
  <div class="fb-overlay"><h3>第二章 · 破局路径</h3><p>...</p></div>
</div></section>
25 非对称栅格asym-grid
复制 HTML 结构
<div class="asym-grid">
  <div class="a1">主内容</div>
  <div class="a2">要点A</div><div class="a3">要点B</div>
</div>
26 杂志感卡片mag-card
复制 HTML 结构
<div class="three-col">
  <div class="mag-card"><div class="mag-num">01</div><div class="mag-tag">价值</div>
    <div class="mag-t">真地铁口</div><div class="mag-d">...</div></div>
</div>
27 通用提示框 / 注释ins-box
复制 HTML 结构
<div class="ins-box"><div class="ins-t">读数一</div>结论性文字。</div>
<div class="ins-box amber"><div class="ins-t">风险提示</div>需关注的异常。</div>
28 全幅图片itr-full
复制 HTML 结构
<div class="s-body"><div class="itr-full"><img src="你的图.jpg" style="width:100%;height:100%;object-fit:cover"></div></div>
29 Bento 拼贴bento
复制 HTML 结构
<div class="bento">
  <div class="bc big s4 r2"><div class="bc-num">98%</div><div class="bc-t">到访转化率</div><div class="bc-d">核心指标放大占主区块</div></div>
  <div class="bc"><div class="bc-t">周来访</div><div class="bc-d">环比 +12%</div></div>
  <div class="bc s3"><div class="bc-t">渠道结构</div><div class="bc-d">自访 45% / 渠道 55%</div></div>
</div>
30 图文交错zig
复制 HTML 结构
<div class="zig">
  <div class="zrow"><div class="zimg">实景图</div><div class="ztext"><div class="zt-t">真地铁口约 300 米</div><div class="zt-d">出门即达</div></div></div>
  <div class="zrow flip"><div class="zimg">会所</div><div class="ztext"><div class="zt-t">会所自持运营</div><div class="zt-d">健身瑜伽免费</div></div></div>
</div>
31 左右对垒vs
复制 HTML 结构
<div class="vs">
  <div class="vs-side win"><div class="vs-h">令牌·云启</div><div class="vs-li">地铁约 300 米</div>...</div>
  <div class="vs-mid"><div class="vs-badge">VS</div></div>
  <div class="vs-side"><div class="vs-h">中海·时光之境</div><div class="vs-li">地铁较远</div>...</div>
</div>
32 数据带stat-band
复制 HTML 结构
<div class="stat-band">
  <div class="sb"><div class="sb-num">36</div><div class="sb-lab">本月认购(套)</div></div>
  <div class="sb"><div class="sb-num">98%</div><div class="sb-lab">到访转化</div></div>
  <div class="sb"><div class="sb-num">300m</div><div class="sb-lab">地铁距离</div></div>
</div>
33 纵向时间轴tl-vertical
复制 HTML 结构
<div class="tl-vertical">
  <div class="tl-v-item"><div class="tl-v-when">Q1</div><div class="tl-v-t">启动</div><div class="tl-v-d">说明</div></div>
</div>
34 SWOT 矩阵swot
复制 HTML 结构
<div class="swot">
  <div class="sw s"><div class="sw-h">优势 S</div><div class="sw-d">…</div></div>
  <div class="sw w">…</div><div class="sw o">…</div><div class="sw t">…</div>
</div>
35 指标清单metric-list
复制 HTML 结构
<div class="metric-list">
  <div class="metric-row"><div class="m-k">到访量</div><div class="m-v">1280</div><span class="m-u">组</span></div>
</div>
36 共享边框网格collapsed-grid
复制 HTML 结构
<div class="collapsed-grid">
  <div class="cg"><div class="cg-t">要点</div><div class="cg-d">说明</div></div>
</div>
37 错落卡片堆叠stack-cards
复制 HTML 结构
<div class="stack-cards">
  <div class="stack-card" style="--si:0"><div class="sc-t">第一层</div><div class="sc-d">…</div></div>
</div>
38 点阵底纹dotbg
复制 HTML 结构
<div class="dotbg"> …任意内容… </div>
39 大序号水印big-num
复制 HTML 结构
<div class="s-body"><div class="big-num">03</div> …内容… </div>
40 表格多方案（可切换）tb · classic/cards/heat/ledger
复制 HTML 结构
<div class="tb" data-v="classic" data-schemes="classic,cards,heat,ledger">
  <div class="tb-cap">标题</div>
  <div class="tb-grid">
    <div class="tb-h"><span>列1</span>…</div>
    <div class="tb-r"><span class="tb-c" data-c="列1">值</span>…</div>
  </div>
</div>
<!-- 点「⇄ 换版式」在 classic/cards/heat/ledger 间循环，结构不变 -->
41 逻辑图示多方案（可切换）lg · hub/pyramid/cycle/tree/bridge/flowv
复制 HTML 结构
<div class="lg-switch" data-schemes="hub,pyramid,cycle,tree,bridge,flowv">
  <div class="lg-sch on lg-hub">…中心辐射…</div>
  <div class="lg-sch lg-pyramid">…层级…</div>
  <div class="lg-sch lg-cycle">…闭环(设 --i/--n)…</div>
  <div class="lg-sch lg-tree">…树状…</div>
  <div class="lg-sch lg-bridge">…因果桥…</div>
  <div class="lg-sch lg-flowv">…竖向流程…</div>
</div>
<!-- 点「⇄ 换版式」在 6 种逻辑结构间循环 -->
42 文案方向 · 横版·标题·营销data-dir="land title mkt"
复制 HTML 结构
<section class="slide" data-dir="land title mkt">
  <div class="s-head"><div class="s-kicker">令牌·云启</div><h2 class="s-title">真地铁口·四代宅实景开放</h2></div>
  <div class="s-body"><div class="ins-box amber">…</div><div class="ins-box">…</div><div class="dir-cta">立即预约品鉴 →</div></div>
</section>
43 文案方向 · 横版·正文·说明data-dir="land body exp"
复制 HTML 结构
<section class="slide" data-dir="land body exp">
  <div class="s-head">…</div><div class="s-body"><div class="ins-box">…</div></div>
</section>
44 文案方向 · 竖版·标题·营销data-dir="port title mkt"
复制 HTML 结构
<section class="slide" data-dir="port title mkt">
  <!-- 竖版：.stage 加 port 类，海报式构图 -->
  <div class="s-head">…</div><div class="s-body">…</div>
</section>
45 文案方向 · 竖版·正文·说明data-dir="port body exp"
复制 HTML 结构
<section class="slide" data-dir="port body exp">
  <div class="s-head">…</div><div class="s-body">…</div>
</section>
46 递进 · 横向编号步骤seq · steps
复制 HTML 结构
<div class="seq seq-steps">
  <div class="step"><span class="num">1</span><b>明需求</b><span>家庭结构+通勤半径，圈定户型区间</span></div>
  <span class="arrow">&rarr;</span>
  <div class="step"><span class="num">2</span><b>看地段</b><span>锁定双地铁与优质学区辐射圈</span></div>
  <span class="arrow">&rarr;</span>
  <div class="step"><span class="num">3</span><b>比产品</b><span>四代宅实景 vs 竞品户型得房</span></div>
  <span class="arrow">&rarr;</span>
  <div class="step"><span class="num">4</span><b>算总账</b><span>单价/物业/税费综合持有成本</span></div>
  <span class="arrow">&rarr;</span>
  <div class="step"><span class="num">5</span><b>定签约</b><span>认筹权益+节点返佣锁定</span></div>
</div>
47 递进 · 阶梯上升seq · stair
复制 HTML 结构
<div class="seq seq-stair">
  <div class="rung" style="--i:0"><span class="num">1</span><b>引流</b><span>双渠道获客，建立首次触达</span></div>
  <div class="rung" style="--i:1"><span class="num">2</span><b>培育</b><span>内容+社群沉淀意向客户</span></div>
  <div class="rung" style="--i:2"><span class="num">3</span><b>转化</b><span>案场体验促动逼定签约</span></div>
  <div class="rung" style="--i:3"><span class="num">4</span><b>裂变</b><span>老带新放大复访与口碑</span></div>
</div>
48 递进 · 时间轴seq · time
复制 HTML 结构
<div class="seq seq-time">
  <div class="tl"><div class="dot"><span class="num">1</span></div><div class="card"><b>Q1 立势</b><span>城市展厅开放，建立区域认知</span></div></div>
  <div class="tl"><div class="dot"><span class="num">2</span></div><div class="card"><b>Q2 引爆</b><span>实景样板间+四代宅发布</span></div></div>
  <div class="tl"><div class="dot"><span class="num">3</span></div><div class="card"><b>Q3 持销</b><span>老带新+节点活动稳去化</span></div></div>
  <div class="tl"><div class="dot"><span class="num">4</span></div><div class="card"><b>Q4 收官</b><span>楼王加推，冲刺年度目标</span></div></div>
</div>
49 递进 · 流程区块seq · path
复制 HTML 结构
<div class="seq seq-path">
  <div class="node"><span class="num">1</span><div><b>线索接入</b><span>自访+渠道双源归集</span></div></div>
  <div class="conn">&darr;</div>
  <div class="node"><span class="num">2</span><div><b>分级派单</b><span>按意向度智能分配顾问</span></div></div>
  <div class="conn">&darr;</div>
  <div class="node"><span class="num">3</span><div><b>案场转化</b><span>标准化说辞+逼定</span></div></div>
  <div class="conn">&darr;</div>
  <div class="node"><span class="num">4</span><div><b>复盘固化</b><span>周度回顾形成 SOP</span></div></div>
</div>
50 逻辑 · 层级缩进lg · ind
复制 HTML 结构
<div class="lg lg-ind">
  <div class="lvl lvl-1"><b>一级 · 城市战略</b><span>聚焦核心板块，承接外溢改善需求</span>
    <div class="sub">
      <div class="lvl lvl-2"><b>二级 · 区位价值</b><span>双地铁+学区，通勤与教育双优</span>
        <div class="sub">
          <div class="lvl lvl-3"><b>三级 · 微观体验</b><span>实景园林+会所，眼见为实</span></div>
        </div>
      </div>
    </div>
  </div>
</div>
51 逻辑 · 并列lg · parallel
复制 HTML 结构
<div class="lg lg-parallel">
  <div class="col"><b>产品力</b><span>四代宅得房率高，实景开放可验</span></div>
  <div class="col"><b>价格力</b><span>单价优于竞品，持有成本可控</span></div>
  <div class="col"><b>服务力</b><span>会所自持+金牌物业长效运营</span></div>
</div>
52 递进 · 多方案可切换seq-switch · steps/stair/time/path
复制 HTML 结构
<div class="seq-switch" data-schemes="steps,stair,time,path">
  <div class="seq-sch on seq-steps">
    <div class="step"><span class="num">1</span><b>引流</b><span>双渠道获客</span></div><span class="arrow">&rarr;</span>
    <div class="step"><span class="num">2</span><b>培育</b><span>社群沉淀意向</span></div><span class="arrow">&rarr;</span>
    <div class="step"><span class="num">3</span><b>转化</b><span>案场逼定</span></div><span class="arrow">&rarr;</span>
    <div class="step"><span class="num">4</span><b>裂变</b><span>老带新放大</span></div>
  </div>
  <div class="seq-sch seq-stair">
    <div class="rung" style="--i:0"><span class="num">1</span><b>引流</b><span>双渠道获客</span></div>
    <div class="rung" style="--i:1"><span class="num">2</span><b>培育</b><span>社群沉淀意向</span></div>
    <div class="rung" style="--i:2"><span class="num">3</span><b>转化</b><span>案场逼定</span></div>
    <div class="rung" style="--i:3"><span class="num">4</span><b>裂变</b><span>老带新放大</span></div>
  </div>
  <div class="seq-sch seq-time">
    <div class="tl"><div class="dot"><span class="num">1</span></div><div class="card"><b>引流</b><span>双渠道获客</span></div></div>
    <div class="tl"><div class="dot"><span class="num">2</span></div><div class="card"><b>培育</b><span>社群沉淀意向</span></div></div>
    <div class="tl"><div class="dot"><span class="num">3</span></div><div class="card"><b>转化</b><span>案场逼定</span></div></div>
    <div class="tl"><div class="dot"><span class="num">4</span></div><div class="card"><b>裂变</b><span>老带新放大</span></div></div>
  </div>
  <div class="seq-sch seq-path">
    <div class="node"><span class="num">1</span><div><b>引流</b><span>双渠道获客</span></div></div><div class="conn">&darr;</div>
    <div class="node"><span class="num">2</span><div><b>培育</b><span>社群沉淀意向</span></div></div><div class="conn">&darr;</div>
    <div class="node"><span class="num">3</span><div><b>转化</b><span>案场逼定</span></div></div><div class="conn">&darr;</div>
    <div class="node"><span class="num">4</span><div><b>裂变</b><span>老带新放大</span></div></div>
  </div>
</div>
v19 → v20 更新说明（新增 / 调整） 
【新增】递进 / 序列 多版式（逻辑关系 · 层层递进 · 第一步→第N步 演变）
· 序列四方案 .seq：steps 横向编号步骤 / stair 阶梯上升 / time 竖向时间轴 / path 流程式区块，
  覆盖「第一步→第二步→第N步」演变的 4 种视觉呈现（编号 / 阶梯 / 时间 / 流程）。
· 层级缩进 .lg-ind：一级→二级→三级 嵌套缩进，直观体现包含与层层递进。
· 并列 .lg-parallel：等权并列列，体现因果之外的并列结构。
· 制作时自动适配：autoDetectSeq() 据"第一/第二/步骤/首先…"信号自动识别递进内容并打标，
  配合 .seq-switch「⇄ 换版式」可在 4 种序列方案间运行时切换；徽标 .seq-badge 导出自动隐藏。
· 新增版面画廊卡 46–52：每种递进/序列方案真实渲染 + 可复制 HTML。

【调整】
· 自动匹配矩阵增「第六轴 · 递进/序列」，与既有五轴（类型/体量/关系/叙事/文案方向）联动。
· 选型口诀补：步骤演变用 seq（编号/阶梯/时间/流程），层级递进用 lg-ind，并列用 lg-parallel，因果用 lg-bridge。
v18 → v19 更新说明（新增 / 调整 / 移除） 
【新增】
· 文案方向自动识别：引擎据内容信号（字数 / 营销词 / 说明词 / 朝向）自动给每页打 data-dir，
  三轴共 8 向 —— 横 / 竖 × 标题 / 正文 × 营销 / 说明，生成即匹配，无需手动。
· 方向修饰类 .slide[data-dir]：标题型放大留白 / 正文型收紧易读 / 营销型金线 + CTA / 说明型蓝线克制 / 竖版海报式构图。
· 识别指示徽标 .dir-badge：右上角显示本页被识别的方向，默认隐藏、可一键显现、导出自动隐藏。
· 表格四方案（classic / cards / heat / ledger）与逻辑六方案（hub / pyramid / cycle / tree / bridge / flowv），
  见上方 40 / 41 卡，点「⇄ 换版式」在同一结构内循环切换。
· 新增版面画廊卡 42–45：同一内容在四种文案方向下的真实渲染，直观展示自动排版效果。

【调整】
· 自动匹配矩阵增「第五轴 · 文案方向」，与既有四轴（类型 / 体量 / 关系 / 叙事）联动。
· 「⇄ 换版式」延续并扩展：先定方向，再在方向内换版式，层次更清晰。

【移除】
· 无破坏性移除，v18 全部能力（8 套皮肤、30+ 组件、表格 / 逻辑多方案）完整保留并兼容。
69 数据→图表自动化data-chart
复制 HTML 结构
<table class="data-chart" data-type="bar" data-title="上半年月度成交（套）">
  <thead><tr><th>月份</th><th>认购</th><th>签约</th></tr></thead>
  <tbody>
    <tr><td>1月</td><td>120</td><td>100</td></tr>
    <tr><td>2月</td><td>180</td><td>150</td></tr>
    <tr><td>3月</td><td>240</td><td>200</td></tr>
  </tbody>
</table>
<!-- data-type 取值：bar / line / pie / donut / funnel；多数值列自动转为多系列折线 -->