Menu
用动物森友会风格生成零依赖 HTML 演示文稿，或将 .pptx 文件转换为同款风格。当用户想做幻灯片、做 PPT、做演示文稿，或提到动物森友会/岛屿风格时触发。
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 | animal-island-slides |
| description | 用动物森友会风格生成零依赖 HTML 演示文稿，或将 .pptx 文件转换为同款风格。当用户想做幻灯片、做 PPT、做演示文稿，或提到动物森友会/岛屿风格时触发。 |
生成零依赖、单 HTML 文件的演示文稿，设计风格来自 animal-island-ui（动物森友会 React 组件库）。
下表中所有路径相对于 skill 自身目录 ${CLAUDE_PLUGIN_ROOT}/skills/animal-island-slides/（CLAUDE_PLUGIN_ROOT 由 Claude Code 在运行时自动注入，指向插件根目录）。读文件或执行脚本时，必须用 ${CLAUDE_PLUGIN_ROOT}/skills/animal-island-slides/<相对路径> 的绝对形式，不要假设用户当前目录里有这些文件。
| 文件 | 用途 | 加载时机 |
|---|---|---|
SKILL.md | 主流程和规则 | 始终（skill 调用时） |
html-template.md | 色彩系统、布局 CSS/HTML 片段 | Phase 3（生成 HTML） |
animation-patterns.md | CSS/JS 动画参考库 | Phase 3（生成 HTML，有入场动画需求时） |
scripts/extract-pptx.py | PPT 内容提取 | Phase 4（转换模式） |
scripts/export-pdf.sh | 导出 PDF | Phase 5（导出） |
scripts/deploy.sh | 部署到 Vercel | Phase 5（分享） |
生成的
.html输出文件依然写到用户的当前工作目录，不要写进插件目录。
height: 100dvh; overflow: hidden，内容超出密度上限时自动拆分，绝不允许幻灯片内滚动用户发起请求后，判断属于哪种模式：
用一次 AskUserQuestion 问完以下所有问题，不要分多轮询问：
如果用户选择"内容已准备好"或"有大纲/草稿"，请他们在回复中一并粘贴内容。
根据收集到的内容，起草幻灯片大纲，格式如下：
第 1 张 [Cover] 封面 — 项目名称
第 2 张 [Divider] 第一章：背景
第 3 张 [Bullets] 现状分析（5 条要点）
第 4 张 [TwoColumn] 核心方案（左文右数据）
第 5 张 [Grid] 三大功能（3 张卡片）
...
第 N 张 [Cover] 结尾/感谢
布局选择规则：
| 内容类型 | 布局 |
|---|---|
| 封面、章节开场、结尾 | Cover |
| 章节过渡 | Section Divider |
| 纯文字、步骤、背景 | Text Bullets（≤5 条） |
| 功能列表、对比项、特性 | Card Grid（≤6 张卡片） |
| 核心观点 + 支撑要点 | Quote + Checklist（≤4 条） |
| 单独一句金句、客户原话、产品哲学 | Pull Quote |
| 左文右图、左文右数据 | Two Column |
| 单一关键数字 / 季度增长 / 里程碑数值 | Big Stat Hero |
| 时间线、路线图、里程碑序列（3-5 节点） | Timeline |
| 方案 A vs B、改造前后、新老对比 | Comparison |
| 3-4 个并列核心指标 / KPI 汇总 | Stat Strip |
| 业务流程 / 步骤 / Onboarding 链路（3-5 步） | Process Flow |
| 截图 / 产品照片 / 信息图（图片为主） | Image Hero |
| 代码片段 / 配置示例 / API 用法（技术分享） | Code Slide |
| 产品功能矩阵 / 章节总览 / 目录页（AC 标志性视觉） | NookPhone Showcase |
| 常见问题 / "为什么这么做" 复盘 / 技术 Q&A | FAQ |
| 章节大开场 / 产品愿景 / 沉浸式结尾页（岛屿插画为主） | Island Scene |
| 团队成员 / 品牌色板 / 分类目录 / 角色色谱（4-13 项） | Color Wheel |
| 用户原话 / 客户证言 / 产品哲学 / 品牌口吻金句（"NPC 在说话"叙事感） | Dialogue Modal |
| 技术栈 / 能力矩阵 / 产品模块概览 / 团队职能图（中心 + 4-8 卫星） | Icon Constellation |
| 今日/本周/本月 · 方案 A/B/C · 多视角同主题（点击切换面板） | Tabs Switcher |
| 渐进披露 / 步骤详解 / 复盘清单 / 深度问题（默认折叠，点击展开） | Collapse Stack |
| 功能开关清单 / 特性对比 / 规格表 / "选择你的路线"（带控件状态） | Settings Panel |
季节子主题选择（可选）：
根据内容主题推断是否套用季节子主题（自动叠加色板覆盖 + 飘落装饰）：
| 用户语境关键词 | 推断主题 |
|---|---|
| 春 / 樱花 / 三月发布 / 春季焕新 / 年初规划 | spring |
| 夏 / 海岛 / 暑期 / 活力主题 / 发布会 | summer |
| 秋 / 枫叶 / 复盘 / 年中总结 / 十/十一月 | autumn |
| 冬 / 年终 / 年会 / 圣诞 / 雪 / 12 月 / 1 月 | winter |
| 与季节无关、或拿不准 | 不选（默认羊皮纸 + 岛屿绿） |
用 AskUserQuestion 同时展示大纲和推断主题，让用户确认或更换：
用户确认后进入 Phase 3。
首先读取 ${CLAUDE_PLUGIN_ROOT}/skills/animal-island-slides/html-template.md；如果需要为幻灯片添加入场动画，同步读取 ${CLAUDE_PLUGIN_ROOT}/skills/animal-island-slides/animation-patterns.md。然后：
data-slide="N" 从 0 开始顺序编号class="slide ... active"，其余只有 class="slide ..."<script> 块末尾（Tabs / Collapse / Settings 三段都是命中 0 元素就 no-op 的安全代码，遇到不确定就全部加上）
如果开启季节子主题（spring/summer/autumn/winter）：在 <body> 标签上加 data-theme="..."；把 html-template.md "季节子主题" section 的通用容器 CSS + 对应季节 CSS 一起追加到 BASE <style> 末尾；把对应季节的 HTML 装饰块插入到 <div class="deck"> 之后（与导航箭头同级）
如果开启 Time HUD / AC Cursor / Divider 氛围工具：见 html-template.md "氛围工具"section，按需把 CSS/HTML/JS 片段加进 BASE[演示文稿名称].html，路径在当前工作目录生成后：
open [文件名].html 在浏览器中打开.slide 有 height:100dvh; overflow:hiddenclamp().slide.entered .element 驱动 transition，不使用 animation: 直接写在元素上（装饰性背景循环动画除外）data-slide 编号连续无间断.，使提取内容落到用户当前目录）：
python3 "${CLAUDE_PLUGIN_ROOT}/skills/animal-island-slides/scripts/extract-pptx.py" [文件路径] .
_assets/ 文件夹中生成完成后，询问用户是否需要导出：
导出为 PDF：
bash "${CLAUDE_PLUGIN_ROOT}/skills/animal-island-slides/scripts/export-pdf.sh" ./[文件名].html
部署到 Vercel（生成永久分享链接）：
bash "${CLAUDE_PLUGIN_ROOT}/skills/animal-island-slides/scripts/deploy.sh" ./[文件名].html
如果 CLAUDE_PLUGIN_ROOT 未注入（例如用户直接 clone 仓库手动运行，而非通过 /plugin install），回退到仓库内相对路径 bash skills/animal-island-slides/scripts/export-pdf.sh ...，并提示用户参考 README 的安装说明。
修改已有 HTML 文件时的额外规则：
max-height: min(50vh,400px)animation:（用 .slide.active 驱动）