메뉴
用动物森友会风格生成零依赖 HTML 演示文稿，或将 .pptx 文件转换为同款风格。当用户想做幻灯片、做 PPT、做演示文稿，或提到动物森友会/岛屿风格时触发。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| 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 驱动）