# Liveppt > Build click-through cinematic web showcase pages with dynamic transitions and runtime style switching. Use when users ask for PPT alternatives, interactive launch pages, or high-end storytelling websites with multiple visual styles. Use when this capability is needed. - Skill: `tomevault-io/liveppt` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/liveppt` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/liveppt/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/liveppt --- # LivePPT ## Overview 把线性 PPT 请求升级为“点击切换的动态网页演示”。 默认产出中文内容，支持多主题切换、电影感转场、场景化叙事和可部署 Demo。 ## Trigger Scenarios - 用户说“不要传统 PPT，要网页演示、可点击翻页、酷炫高级感”。 - 用户要“同一份内容切换不同视觉风格（商务/科技/极简）”。 - 用户要“产品发布页、路演页、课程讲义页、案例展示页”且强调互动感。 - 用户要“开源模板 + 演示站 + 可复用主题系统”。 ## Input Contract 先收集以下最小输入： - 主题和目标受众（例如“AI 产品发布给技术决策者”）。 - 场景数量（建议 6-12 屏）。 - 视觉偏好（如 `neo-luxury`、`cyber-pulse`、`minimal-editorial`）。 - 必须展示的信息（产品亮点、数据、CTA、联系入口）。 ## Workflow ### Step 1: Define Narrative Spine - 输出一句话叙事：`谁在什么场景下遇到什么问题，我们如何带来可量化结果`。 - 固定页面结构：封面 -> 痛点 -> 方案 -> 证据 -> 架构 -> 价格/计划 -> CTA。 - 每屏只承载一个核心信息点，减少信息噪音。 ### Step 2: Scaffold Project - 默认技术栈：`React + Vite + Framer Motion + CSS Variables`。 - 使用 `scripts/generate_showcase_plan.py` 先产出阶段执行清单。 - 根据风格需求建立主题令牌：`color`, `typography`, `radius`, `shadow`, `motion`。 ### Step 3: Build Scene System - 页面抽象为 `Scene` 组件，统一支持进入/退出动效。 - 必须支持三种切换方式：点击按钮、键盘方向键、目录跳转。 - 提供进度指示器与“当前屏序号/总屏数”。 ### Step 4: Implement Theme Switching - 主题使用 CSS 变量和 `data-theme` 驱动。 - 风格切换不改文案和结构，只替换视觉令牌和动效参数。 - 使用 `scripts/add_theme.py` 生成新主题变量文件。 ### Step 5: Add Premium Motion - 必选动画：页面过渡、元素分层入场、hover 反馈。 - 可选动画：视差、光晕、3D rotate、颗粒背景。 - 控制节奏：默认 350-700ms，避免过快或眩晕。 ### Step 6: QA and Publish - 校验移动端和桌面端适配。 - Lighthouse 目标：Performance >= 85, Accessibility >= 90。 - 产出 Demo 链接和 README 截图/GIF 后再发布。 ## Quality Bar - 视觉一致性：同一主题内颜色、字体、阴影语义稳定。 - 交互一致性：所有 Scene 切换逻辑一致，避免跳屏。 - 可访问性：文本对比度达标，提供 `prefers-reduced-motion` 降级。 - 可复用性：新主题可以在 10 分钟内接入现有场景。 ## AI Delegation - AI 主导：结构草案、文案压缩、组件骨架、主题变量生成。 - 人类主导：品牌调性、最终审美判断、公开发布文案。 - AI 辅助：性能优化建议、动效微调建议、KPI 复盘建议。 ## Standard Deliverables - `showcase-outline.md`：逐屏大纲和核心信息。 - `theme-spec.md`：主题令牌定义和视觉说明。 - `demo-url`：可在线访问的演示页面。 - `release-note.md`：版本更新与用户价值说明。 ## Resources (optional) ### scripts/ - `scripts/generate_showcase_plan.py`：生成阶段化构建与发布执行清单。 - `scripts/add_theme.py`：根据参数生成主题 CSS 变量文件。 - `scripts/generate_release_note.py`：生成版本发布说明模板。 - `scripts/validate_skill.py`：执行必需文件检查和脚本 smoke test。 ### references/ - `references/design-system-playbook.md`：设计与动效规范。 - `references/style-presets.md`：预设主题定义与适配建议。 ### assets/ - `assets/templates/scene-map.md`：场景结构模板。 - `assets/templates/theme-spec.md`：主题定义模板。 ### examples/ - `examples/use-cases.md`：路演、课程、产品发布三类示例请求。 --- > Source: [AIPMAndy/LivePPT](https://github.com/AIPMAndy/LivePPT) — distributed by [TomeVault](https://tomevault.io).