메뉴
生成现代分享/投屏风格的单文件网页 PPT(横向翻页·专业极简风·干净排版·3 套可切配色)。当用户要做线下分享、演讲、发布会的网页 deck,或提到「modern ppt」「做个分享 PPT」「投屏 deck」「网页 PPT」「把这段做成 slides」时使用。内置 12 个版式 + 交互动效(count-up / Chart.js 图表) + 3 套配色(默认安全橙,可切明亮蓝/柔和粉)+ 一套排版硬规范(单一 body 字号 token、标题靠分隔线、正文不上色、底部安全区等),产出一致、可直接投屏放映。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | modern-ppt |
| description | 生成现代分享/投屏风格的单文件网页 PPT(横向翻页·专业极简风·干净排版·3 套可切配色)。当用户要做线下分享、演讲、发布会的网页 deck,或提到「modern ppt」「做个分享 PPT」「投屏 deck」「网页 PPT」「把这段做成 slides」时使用。内置 12 个版式 + 交互动效(count-up / Chart.js 图表) + 3 套配色(默认安全橙,可切明亮蓝/柔和粉)+ 一套排版硬规范(单一 body 字号 token、标题靠分隔线、正文不上色、底部安全区等),产出一致、可直接投屏放映。 |
生成一份单文件 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/2/3 随时切,这里只是先定个默认;不确定就用默认黑橙)?有无素材/数据?有无硬约束(必须含 X / 不能出现 Y)?数字一律来自用户素材,缺就标「待补」,绝不编造。cp assets/template.html 项目/index.html。它是完整成品——18 页展示全部 12 版式 + 3 套配色 + 交互(count-up / Chart.js / 缩略图墙 / 章节 divider),已含全部 CSS/JS。改 <title>,留下要用的版式页、删掉不用的,把内容替换成用户的。node scripts/deck-lint.mjs <deck.html>——机器检 斜体/裸字号/单格高光/无源数字/reduce-motion 陷阱/元叙述,FAIL 修完才交付,WARN 逐条确认;再逐条过下方硬规则 + references/排版规范.md 里机器检不了的(对齐/留白/呼吸感)。--fs-body token(投屏 ≈21px;视频剪辑改 32px)。所有描述/段落/卡片说明/表格单元格都 var(--fs-body),禁止各写各的裸 font-size。.col-head(安静灰字 + border-bottom:2px solid ink)。加大加粗反而和正文打架、更难读。margin-top:auto 把内容推到卡片底,造成"标题在天上、内容在地下"。.canvas-card 底 padding):满高内容块不要贴右下角导航提示/分页点。font-feature-settings:'tnum',否则比例字体下数字宽度不同、各行标题左缘参差。三层分类,每层 divider 分幕(见排版规范 §9):
.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(点阵)</body> 前的 IIFE 自动跑)<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。data-agenda-steps。.triad 三栏页默认就带 → ←→/滚轮每次高亮一张 .triad-card、其余转灰,讲到哪栏哪栏才彩色,到最后一张再翻页。高亮色走 var(--accent),自动跟随橙/蓝/粉配色。适合"三件事逐个讲"的节奏。不想要就给 .triad 加 data-no-steps(如 <div class="triad" data-no-steps>,恢复满色静态)。缩略图墙里的三栏不受影响,保持满色。.thumb-wall[data-thumb-wall] → 进页克隆全部版式做缩略图,自动跟随配色。1/2/3 或 URL ?scheme=)<body> 加 .lite → 深色页(封面/数据/章节/金句)翻浅底。换/加配色:改 IIFE 的 SCHEMES 对象(覆盖 --paper/--ink/--accent 等 CSS 变量)。单套配色只用一个 accent。applyScheme('blue')(或 'salmon'),这份 deck 打开就是那套;1/2/3 仍可现场切。B 切静态模式(window.__setLowPowerMode(true,{persist:false}))再逐页截图。.lite)覆盖内联白字:motion 动效会把内联 color:#fff 归一化成 color: rgb(255, 255, 255),body.lite .slide.dark 的选择器要同时匹配 #fff 和 rgb(255, 255, 255) 两种写法,否则白字在浅底上隐身。open 项目/index.html # macOS,无需服务器;断网时 motion 自动降级为无动画可读