Help us improve
Share bugs, ideas, or general feedback.
From animal-island-slides
用动物森友会风格生成零依赖 HTML 演示文稿,或将 .pptx 文件转换为同款风格。当用户想做幻灯片、做 PPT、做演示文稿,或提到动物森友会/岛屿风格时触发。
npx claudepluginhub caigee-cmd/animal-island-slides --plugin animal-island-slidesHow this skill is triggered — by the user, by Claude, or both
Slash command
/animal-island-slides:animal-island-slidesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
生成零依赖、单 HTML 文件的演示文稿,设计风格来自 animal-island-ui(动物森友会 React 组件库)。
Applies 10 pre-set color/font themes or generates custom ones for slides, documents, reports, and HTML landing pages.
Share bugs, ideas, or general feedback.
生成零依赖、单 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 驱动)