القائمة
把想法、大纲、文档或草稿变成结构清晰、设计精良的企业级 HTML 演示文稿。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| 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