Menu
把想法、大纲、文档或草稿变成结构清晰、设计精良的企业级 HTML 演示文稿。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | slide-writer |
| display_name | Slide-Writer |
| description | 把想法、大纲、文档或草稿变成结构清晰、设计精良的企业级 HTML 演示文稿。 |
| version | 1.0.0 |
| author | Feei |
| homepage | https://github.com/FeeiCN/slide-writer |
| repository | https://github.com/FeeiCN/slide-writer |
| license | MIT |
| tags | ["presentation","slides","ppt","keynote","html","storytelling","enterprise"] |
| entry | SKILL.md |
| language | zh-CN |
| compatible_with | ["claude-code","codex"] |
把任意输入（想法、大纲、草稿文档、会议纪要）转化为企业级 HTML 演示文稿，自动匹配所在公司的品牌主题。
.html 文件，CSS/JS 全部内联，零依赖，浏览器直接打开。git pull --ff-only
成功 → 静默继续；失败（无网络 / 有冲突）→ 静默忽略，继续使用当前版本。
<section> 的 id、class、标题，输出当前幻灯片清单<section>，确认后再操作<section>，新增页插入逻辑最合适的位置读取 themes/_index.md，从用户请求提取公司关键词，优先级从高到低：
themes/[id].md 路径themes/_index.md 优先级链执行一次性收集以下信息（运行环境支持 AskUserQuestion 则用它补问，否则发一条消息补问）：
| 字段 | 说明 |
|---|---|
| 公司 | 所在公司或品牌名称（用于匹配主题色） |
| 主题 | 演讲 / 汇报的核心主题 |
| 受众 | 管理层 / 团队内部 / 跨部门 / 外部客户 |
| 页数 | 5–8 页 / 10–15 页 / 20 页以上 |
| 内容 | 粘贴大纲、草稿或关键要点；只有主题时说明即可 |
| 署名 | 演讲者姓名 + 角色/岗位/Title（用于封面） |
| 日期 | 演讲日期（默认今天） |
缺失字段的推断规则：
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 页改为卡片或图表[调整] 标注改动位置Phase 2 完成后通知：规划完成，共 N 张，开始生成…
① 复制模板
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
# `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④ 幻灯片内容（必填）
old: <!-- %%SLIDES%% -->
new: 所有 <section> 幻灯片 HTML
主题应用说明：
.slide-section / .slide-qa 必须用 !important 覆盖基础 CSS 中的硬编码渐变--primary-pale 会自动影响 info-card 背景、agenda-item hover 等，无需逐一覆盖每张写入前先输出进度：→ 03/12 技术架构现状（序号补零到总数位数）
封面页
<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>
内容页（白色）
<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>
章节过渡页
<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>
结尾页
<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 写入。此步骤仅处理其他外部图片遗漏的边缘情况：
python3 scripts/inline-images.py [文件名].html
Step 4.3：Smoke Test（必须执行，不得跳过）
生成完成后立即运行静态检查；失败时必须修复后重跑，不得跳过也不得仅凭”看起来没问题”省略：
./scripts/smoke-test.sh [文件名].html
执行后在回复中明确写出：
smoke-test: passed（N 张幻灯片）或smoke-test: FAILED — [原因]。未写出视为未执行。
Step 4.4：用浏览器直接打开文件（必须执行，不得跳过）
open [文件名].html
执行后在回复中明确写出：
已用 open 打开浏览器或受环境限制无法打开 — [原因]。未写出视为未执行。
成功标准：浏览器直接打开本地 HTML 文件，且不依赖本地 HTTP 服务。
Step 4.5：最终交付摘要（必须输出，格式固定）
在回复的最后输出以下固定格式的摘要块，所有字段必填，缺任何一项视为未完成：
📦 交付摘要
文件路径：[绝对路径或相对路径]
文件大小：[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].md | CSS 变量 + logo 路径 + 补充规则 | Step 3.1 并行读取 |
| components.md | 组件 HTML 片段参考 | Step 3.1 按需 Grep |
| icons.md | 287 个 Feather Icons 内联 SVG | 有图标槽时按需 Grep |
themes/logos/ | 品牌 logo 的 data URI 文本文件 | Step 3.2 ③ 直接读取 .txt |
| examples/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