summary-template

leo-insight

把录音（+PPT）→ 单页精排 HTML 洞察。本 skill 只负责”内容提炼 + 排版生成”，转写交给上游。

输入 / 输出

输入（缺啥问啥，见末尾「输入契约」）：

输出：一个自包含的单文件 .html + 一份同名 .pdf（CSS 内联、可直接分享、移动端自适应、带”生成分享卡”功能；PDF 由 HTML 一键导出，见 ⑦——默认两种格式都产出）。

资产（务必复用，别重写）

模型编排（多模态→Gemini，生成→宿主模型）

本 skill 按模态自动分流：吃录音、读 PPT 这类多模态前段交给 Gemini；提炼与生成精排 HTML/SVG 留给运行本 skill 的宿主模型（如 Claude）——前者要”看懂世界”，后者要”写好代码与版式”。

阶段 交给谁 怎么调
A 录音 → 转写 Gemini（原生音频） python3 scripts/transcribe_gemini.py <音频> > transcript.txt
B 读 PPT 图/视频 Gemini（多模态视觉） python3 scripts/read_slides_gemini.py <按序图...> > slides.json
C 提炼 + 生成 HTML/SVG 宿主模型（你自己） 不外包——这是质量命门，见下方流水线 ②–⑦

流水线（7 步）

① 备料（多模态走 Gemini，见「模型编排」）

② 提炼结构（这是质量的命门）

从素材里抽出：

③ 延展 · 检索关联（联网，做真关联，不靠脑补）

“延展”分两类，先做第一类：

④ 起页

复制 skeleton.html，填这些占位：

⑤ 写正文（填进 ``）

按下面「版面语法」组织，每节用「模块目录」里的片段。对照「质量基线」自查。

⑥ 配图（吃 slides.json）

⑦ 自包含 & 收尾

版面语法（每一节的固定节奏）

§ 章节头(.sec-head)  →  导语(.sec-intro)  →  一个模块(列表/图表/卡片/表/SVG/.fig)

全文开头是「首部块」，结尾是「金句 → 分隔线 → 延展 → 标签 → 页脚」。模块之间留白靠各自 margin，不要堆纯 <p>。

模块目录（直接抄片段，按需替换文字）

首部块（BODY 最前；含直播链接与 thesis）

<div class="meta-label"> ·  · </div>
<h1 class="page-title"><br></h1>
<div class="event-chips">
  <span class="ev-chip"></span><span class="ev-chip"></span>
  <span class="ev-chip"></span><span class="ev-chip"></span><span class="ev-chip"></span>
</div>
<!-- 首部直播/相册链接（可选）-->
<a class="gallery-link" href="" target="_blank" rel="noopener">▷ 活动图片直播 →</a>
<blockquote class="pull-quote">
  <div class="pull-quote-text"></div>
  <div class="pull-quote-attr">—  ·  · </div>
</blockquote>
<p class="thesis"></p>

章节 + 要点列表（最常用）

<div class="sec-head"></div>
<p class="sec-intro"></p>
<ul class="pts">
  <li><strong></strong>：</li>
</ul>

PPT 幻灯片图片（单张 / 两栏）

<figure class="fig">
  <img src="" alt="" loading="lazy">
  <figcaption class="fig-cap"><span class="n">图 1</span></figcaption>
</figure>

<div class="fig-grid">
  <figure class="fig"><img src="" alt=""><figcaption class="fig-cap"><span class="n">图 2</span>…</figcaption></figure>
  <figure class="fig"><img src="" alt=""><figcaption class="fig-cap"><span class="n">图 3</span>…</figcaption></figure>
</div>

编号时间线 / 范式列表（讲”演进/分代”用）

<div class="paradigm-list">
  <div class="paradigm-item">
    <div class="para-num">01</div>
    <div>
      <div class="para-era"></div>
      <div class="para-title"></div>
      <div class="para-desc"></div>
      <span class="para-tag"></span>
    </div>
  </div>
</div>

纯 CSS 条形图（比较量级/距离/占比，不必精确）

<div class="dist-chart">
  <div class="dist-row">
    <div class="dist-era"></div>
    <div class="dist-bar-wrap"><div class="dist-bar" style="width:100%"></div></div>
    <div class="dist-label"></div>
  </div>
</div>

矩阵卡片（风险/步骤/分类，2 列）.risk-matrix

<div class="risk-matrix">
  <div class="risk-cell">
    <div class="risk-num"></div>
    <div class="risk-title"></div>
    <div class="risk-desc"></div>
  </div>
</div>

人物卡（案例人物，2–3 列）.person-grid

<div class="person-grid">
  <div class="person-card">
    <div class="pc-name"></div>
    <div class="pc-thesis"></div>
    <div class="pc-impact"></div>
  </div>
</div>

行动条目（大编号的”怎么做”）.action-three

<div class="action-three">
  <div class="action-item">
    <div class="action-num">01</div>
    <div class="action-content">
      <div class="action-title"></div>
      <div class="action-desc"></div>
    </div>
  </div>
</div>

数据表（公司/清单/对照）.portfolio-table

<table class="portfolio-table">
  <thead><tr><th></th><th></th><th></th></tr></thead>
  <tbody>
    <tr><td></td><td></td><td class="hi"> <span class="badge"></span></td></tr>
  </tbody>
</table>

公式/口号块（一句被反复引用的核心式子）.formula-block

<div class="formula-block"><br><br></div>

年代线（时间相变事件）.epoch-line

<div class="epoch-line">
  <div class="epoch-item">
    <div class="ep-year"></div>
    <div class="ep-event"><strong></strong>—— <span class="ep-marker"></span></div>
  </div>
</div>

过去→未来对比.vibe-compare（左旧 / 中箭头 / 右新）

<div class="vibe-compare">
  <div class="vc-col vc-past"><div class="vc-col-title"></div>
    <div class="vc-item"></div><div class="vc-item"></div></div>
  <div class="vc-arrow">过 去 ─→ 未 来</div>
  <div class="vc-col vc-future"><div class="vc-col-title"></div>
    <div class="vc-block"><div class="vc-bname"></div><div class="vc-bsub"></div></div></div>
</div>

金句块（结尾前，8–12 条逐字金句）.quotes-block

<div class="quotes-block">
  <div class="quotes-label">金句</div>
  <div class="quote-item"></div>
</div>

延展块（先检索关联、再编辑推演；见流水线 ③）

<hr class="divider">
<div class="ext-head">§ 延展 · 延伸与关联</div>

<!-- A. 延伸阅读·关联：联网检索得来，必须带真实链接 -->
<div class="ext-block">
  <div class="ext-block-title">延伸阅读 · 关联</div>
  <ul>
    <li><strong></strong>： <a href="" target="_blank" rel="noopener">来源 →</a></li>
  </ul>
</div>

<!-- B. 编辑推演：显式标明是编辑视角 -->
<div class="ext-block">
  <div class="ext-block-title"></div>
  <p></p>
  <ul>
    <li></li>
    <li class="q"></li>
  </ul>
</div>

标签 + 页脚（全文末尾；品牌走 ``，可留空）

<div class="tags-row"><span class="tag"></span></div>
<footer>
  <div></div>
  <div> ·  ·  ·  · </div>
  <div>活动图片直播：<a href="" target="_blank" rel="noopener">查看完整现场影像</a></div>
  <div>本页内容为整理，非演讲方官方发布 · <a href="">返回</a></div>
</footer>

SVG 概念图指南

用来把抽象关系重新结构化（不是放照片）。统一外壳：

<div class="impact-chart-wrap">
  <div class="impact-chart-title"></div>
  <div class="impact-chart-sub"></div>
  <svg viewBox="0 0 540 240" class="impact-svg" preserveAspectRatio="xMidYMid meet"> … </svg>
  <div class="impact-chart-caption"></div>
</div>

styles.css 已备好这些文字样式钩子，挑对应图型直接用：

做法：手算坐标，<polygon>/<path>/<line>/<circle>/<text> 拼，箭头用 <defs><marker>，配色沿用墨绿 --t/蓝 rgba(82,150,200,…)/紫 --p。坐标拿不准时，直接照搬参考页里同型图的数值再改文字。

质量基线（每篇必须达到）

反模式（务必避免）

输入契约（开工前先确认，缺则问用户）

  1. 录音 / 转写稿 / 纪要——至少给一个。
  2. 元信息：标题、讲者、主办、地点、时长、日期。
  3. 直播/相册链接（要不要挂首部）。
  4. PPT：有没有？是照片 URL、本地图、还是 .pptx/.pdf？大概几张、对应哪些主题？
  5. 图片如何托管：图床 URL / 本地 / base64 自包含？
  6. 品牌（可选）：栏目名 / 标语 / logo 单字 / 返回链接 / 站点网址——没有就留空，模板不写死任何品牌。