TypingMindTypingMindThe best frontend for AI
LivePPT logo

LivePPT

Community
AIPMAndy
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.

Overview

PublisherAIPMAndy
RepositoryLivePPT
Skill nameLivePPT
Stars
84
Forks
16
Bundled files
40
LicenseApache-2.0
Links
Skill sourceRepository
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 40 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by AIPMAndy on GitHub. Read the source before you install it.

Installation

Install the LivePPT AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/AIPMAndy/LivePPT/tree/main/skills/public/LivePPT
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/AIPMAndy/LivePPT.git /tmp/LivePPT
mkdir -p .claude/skills
cp -r /tmp/LivePPT/skills/public/LivePPT .claude/skills/LivePPT
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable LivePPT in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads LivePPT on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so LivePPT is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

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

  • 默认路径：现有 Markdown 用 scripts/render_plan_to_html.py，README 用 scripts/build_from_readme.py，生成无需前端构建的单文件 HTML。
  • 只有明确需要复杂组件或应用状态时，再选 assets/templates/starter 里的 React/Vite 模板。
  • 没有内容时用 scripts/generate_showcase_plan.py 先生成草稿，再渲染。
  • 单文件生成器当前内置 neo-luxury、cyber-pulse、minimal-editorial 和 prism-command 四套主题。

Step 3: Build Scene System

  • 页面抽象为 Scene 组件，统一支持进入/退出动效。
  • 必须支持三种切换方式：点击按钮、键盘方向键、目录跳转。
  • 提供进度指示器与“当前屏序号/总屏数”。

Step 4: Implement Theme Switching

  • 单文件 HTML 生成器通过 --theme 切换内置主题；修改主题需要重新生成 HTML。
  • React/Vite Starter 使用 CSS 变量和 data-theme，可实现运行时主题切换。
  • scripts/add_theme.py 只生成主题 token CSS，并不会自动注册到 Python HTML 生成器。

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

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the LivePPT AI skill do?

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.

Why use LivePPT on TypingMind?

Because you install it once and use it with any model. LivePPT is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install LivePPT in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/AIPMAndy/LivePPT/tree/main/skills/public/LivePPT. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use LivePPT?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with LivePPT?

As many as you like. As long as a model supports skills, you can use LivePPT with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the LivePPT AI skill free?

Yes. It is published on GitHub by AIPMAndy under the Apache-2.0 license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

Related AI Skills

View all
openclaw logo

Canvas

openclaw
OrganizationPopular

Present hosted widget documents on a connected macOS panel and control panel visibility or navigation.

82.2K
391K
Instructions
View
openclaw logo

Diagram Maker

openclaw
OrganizationPopular

Create SVG/HTML or Excalidraw diagrams for concepts, architecture, flows, and whiteboards.

82.2K
391K
2 files
View
mattpocock logo

Grill With Docs

mattpocock
CommunityPopular

A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.

23K
273.1K
1 files
View
mattpocock logo

Grill Me

mattpocock
CommunityPopular

A relentless interview to sharpen a plan or design.

23K
273.1K
1 files
View

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇