Animal Island Slides
A Claude Code skill that turns a prompt — or a .pptx — into a polished, single-file HTML deck in Animal Crossing: New Horizons style.
一个 Claude Code 插件：把一句话指令或一份 .pptx 直接变成动物森友会风格的零依赖 HTML 演示文稿。
Demo / 演示
What is this?
Animal Island Slides turns a paragraph of intent — or an existing .pptx file — into a polished, zero-dependency, single-file HTML deck inspired by Animal Crossing: New Horizons.
- One file, zero dependencies. No npm, no framework, no build step. Open the
.html in any browser.
- Viewport-locked. Every slide is
height: 100dvh; overflow: hidden. Content that doesn't fit gets split into a new slide — never scrolled.
- One opinionated theme, on purpose. Most AI slide generators converge on the same Inter-on-white aesthetic. This one always looks like Animal Crossing, and that is the differentiator.
它要解决什么
通用的 AI 幻灯片生成器，产出常常长得都一样：Inter 字体、纯白背景、靛蓝渐变。这个项目反过来——锁死一套有性格的设计系统（动物森友会的羊皮纸色、岛屿绿、按钮按压感、飘动的树叶），让 Claude 只负责"内容编排 + 布局选型"，不再自由发挥审美。
结果：每张幻灯片都是同一种性格，且都不像默认的 AI 产物。
Install / 安装
Requires Claude Code. See Claude Code plugins docs.
# 1) Add this marketplace inside any Claude Code session
/plugin marketplace add caigee-cmd/animal-island-slides
# 2) Install the skill
/plugin install animal-island-slides
Or clone manually into your plugins directory:
git clone https://github.com/caigee-cmd/animal-island-slides \
~/.claude/plugins/animal-island-slides
Quick Start / 快速上手
In any Claude Code session, just ask:
帮我做一份产品发布会的幻灯片
or:
Make me a slide deck for a product launch
Claude will:
- Ask 5 quick questions (purpose, tone, length, content, language).
- Draft an outline (cover → bullets → grid → timeline → close) and confirm with you.
- Generate a single
.html file in your current working directory.
- Open it in your browser.
To convert a .pptx:
把 ~/Downloads/Q3-review.pptx 转成动森风格
Speaker notes, embedded images and slide text are all preserved as input — Claude re-composes them into the native layout grammar instead of literally copying the original geometry.
Features / 功能一览
- 23 layouts — Cover, Card Grid, Bullets, Two Column, Quote + Checklist, Pull Quote, Big Stat Hero, Timeline, Comparison, Stat Strip, Process Flow, Image Hero, Code, NookPhone Showcase, FAQ, Section Divider, Island Scene, Color Wheel, Dialogue Modal, Icon Constellation, Tabs Switcher, Collapse Stack, Settings Panel.
- 4 seasonal sub-themes — Spring Blossom / Summer Coast / Autumn Harvest / Winter Snow. Activated via
data-theme on <body>; each swaps ~15 CSS variables and adds a themed ambient decor layer (petals / waves + gulls / falling leaves / snow). Pure CSS keyframes, respects prefers-reduced-motion.
- Ambient tools — composable overlays for any layout: real-time Time HUD (corner clock), AC Game Cursor, and 5 divider pattern variants.
- Built-in SVG icon library — 10 inline icons matching the Animal Crossing UI aesthetic (no external icon font needed).
- Scenic utilities — reusable structural components (
ac-plank wooden title sign, ac-prop scene props, ac-inv-strip inventory bar) that enforce scene anchoring across all layouts.
- Strict density caps. Each layout has a maximum content cap; Claude auto-splits a new slide when you exceed it.
- Reusable design tokens. All colors, radii, shadows, and easing curves are CSS custom properties — change one variable, retheme the deck.
.pptx import. scripts/extract-pptx.py pulls text, images, and speaker notes from any PowerPoint file.- Export to PDF.
scripts/export-pdf.sh uses Playwright to render every slide at 1920×1080 into a single PDF.
- One-click deploy.
scripts/deploy.sh packages local assets and ships a Vercel preview URL.
- Accessible by default.
prefers-reduced-motion support, keyboard navigation (← → Space), swipe gestures, ARIA labels.
- Three modes. A: generate from scratch · B: convert from
.pptx · C: enhance an existing HTML deck without breaking density rules.
Philosophy / 设计宣言
Why not Inter, Roboto, or "modern minimal"?
Because that has become the default AI aesthetic — and every AI deck on the internet already looks like that. The opinionated constraint is the product. Specifically:
