القائمة
把想法、大纲、文档或草稿变成结构清晰、设计精良的企业级 HTML 演示文稿。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
当用户要求把本仓库中的 Markdown 文章转成网页版 PPT、HTML slides、演讲稿页面或独立演示页，尤其希望输出与原文同目录、同 basename 时使用。主题与工作流对齐 FeeiCN/slide-writer；博客站主题见 vendor/slide-writer/themes/blog-sumsec.md（与上游主题同目录）。
小红书自动化技能集合。支持认证登录、内容发布、搜索发现、社交互动、复合运营。 当用户要求操作小红书（发布、搜索、评论、登录、分析、点赞、收藏）时触发。
小红书认证管理技能。检查登录状态、登录（二维码或手机号）、退出登录。 当用户要求登录小红书、检查登录状态、退出登录时触发。
小红书复合内容运营技能。组合搜索、详情、发布、互动等能力完成运营工作流。 当用户要求竞品分析、热点追踪、内容创作、互动管理等复合任务时触发。
小红书内容发现与分析技能。搜索笔记、浏览首页、查看详情、获取用户资料。 当用户要求搜索小红书、查看笔记详情、浏览首页、查看用户主页时触发。
小红书社交互动技能。发表评论、回复评论、点赞、收藏。 当用户要求评论、回复、点赞或收藏小红书帖子时触发。
| name | slide-writer |
| display_name | Slide-Writer |
| description | 把想法、大纲、文档或草稿变成结构清晰、设计精良的企业级 HTML 演示文稿。 |
| version | 0.2.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 全部内联，零依赖，浏览器直接打开。在每个阶段开始前，必须向用户输出一行进度说明，让用户知道当前在做什么。格式统一为纯文本，不用 markdown 列表或标题，一句话即可。
| 时机 | 输出示例 |
|---|---|
| Phase 0 完成后（主题确定） | 已识别主题：腾讯，应用腾讯蓝主题。 |
| Phase 2 完成后（结构规划） | 规划完成，共 12 张幻灯片：封面 / 目录 / 背景 / …/ Q&A。 |
| Phase 3 开始前 | 开始生成 HTML 文件，共 12 张… |
| Phase 4 保存完成后 | （见 Phase 4 输出规范） |
在当前 skill 工作目录执行：
git pull --ff-only
<section> 块读取 themes/_index.md，从用户请求中提取公司关键词，优先级从高到低：
Phase 1 收集到「公司」字段后，如与初步判断不一致，以用户明确填写的为准并更新主题。
匹配规则：
themes/[id].md 路径，生成时告知用户（如”已应用阿里巴巴橙色主题”）themes/ant-group.md）themes/_index.md「多品牌冲突处理」规则执行优先一次性收集以下信息：
如果运行环境支持 AskUserQuestion，一次性补问缺失项；如果不支持，就用一条普通消息补问，或在低风险场景下按默认值直接继续：
根据收集的内容，自动规划幻灯片结构：
如果输入是”演讲全文 / 发言稿 / 逐字稿 / 长文”，先做”演讲稿 → 演示结构”的转换，不要直接把原文分段贴到页面里。
推荐转换顺序：
不适合保留到 PPT 的内容：
如果页面内容仍然“像一堆文字”，必须继续改写成更强的视觉结构，而不是直接交付。
默认遵守：
stat-block、step-card、quote-box、agenda-item 等组件，而不是正文段落。| 页面类型 | 用途 | Slide Class |
|---|---|---|
| 封面页 | 主题、副标题、演讲者 + 角色/岗位/Title、日期 | slide-cover |
| 目录页 | 用 agenda-item 列出所有章节 | slide-white |
| 章节过渡页 | 每个大章节开始前 | slide-section |
| 结尾页 | Q&A 或感谢 | slide-qa |
| 内容类型 | 普通场景上限 | 演讲稿场景上限 |
|---|---|---|
| 文字要点 | 4-6 条 bullet | 3 条，每条 ≤ 12 字 |
| 信息卡片 | 3 列 info-card | 2 列，卡片描述 ≤ 20 字 |
| 数据统计 | 3-4 个 stat-block | 3 个，配 1 句解读 |
| 对比/流程 | 2-4 个 step-card | 2 个，描述 ≤ 15 字 |
| 表格 | 最多 5 行 × 4 列 | 最多 3 行 × 3 列 |
| 引用原话 | 1 段，30-50 字 | 1 句，≤ 25 字 |
| 卡片描述正文 | 2-3 句话 | 1 句话，禁止完整段落 |
超出限制 → 自动拆成多页，页间用连贯的过渡标题衔接。
在把每一部分内容写成 HTML 之前，必须先做一次“内容类型判断”，再决定使用哪种布局。优先级是：页面级骨架 > 成组组件 > 普通 bullet / 段落。
| 内容形态 | 优先页面骨架 / 组件 | 适用场景 | 避免用法 |
|---|---|---|---|
| 全文总览 / 章节预告 | 分组目录页、agenda-item | 目录页、章节总览、分阶段议程 | 直接用普通 bullet 平铺全篇目录 |
| 开场判断 / 问题定义 | 开场钩子页、2×2 信息面板、highlight-box + info-card | 开场第一页正文、问题陈述、背景变化 | 用整页长段正文解释背景 |
| 单一核心结论 | highlight-box、stat-block、大数字 + 简短支撑 | 这一页只讲一个明确判断 | 做成密集列表或多主题混页 |
| 并列要点 / 三原则 / 三抓手 | three-col、info-card、stat-block | 3 个并列观点、原则、分类 | 把 3 个平级观点写成纵向长段 |
| 双对象对比 / 两个重点方向 | two-col、左右图文混排 | A/B 对比、两类对象、两个重点模块 | 用单列顺序写法削弱对比感 |
| 分阶段推进 / 先后逻辑 | step-card、双阶段桥接流程、step-flow-grid | 路线图、推进步骤、阶段拆解 | 用普通 bullet 描述“第一、第二、第三” |
| 组织支撑 / 能力体系 | support-board、support-card、role-card | 横向能力、机制、专项保障 | 用多段正文描述体系结构 |
| 多角色流转 / 跨方协同 | demand-flow-board | 多角色参与、需求流转、协作看板 | 用静态列表描述角色流转 |
| 数据结构 / 占比 / 趋势 | stat-block、进度条、标签云、表格、SVG 柱状图 / 折线图 / 环形图 | 数据对比、趋势、构成、分布 | 没有图形支撑却只写数字句子 |
| 引用原话 / 观点摘录 | quote-box、insight | 保留一句金句或关键原话 | 堆多段长引用 |
| 结尾总结 / 行动主张 | 分组总结页、agenda-item、highlight-box | 结论页、行动建议、价值回收 | 结尾再次展开大量新信息 |
support-board、demand-flow-board、双阶段流程这类强结构页面，就不要退回普通卡片页。components.md 现有骨架都不适配时，才允许做轻量自定义布局。规划完整体结构后，扫描一遍布局序列，同时满足以下局部和全局要求：
局部约束（连续检查）：
three-col / info-card 三列 → 中间插入 stat-block、highlight-box 大字判断页、step-card 流程页或章节过渡页styled-list bullet → 至少 1 页改为卡片、数据或图文骨架step-card 流程 → 第 3 页必须换为其他骨架全局约束（整稿比例）：
three-col / info-card）占全稿内容页比例 ≤ 40%布局多样性检查清单（生成前对照一遍）：
| 检查项 | 类型 | 要求 |
|---|---|---|
| 最长同类布局连续段 | 局部 | ≤ 2 页 |
| 三列卡片页占比 | 全局 | ≤ 40% |
| 纯视觉页（大数字/图表/金句） | 全局 | ≥ 1 页（超过 8 页时） |
| 章节过渡页间隔 | 局部 | 每 4–6 页内容页穿插 1 页 |
结构规划完成后，在写 HTML 前对所有文字执行：
① 复制 shell 模板
cp _base.html [输出文件名].html
_base.html 是预构建的引擎壳，含完整 CSS/JS，禁止直接编辑 _base.html 本身antgroup-q1-review.html② 并行读取以下两个文件（同时发起，不要等一个读完再读另一个）
themes/[id].md（Phase 0 已确定的公司主题文件，约 30 行）
.slide-section / .slide-qa 覆盖、logo 文件路径components.md（按需读取，不必全读）
info-card 和 agenda-item → 只读「信息卡片」和「目录/议程」两节复制完 _base.html 后，依次用 Edit 工具替换 5 个占位符，不要重写整个文件：
① 标题
old: %%TITLE%%
new: [演讲主题] — [演讲者]
② 主题样式覆盖（内容直接从 themes/[id].md 的 CSS 块复制）
old: <!-- %%THEME_STYLE%% -->
new:
<style>
:root { ... }
.slide-section { background: ... !important; }
.slide-qa { background: ... !important; }
</style>
③ Logo 规范（白底页 + 深色页）
文件选择（路径查 themes/[id].md 的「Logo」节，双 logo 规则查 themes/_index.md「双 Logo 展示规则」）：
-color.png / -blue.png）-white.png）；无则用彩色版 + style=”filter:brightness(0) invert(1)”白底页：填充 %%LOGO_GROUP%% 占位符
<!-- 单 logo -->
<div id=”globalLogoGroup” class=”logo-group-single”>
<img src=”./logos/[brand]-color.png” alt=”[公司]”>
</div>
<!-- 双 logo -->
<div id=”globalLogoGroup” class=”logo-group-dual”>
<img src=”./logos/[集团]-color.png” alt=”[集团]”>
<span class=”logo-divider”></span>
<img src=”./logos/[子品牌]-color.png” alt=”[子品牌]”>
</div>
<!-- 无 logo -->
<div id=”globalLogoGroup” class=”logo-group-single” style=”display:none;”></div>
深色页（封面 / 章节 / 结尾）：内联写入各 <section>，三种页面写法完全一致
<!-- 单 logo（有白色版）-->
<div class=”fixed-logo-dark logo-group-single”>
<img src=”./logos/[brand]-white.png” alt=”[公司]” class=”logo-img-cover”>
</div>
<!-- 单 logo（无白色版，用彩色版转白）-->
<div class=”fixed-logo-dark logo-group-single”>
<img src=”./logos/[brand]-color.png” alt=”[公司]” class=”logo-img-cover”
style=”filter:brightness(0) invert(1);”>
</div>
<!-- 双 logo -->
<div class=”fixed-logo-dark logo-group-dual”>
<img src=”./logos/[集团]-white.png” alt=”[集团]” class=”logo-img-cover”>
<span class=”logo-divider”></span>
<img src=”./logos/[子品牌]-white.png” alt=”[子品牌]” class=”logo-img-cover”>
</div>
<!-- 无 logo：省略整个 .fixed-logo-dark，不写占位 -->
禁止事项：
position:absolute、top:、right:、height: 等定位和尺寸样式（CSS + JS 已统一处理）<img> 放 logo，必须套在 .fixed-logo-dark 容器内④ 页脚说明
old: %%FOOTNOTE%%
new: * 仅限内部交流使用（或用户指定的文字）
⑤ 幻灯片内容
old: <!-- %%SLIDES%% -->
new: 所有 <section> 幻灯片 HTML
主题应用说明：
.slide-section 和 .slide-qa 在基础 CSS 中使用硬编码渐变，必须用 !important 覆盖。--primary-pale 会自动影响 info-card 背景、agenda-item hover、highlight-box 等，无需逐一覆盖。./logos/... 相对路径。封面页：
<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>
<!-- 深色页 logo：写法见 Step 3.2 ③；无 logo 时省略整个 .fixed-logo-dark -->
<div class="fixed-logo-dark logo-group-single">
<img src="./logos/[brand]-white.png" alt="[公司名] Logo" class="logo-img-cover">
</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">
<!-- 深色页 logo：写法见 Step 3.2 ③；无 logo 时省略整个 .fixed-logo-dark -->
<div class="fixed-logo-dark logo-group-single">
<img src="./logos/[brand]-white.png" alt="[公司]" class="logo-img-cover">
</div>
<p class="section-num reveal">PART [章节号]</p>
<h2 class="section-title reveal">[章节标题]</h2>
<p class="section-desc reveal">[一句话说明这一章节要回答的问题]</p>
</section>
结尾页：
<section class="slide slide-qa" id="slide-N">
<!-- 深色页 logo：写法见 Step 3.2 ③；无 logo 时省略整个 .fixed-logo-dark -->
<div class="fixed-logo-dark logo-group-single">
<img src="./logos/[brand]-white.png" alt="[公司]" class="logo-img-cover">
</div>
<h2 class="qa-title reveal">Q&A</h2>
<p class="qa-sub reveal">[感谢语]</p>
</section>
演讲稿专项密度检查（输入为演讲稿时，每页生成后执行）：
对照以下标准自检，不达标则继续精简或拆页：
antgroup-q1-review.html、alibaba-ai-strategy.html；主题关键词是中文时转为拼音或英译，避免中文文件名造成路径兼容问题。open [文件名].html 自动在默认浏览器中打开。F 全屏| 文件 | 用途 | 何时读取 |
|---|---|---|
| _base.html | 预构建引擎壳（含完整 CSS/JS），生成时 cp 为输出文件再用 Edit 填充 | Phase 3 Step 3.1（必须） |
| themes/_index.md | 主题识别规则 + 集团/子品牌关键词表 + logo 索引 + 双 logo 规则 | Phase 0 主题检测（只读此一个文件） |
themes/[id].md | 单公司主题文件（~30 行）：CSS 变量 + logo 路径 + 补充规则 | Phase 3 Step 3.1（只读匹配到的那一个） |
| components.md | 所有可用组件的 HTML 片段参考 | Phase 3 按需 Grep 对应章节，不必全读 |
logos/[变体]-white.png | 公司 Logo 白色版（深色幻灯片使用） | Phase 3 Step 3.1（有 logo 时） |
logos/[变体]-blue.png / logos/[变体]-color.png | 公司 Logo 彩色版（白色幻灯片使用） | Phase 3 Step 3.1（有 logo 时） |
| index.html | 完整示例文档，含所有组件的真实渲染样例 | 需要查阅组件骨架细节时（只读参考） |