把任意输入(想法、大纲、草稿文档、会议纪要)转化为企业级 HTML 演示文稿,自动匹配所在公司的品牌主题。
.html 文件,CSS/JS 全部内联,零依赖,浏览器直接打开。bash
git pull --ff-only
成功 → 静默继续;失败(无网络 / 有冲突)→ 静默忽略,继续使用当前版本。
Mode A:全新制作 — 从主题/大纲/草稿创建,进入 Phase 1。
Mode B:增强改稿 — 在现有 HTML 上修改或扩充内容:
<section> 的 id、 class、标题,输出当前幻灯片清单<section>, 确认后再操作<section>,新增页插入逻辑最合适的位置读取 themes/_index.md,从用户请求提取公司关键词,优先级从高到低:
themes/[id].md 路径themes/_index.md 优先级链执行一次性收集以下信息(运行环境支持 AskUserQuestion 则用它补问,否则发一条消息补问):
字段说明公司所在公司或品牌名称(用于匹配主题色)主题演讲 / 汇报的核心主题受众管理层 / 团队内部 / 跨部门 / 外部客户页数5–8 页 / 10–15 页 / 20 页以上内容粘贴大纲、草稿或关键要点;只有主题时说明即可署名演讲者姓名 + 角色/岗位/Title(用于封面)日期演讲日期(默认今天)
缺失字段的推断规则:
公司 → 从内容、署名、部门名称推断;仍无法识别则默认蚂蚁集团
受众 → 含"汇报/review/决策/管理层" → 管理层;含"分享/复盘/团队" → 团队内部;含"提案/客户/合作" → 外部客户;无法判断 → 内部汇报
页数 → 按模式和字数推断:
日期 → 默认今天
署名 → 从内容或当前用户信息推断;无法推断则默认"演讲者"
Phase 1 完成后通知: 已收集:[公司] · [受众] · [页数] 页 · [署名]
页面类型Slide Class豁免条件封面页slide-cover无豁免目录页slide-white总页数 ≤ 6 时省略章节过渡页slide-section该章节内容页 < 3 时省略;章节页总数不超过内容页的 1/3结尾页slide-qa无豁免
小型 PPT(≤ 6 页):封面 + 内容页 + 结尾,不强插目录和章节页。
不适合搬到 PPT 的内容:开场寒暄、重复表达、口语化连接词、大段故事细节、抒情句、可口头补充的背景说明。
stat-block、 step-card、 quote-box、 agenda-item,也可按内容需要设计新的页面骨架与信息组件。components.md 提供的是高频可复用参考,不是完整上限;当主题更适合地图、时间带、关系网、年表、分镜、注释图、海报式大字、档案卡、实物标注、时间切片、城市剖面等表达时,应优先为内容发明更合适的新组件。在写每页 HTML 前,先判断内容形态,再选布局。优先级: 页面骨架 > 成组组件 > 普通 bullet。下表是推荐起点,不是限制清单;若现有组件不够贴合,应自定义新骨架而不是勉强套用。
内容形态推荐组件 / 骨架避免全文总览 / 章节预告agenda-item、分组目录页普通 bullet 平铺目录开场判断 / 问题定义开场钩子页、 highlight-box + info-card整页长段正文单一核心结论highlight-box、 stat-block、大数字密集列表或多主题混页核心结论 + 数据支撑insight-panel判断句和数字分散在两张独立卡片并列要点 / 三原则three-col、 info-card、 stat-block三个平级观点写成纵向长段双对象对比two-col、左右图文混排单列顺序写法分阶段推进step-card、 step-flow-grid普通 bullet 描述"第一第二第三"月度 / 季度路线图roadmap-col普通 step-card 忽略时间轴感工作流 / 研发流程flow-item(4列×N行)有序列表平铺 8 个步骤能力成熟度 / 等级体系level-row普通 bullet 描述各等级组织支撑 / 能力体系support-board、 support-card、 role-card多段正文描述体系责任清单 / 人员分工support-mini-card + @负责人普通 bullet 列名字多角色流转 / 跨方协同demand-flow-board静态列表描述角色数据 / 占比 / 趋势stat-block、进度条、SVG 图表、表格只写数字句子无图形支撑排名 / 优先级bar-rank纯数字列表业务线 / 产品集合tag-cloud等高等大标签平铺产品截图browser-mockup裸放图片无上下文引用原话quote-box、 insight堆多段长引用结尾总结分组总结页、 agenda-item、 highlight-box结尾再展开大量新信息
组件约束:
support-board、 demand-flow-board)不退回普通卡片页。style="max-width:X%;margin:0 auto;" 写在容器上。slide-body 显式加 justify-content:center,避免内容贴在上半屏。components.md 是参考库,不是白名单。允许自定义 HTML、CSS class 和新的信息组件,只要遵守当前模板的 CSS 变量、字号体系、留白系统与交互约束。timeline-band、 map-note-card、 artifact-callout、 split-metric-stage、 city-axis-board,避免无语义的 box-1、 layout-a。当需要超出 components.md 时,按以下规则设计:
内容类型Mode A2(主题创作)Mode A1(内容压缩)文字要点10–15 条 bullet,每条 ≤ 40 字6–8 条,每条 ≤ 25 字信息卡片(横向)5–6 列,描述 ≤ 120 字4–5 列,描述 ≤ 50 字信息卡片(纵向)单列 ≤ 10 张,描述 ≤ 120 字/张单列 ≤ 6 张,描述 ≤ 35 字/张数据统计6–9 个 stat-block,配 1–2 句解读6 个,配 1 句解读对比/流程4–6 个 step-card,描述 ≤ 80 字4 个,描述 ≤ 35 字表格最多 12 行 × 6 列最多 8 行 × 5 列引用原话1–3 段,每段 ≤ 150 字1 段, ≤ 80 字卡片描述正文3–5 句话,≤ 120 字2–3 句话,≤ 50 字单页总字数≤ 300 字≤ 150 字
超出限制 → 自动拆成多页,页间用连贯的过渡标题衔接。
规划完成后,进入 Phase 3 前必须执行以下自检:
three-col / info-card ≥ 4 连续 → 中间插入过渡页或大字判断页step-card ≥ 3 连续 → 第 4 页换其他骨架styled-list ≥ 4 连续 → 至少 1 页改为卡片或图表[调整] 标注改动位置去冗余 — 删除"我们认为""需要指出的是"等无信息量前缀。
名词化 — "进行分析"→"分析","做出决策"→"决策"。
数字化 — 只润色原文已有数字的表达("百分之三十七"→"37%");禁止编造原文无源的具体数字。
动词有力 — 用"推进""落地""打通""提升"替代"做""进行""开展"。
层级清晰 — 主标题是结论/判断,副标题是补充说明,内容是支撑。
引用克制 — 只保留最有代表性的 1 句;同页不出现多段长引用。
Phase 2 完成后通知: 规划完成,共 N 张,开始生成…
① 复制模板
bash
cp template.html [输出文件名].html
template.html 本身antgroup-q1-review.html② 并行读取(同时发起)
themes/[id].md — 获取 CSS 变量、 .slide-section / .slide-qa 覆盖、logo 路径
components.md — 只 Grep Phase 2 中用到的组件章节,不必全读
components.md — 作为高频组件参考;若规划包含创新布局,只需读取相关章节借鉴命名、字号和留白,不要把它当成白名单
icons.md(含图标槽时按需 Grep)— 中文主题 → 英文图标名参考:
中文关键词推荐图标名安全、防护、权限、合规shield, lock, eye-off数据、分析、统计、报告bar-chart-2, pie-chart, trending-up用户、客户、团队、人员users, user, user-check流程、步骤、推进、路径arrow-right, git-branch, navigation目标、战略、方向、规划target, flag, compass技术、系统、架构、平台cpu, server, layers效率、性能、速度、优化zap, clock, activity成本、金融、收益、预算dollar-sign, credit-card, trending-down协同、沟通、对接、整合link, share-2, message-circle风险、问题、告警、异常alert-triangle, x-circle, bell创新、产品、功能、特性star, package, box运营、推广、增长、运作trending-up, repeat, refresh-cw
template.html 已内置蚂蚁集团默认值(双 logo、页脚文字)。标题、主题样式、logo 全部改为脚本直接写回 HTML,不再手工替换。
① 标题 ② 主题样式 ③ Logo
bash
# `theme-id` 默认为 `ant-group`
python3 scripts/apply-template-branding.py [文件名].html \
--title "[演讲主题]" \
--speaker "[演讲者]" \
--theme-id [theme-id]
规则:
theme-id=ant-group 时保留 <!-- %%THEME_STYLE%% -->themes/[id].md 的 ## CSS 代码块注入 <style>...</style>#globalLogoGroup 是唯一 logo 节点, 禁止在任何 <section> 内写 logo④ 幻灯片内容(必填)
text
old: <!-- %%SLIDES%% -->
new: 所有 <section> 幻灯片 HTML
主题应用说明:
.slide-section / .slide-qa 必须用 !important 覆盖基础 CSS 中的硬编码渐变--primary-pale 会自动影响 info-card 背景、 agenda-item hover 等,无需逐一覆盖每张写入前先输出进度: → 03/12 技术架构现状(序号补零到总数位数)
封面页
html
<section class="slide slide-cover" id="slide-1">
<div class="cover-arcs" aria-hidden="true">
<div class="arc arc-1"></div><div class="arc arc-2"></div><div class="arc arc-3"></div>
</div>
<div class="cover-top reveal" style="display:flex;align-items:center;">
<span style="color:rgba(255,255,255,0.65);font-size:clamp(0.65rem,1.1vw,0.85rem);">[部门]</span>
</div>
<div class="cover-main">
<h1 class="cover-title reveal">[主标题]</h1>
<p class="cover-subtitle reveal">[副标题]</p>
<p class="reveal" style="font-size:clamp(0.85rem,1.5vw,1.1rem);color:#fff;font-weight:700;">[姓名|角色/Title]</p>
</div>
<div class="cover-bottom"><div class="cover-date reveal">[日期]</div></div>
</section>
内容页(白色)
html
<section class="slide slide-white" id="slide-N">
<div class="slide-header center-stack">
<span class="header-mark"></span>
<h2 class="header-title">[结论/判断句]</h2>
<p class="header-sub">[补充说明]</p>
</div>
<div class="slide-body" style="justify-content:center;">
<!-- 组件区 -->
</div>
</section>
章节过渡页
html
<section class="slide slide-section" id="slide-N">
<p class="section-num reveal">PART [N]</p>
<h2 class="section-title reveal">[章节标题]</h2>
<p class="section-desc reveal">[一句话说明本章节要回答的问题]</p>
</section>
结尾页
html
<section class="slide slide-qa" id="slide-N">
<h2 class="qa-title reveal">Q&A</h2>
<p class="qa-sub reveal">[感谢语]</p>
</section>
写入约束(所有幻灯片必须遵守):
场景写法普通间距、字号clamp() 或 CSS 变量固定 px 尺寸calc(Npx * var(--vp-scale, 1))容器最大宽度min(calc(XYZpx * var(--vp-scale, 1)), 100%)``max-width 写死 px禁止内容区宽度<div style="width:min(100%,var(--deck-safe-width));margin:0 auto;">
密度自检(每页必须执行,按模式选对应上限):
检查项A2 主题创作上限A1 内容压缩上限处理bullet 条数≤ 15 条≤ 8 条超出则拆页每条 bullet 字数≤ 40 字≤ 25 字超出则压缩单页总字数≤ 300 字≤ 150 字超出则拆页info-card 描述≤ 120 字/张≤ 35 字/张A1 超出则精简;A2 超出则拆页标题类型结论句结论句话题词改判断句
Step 4.1:保存
文件名英文小写 + 连字符;中文关键词转拼音或英译。
Step 4.2:单体化兜底扫描
logo 应在 Step 3.2 ③ 直接从 themes/logos/*.txt 写入。此步骤仅处理其他外部图片遗漏的边缘情况:
bash
python3 scripts/inline-images.py [文件名].html
Step 4.3:Smoke Test(必须执行,不得跳过)
生成完成后立即运行静态检查;失败时必须修复后重跑,不得跳过也不得仅凭”看起来没问题”省略:
bash
./scripts/smoke-test.sh [文件名].html
执行后在回复中明确写出:
smoke-test: passed(N 张幻灯片)或smoke-test: FAILED — [原因]。未写出视为未执行。
Step 4.4:用浏览器直接打开文件(必须执行,不得跳过)
bash
open [文件名].html
执行后在回复中明确写出:
已用 open 打开浏览器或受环境限制无法打开 — [原因]。未写出视为未执行。
成功标准:浏览器直接打开本地 HTML 文件,且不依赖本地 HTTP 服务。
Step 4.5:最终交付摘要(必须输出,格式固定)
在回复的最后输出以下固定格式的摘要块,所有字段必填,缺任何一项视为未完成:
text
📦 交付摘要
文件路径:[绝对路径或相对路径]
文件大小:[X KB]
幻灯片数:[N] 张
主题:[theme-id]
smoke-test:通过 / 失败([原因])
浏览器:已打开 / 无法打开([原因])
导航:方向键 / 空格翻页 · 右侧圆点 · F 全屏
在以下全部条件满足前,禁止输出”完成””Done””已生成”或任何等价的结束表述。
inline-images.py 已执行smoke-test.sh 已执行,结果已在回复中明确写出open 已执行,结果已在回复中明确写出如果任一步未完成,最终答复必须改为“当前进度 + 阻塞原因”,不能伪装成完整交付。
文件用途何时读取template.html预构建引擎壳(含完整 CSS/JS)Step 3.1 cp(必须)themes/_index.md主题识别规则 + 子品牌表 + logo 索引Phase 0 主题检测themes/[id].mdCSS 变量 + logo 路径 + 补充规则Step 3.1 并行读取components.md组件 HTML 片段参考Step 3.1 按需 Grepicons.md287 个 Feather Icons 内联 SVG有图标槽时按需 Grepthemes/logos/品牌 logo 的 data URI 文本文件Step 3.2 ③ 直接读取 .txtexamples/index.html完整示例文档需要查阅组件骨架时
格式统一为纯文本,不用 markdown 列表或标题。
时机格式示例Phase 1 完成后一句话确认元数据已收集:腾讯 · 管理层汇报 · 12 页 · 张三 总监Phase 2 完成后一句话说明页数规划完成,共 12 张,开始生成…Step 3.3 每张写入前→ 序号/总数 标题``→ 03/12 技术架构现状Step 4.2 完成后一句话含文件大小单体化完成,1.2 MB,无外部依赖。Step 4.3见 Phase 4 Step 4.3—
序号统一补零到总数位数(总数 12 则写 01,总数 100 则写 001)。
git pull --ff-only(失败则静默忽略)cp template.html 完成.txt 文件存在并已直接写入;文件缺失时执行 Fallbacksmoke-test 已执行并检查结果smoke-test 结果<section> 内写 logo 代码max-width 写死 pxtemplate.html