TypingMindTypingMindThe best frontend for AI
Modern Ppt logo

Modern Ppt

Community
lainshao
modern-ppt

生成现代分享/投屏风格的单文件网页 PPT(横向翻页·专业极简风·干净排版·3 套可切配色)。当用户要做线下分享、演讲、发布会的网页 deck,或提到「modern ppt」「做个分享 PPT」「投屏 deck」「网页 PPT」「把这段做成 slides」时使用。内置 12 个版式 + 交互动效(count-up / Chart.js 图表) + 3 套配色(默认安全橙,可切明亮蓝/柔和粉)+ 一套排版硬规范(单一 body 字号 token、标题靠分隔线、正文不上色、底部安全区等),产出一致、可直接投屏放映。

Overview

Publisherlainshao
Repositorymodern-ppt
Skill namemodern-ppt
Stars
12
Forks
1
Bundled files
18
LicenseAGPL-3.0
Links
Skill sourceRepositoryHomepage
  • 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.

  • 18 bundled files

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

  • Open source

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

Installation

Install the Modern Ppt 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/lainshao/modern-ppt/tree/main
  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/lainshao/modern-ppt.git \
  .claude/skills/modern-ppt
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Modern Ppt 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 Modern Ppt 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 Modern Ppt 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.

Modern PPT · 现代投屏网页 deck

生成一份单文件 HTML 的横向翻页 deck:专业极简风、干净克制的排版,内置 12 版式 + 交互 + 3 套配色(默认安全橙,放映按 1/2/3 切明亮蓝 / 柔和粉)。键盘 ← →、滚轮、触屏翻页,ESC 出索引,B 切静态模式。默认就是"能直接投屏放映 / 发给别人 fork 改"的成品。

来源与许可(必读):本 skill 衍生自 规藏 guizang-ppt-skill(© op7418,AGPL-3.0)——复用了它的 Swiss 模板底盘、WebGL/ASCII 背景、翻页/索引/动效引擎。在其上做了:安全橙主题(现扩为 3 套可切配色)、一整套投屏排版规范(下文)、12 版式 + 交互动效、已验证版式裁剪、已修模板 bug。因此本 skill 整体仍是 AGPL-3.0:再分发须保留 LICENSE + 本段署名 + 注明改动;放公司内部仓前先过开源合规(AGPL 常被禁)。生成出来的最终 deck 不必写署名。模板示例页只用通用/公开内容,别烤进项目私货(否则再分享前要现场清洗——本 skill 踩过)。

工作流(动手前先走)

  1. 澄清(用户只给主题/模糊想法时):受众与场景?时长(15min≈10页 / 30min≈18-22页)?默认配色(❶ 黑+橙 / ❷ 明亮蓝 / ❸ 柔和三文鱼粉——3 套都内置,放映时按 1/2/3 随时切,这里只是先定个默认;不确定就用默认黑橙)?有无素材/数据?有无硬约束(必须含 X / 不能出现 Y)?数字一律来自用户素材,缺就标「待补」,绝不编造。
  2. 先定大纲再动手:从源文档 / URL 做 deck,先找出那一句 thesis 当锚点(如「上下文会填满就变笨」),全篇结论先行、围着它转。每页一个观点(标题即观点);用"叙事弧"(钩子→定调→主体→转折→收束);分幕的长 deck 每 4-5 页插一张 divider(深墨底 + 幽灵编号,见排版规范 §9)。和用户对齐大纲再写。先砍后写:第一版总会过载,删页 / reframe 比堆料更出彩(comprehensive ≠ persuasive)。
  3. 拷模板:cp assets/template.html 项目/index.html。它是完整成品——18 页展示全部 12 版式 + 3 套配色 + 交互(count-up / Chart.js / 缩略图墙 / 章节 divider),已含全部 CSS/JS。改 <title>,留下要用的版式页、删掉不用的,把内容替换成用户的。
  4. 先样页后放量:先做封面 + 2-3 张代表页 → 截图 review(见下"验证") → 用户拍板 → 再批量产剩余页。每轮都截图。
  5. 自检(必跑,不许跳):node scripts/deck-lint.mjs <deck.html>——机器检 斜体/裸字号/单格高光/无源数字/reduce-motion 陷阱/元叙述,FAIL 修完才交付,WARN 逐条确认;再逐条过下方硬规则 + references/排版规范.md 里机器检不了的(对齐/留白/呼吸感)。

排版硬规则(产出一致的关键 · 详见 references/排版规范.md)

  1. 正文走单一 --fs-body token(投屏 ≈21px;视频剪辑改 32px)。所有描述/段落/卡片说明/表格单元格都 var(--fs-body),禁止各写各的裸 font-size。
  2. 每页字号 ≤ 几档:页标题 / 卡片标题 / 正文 / mono 角标 + 大数字特例。字号编码层级。
  3. 栏目标题靠"分隔线 + 留白 + 角色对比"立住,不靠加大字号。用 .col-head(安静灰字 + border-bottom:2px solid ink)。加大加粗反而和正文打架、更难读。
  4. 正文不上色:accent / 品牌色只给标题关键词、图表数据、1px 分隔线;正文强调 = 黑色加粗,不用斜体。
  5. 内容紧跟标题连排,不锚底:禁止 margin-top:auto 把内容推到卡片底,造成"标题在天上、内容在地下"。
  6. 底部安全区 ≥6vh(.canvas-card 底 padding):满高内容块不要贴右下角导航提示/分页点。
  7. 编号列表(01/02/03)用单一 grid 共享列轨 + font-feature-settings:'tnum',否则比例字体下数字宽度不同、各行标题左缘参差。
  8. 强弱用 5 格方块刻度(领跑=5 满格),可横向扫读;别只写文字。
  9. 卡片"小标在上"而非右上角标(长标题会和角标重叠);一组卡别随手单格高光(高光要么有数据/焦点语义,要么别加)。
  10. accent 不满屏铺(安全橙满屏刺眼):封面/幕封用深墨底 + 关键词上色;split 收束页半屏橙可接受。

12 个版式(模板已内置示例页,cp 后改文案即可)

三层分类,每层 divider 分幕(见排版规范 §9):

  • ① 基础骨架:Cover 封面 · Agenda 目录 · Page divider 章节页 · Closing 收束
  • ② 数据·对比·图表:Stat grid(大数字 count-up 从 0 滚)· Chart(Chart.js 柱状+折线,逐柱升起/自动绘线 + hover tooltip + 折线标 QoQ%)· Comparison 对比矩阵(标准×选项 + 5 格刻度,主推列高亮)
  • ③ 叙事·流程·内容:Two-column 图文分栏(右栏可换 图/mock/图表/代码终端)· Three-column 三栏卡(3-grid)· Strategy house 战略房子图(SVG OGSM:橙屋顶使命 + 主题列×编号目标卡 + 价值观地基)· Process/Timeline 流程时间线 · Quote 金句
  • 外加 缩略图墙:live 克隆全部版式,一屏预览,自动跟随配色。

已验证版式组件(只用这些,别发明)

  • 卡片:.sub-card(.accent/.ink)、.sub-grid-3-2(六格)、.triad(3-grid 三栏卡)
  • 数据:.cnt(count-up 数字)、.stat-card、canvas[data-chart="bar|line"](Chart.js)、5 格方块刻度、.cmp(对比矩阵)
  • 结构:.stack-row/.stack-block、.duo-compare(双轨对照 + .vrule)、.timeline-v/.timeline-h、.house-svg(战略房子图)
  • 文字:.h-xl-zh(页标题)、.lead/.body(正文)、.t-cat/.t-meta(mono 角标)、.mk(accent 关键词)
  • 版面:.split-half(收束)、slide.dark + 幽灵大编号(章节 divider)、.code-card(终端)、.chart-card、.dot-mat(点阵)
  • 18 页示例就是这些组件的活样例,直接 copy 改文案最快。

交互 / 动效(模板已接好,</body> 前的 IIFE 自动跑)

  • 数字 count-up:<span class="cnt" data-to="85" data-dec="0">85</span> → 翻到该页从 0 滚到 85(tnum 防抖)。
  • 图表:<canvas data-chart="bar"> / data-chart="line",进页自动初始化,逐柱升起 / 自动绘线 + hover tooltip;折线每点标 QoQ%。改数据在 IIFE 的 chartConfig。
  • Agenda 不做逐项点亮(2026-07-08 用户拍板):目录页静态全亮,所有条目常态可读——放映时不需要一项一项过,别再给 agenda 加 step 交互或 data-agenda-steps。
  • 三栏逐张点亮(默认开):凡是 .triad 三栏页默认就带 → ←→/滚轮每次高亮一张 .triad-card、其余转灰,讲到哪栏哪栏才彩色,到最后一张再翻页。高亮色走 var(--accent),自动跟随橙/蓝/粉配色。适合"三件事逐个讲"的节奏。不想要就给 .triad 加 data-no-steps(如 <div class="triad" data-no-steps>,恢复满色静态)。缩略图墙里的三栏不受影响,保持满色。
  • 缩略图墙:.thumb-wall[data-thumb-wall] → 进页克隆全部版式做缩略图,自动跟随配色。

配色(3 套 · 放映时按 1/2/3 或 URL ?scheme=)

  • 1 = 黑+橙(默认,深色页保留)· 2 = 明亮蓝(纯白底)· 3 = 柔和三文鱼粉(暖白底)。
  • 蓝/粉两套自动给 <body> 加 .lite → 深色页(封面/数据/章节/金句)翻浅底。换/加配色:改 IIFE 的 SCHEMES 对象(覆盖 --paper/--ink/--accent 等 CSS 变量)。单套配色只用一个 accent。
  • 设默认配色(用户在澄清步选了蓝/粉时):在 IIFE 末尾加一行 applyScheme('blue')(或 'salmon'),这份 deck 打开就是那套;1/2/3 仍可现场切。

已知坑(别重踩)

  • 截图验证陷阱:Chrome 后台标签会冻结动画时钟,截图会拍到"动画第一帧=空白"——不是 bug,前台放映正常。验证动效先按 B 切静态模式(window.__setLowPowerMode(true,{persist:false}))再逐页截图。
  • 只用上面列的组件:模板未带 CSS 的花式版式(matrix/four-cards/loop 等)直接用会崩。
  • 改单文件用脚本/正则时:锚唯一串,改完数 section 数自检(定位串撞车会误删页)。
  • 配色翻浅底(.lite)覆盖内联白字:motion 动效会把内联 color:#fff 归一化成 color: rgb(255, 255, 255),body.lite .slide.dark 的选择器要同时匹配 #fff 和 rgb(255, 255, 255) 两种写法,否则白字在浅底上隐身。

预览

bash
open 项目/index.html   # macOS,无需服务器;断网时 motion 自动降级为无动画可读

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 Modern Ppt AI skill do?

生成现代分享/投屏风格的单文件网页 PPT(横向翻页·专业极简风·干净排版·3 套可切配色)。当用户要做线下分享、演讲、发布会的网页 deck,或提到「modern ppt」「做个分享 PPT」「投屏 deck」「网页 PPT」「把这段做成 slides」时使用。内置 12 个版式 + 交互动效(count-up / Chart.js 图表) + 3 套配色(默认安全橙,可切明亮蓝/柔和粉)+ 一套排版硬规范(单一 body 字号 token、标题靠分隔线、正文不上色、底部安全区等),产出一致、可直接投屏放映。

Why use Modern Ppt on TypingMind?

Because you install it once and use it with any model. Modern Ppt 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 Modern Ppt in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/lainshao/modern-ppt/tree/main. 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 Modern Ppt?

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 Modern Ppt?

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

Is the Modern Ppt AI skill free?

Yes. It is published on GitHub by lainshao under the AGPL-3.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
affaan-m logo

Frontend Slides

affaan-m
CommunityPopular

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a…

40.4K
270.2K
2 files
View
affaan-m logo

Plan Canvas

affaan-m
CommunityPopular

Open plans and HTML artifacts in a local browser canvas where the human annotates elements, chats, and approves or requests changes without leaving the page. Use when presenting a plan for review, or…

40.4K
270.2K
1 files
View
mattpocock logo

Improve Codebase Architecture

mattpocock
CommunityPopular

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

22.3K
264.4K
2 files
View
mattpocock logo

Grilling

mattpocock
CommunityPopular

Grill the user relentlessly about a plan, decision, or idea. Use when the user wants to stress-test their thinking, or uses any 'grill' trigger phrases.

22.3K
264.4K
1 files
View

Set up your own AI workspace now

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