LivePPT

分类: 工具与效率 | 上传者: AIPMAndy | 下载: 0 | 版本: v1.0（最新）

构建具有动态过渡和运行时风格切换的点击式电影网络展示页面。当用户要求 PPT 替代方案、交互式启动页面或具有多种视觉风格的高端讲故事网站时使用。

更新日志: Source: GitHub https://github.com/AIPMAndy/LivePPT

目录结构

当前层级: tree/main/skills/public/LivePPT/

📁 .github/
- 📁 ISSUE_TEMPLATE/
  - 📄 bug_report.md 503 B
  - 📄 config.yml 219 B
  - 📄 feature_request.md 554 B
- 📁 workflows/
  - 📄 validate-skill.yml 747 B
- 📄 PULL_REQUEST_TEMPLATE.md 667 B
📁 agents/
- 📄 openai.yaml 235 B
📁 assets/
- 📁 templates/
  - 📁 starter/
    
    📄 App.tsx 6.9 KB
    
    📄 DIFFERENTIATION.md 880 B
    
    📄 README.md 1.5 KB
    
    📄 styles.css 7.6 KB
  - 📄 scene-map.md 627 B
  - 📄 theme-spec.md 479 B
- 📄 demo.gif 1.1 MB
- 📄 demo.svg 3.9 KB
📁 demos/
- 📁 liveppt-promo/
  - 📄 execution-checklist.md 1.1 KB
  - 📄 index.html 1.3 KB
  - 📄 README.md 885 B
  - 📄 scene-map.md 1.9 KB
  - 📄 script.js 22.1 KB
  - 📄 styles.css 24.4 KB
  - 📄 theme-spec.md 1.1 KB
📁 examples/
- 📄 sample-launch-plan.md 1.8 KB
- 📄 use-cases.md 494 B
📁 references/
- 📄 design-system-playbook.md 968 B
- 📄 style-presets.md 1.9 KB
📁 releases/
- 📄 distribution-pack-2026-03-03.md 3.5 KB
- 📄 v0.1.0.md 1.1 KB
- 📄 v0.1.1.md 767 B
- 📄 v0.1.2.md 865 B
📁 scripts/
- 📄 add_theme.py 1.6 KB
- 📄 build_from_readme.py 4.1 KB
- 📄 build_showcase.py 2.8 KB
- 📄 generate_demo_gif.py 8.5 KB
- 📄 generate_distribution_pack.py 7.4 KB
- 📄 generate_release_note.py 1.6 KB
- 📄 generate_showcase_plan.py 2.6 KB
- 📄 render_plan_to_html.py 23.6 KB
- 📄 validate_skill.py 5.9 KB
📄 .gitignore 66 B
📄 CHANGELOG.md 2.5 KB
📄 CONTRIBUTING.md 1.8 KB
📄 LICENSE 2.0 KB
📄 LICENSE_EN.md 1.7 KB
📄 Makefile 1.0 KB
📄 MUSK_FIVE_STEP_ANALYSIS.md 3.6 KB
📄 OPEN_SOURCE_LAUNCH_CHECKLIST.md 1.3 KB
📄 README.md 6.0 KB
📄 README_EN.md 6.5 KB
📄 ROADMAP.md 1.0 KB
📄 SKILL.md 4.1 KB

SKILL.md

---
name: LivePPT
description: 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.
---

# 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`：路演、课程、产品发布三类示例请求。

登录后下载/点赞/收藏 ❤ 23 | ★ 0

LivePPT

目录结构

SKILL.md

举报内容

提示