AI 技能/插件前端【免费下载链接】html-ppt-skillHTML PPT Studio — AgentSkill with 24 themes, 31 layouts, 20 animations for building professional HTML presentations项目地址https://gitcode.com/gh_mirrors/ht/html-ppt-skill点击查看免费下载本文围绕 GitHub 加速计划镜像仓库html-ppt-skill的中文官方文档README.zh-CN.md展开完整讲解这套 AgentSkill 的安装、核心资源、演讲者模式、放图版式、自定义 LOGO 与 PNG 导出等全部关键能力。读完你将掌握一行命令把技能装进任意 Agent用 token 驱动换皮、布局拼装、动效装饰三步产出一份可交互、可演讲、可导出的专业 HTML 演示文稿并能用S键打开带逐字稿的演讲者视图完成双屏演讲。html-ppt-skill 是一套面向 AI Agent 的演示文稿创作技能AgentSkill交付的是纯静态 HTML/CSS/JS 资源36 套主题、15 套完整 deck 模板、36 种单页布局、47 个动效27 个 CSS 20 个 Canvas FX以及全新的演讲者模式像素级完美预览 逐字稿提词器 计时器。项目采用 MIT 协议作者为 lewis。整套体系零构建、运行时不发请求任何支持 AgentSkill 的 AgentClaude Code / Codex / Cursor / OpenClaw 等安装后即可调用。设计理念为什么这套体系零构建也能很专业在深入使用前先理解它的四条底层设计原则见 README.zh-CN.md 与源码Token 驱动的设计系统。所有颜色、圆角、阴影、字体决策都定义在 assets/base.css 的:root变量里由当前主题文件覆盖。改一个变量整份 deck 优雅地重排。例如默认 token 中--accent: #3b6cff、--radius: 18px、字体栈--font-sans: Inter,Noto Sans SC,-apple-system,...而cyberpunk-neon主题见 assets/themes/cyberpunk-neon.css则把--accent换成#ff2bd6、把--font-display换成JetBrains Mono并额外声明--accent-ink: #0b1024保证文字对比度达标。Iframe 隔离预览。主题 / 布局 / 完整 deck 的 showcase 都用iframe渲染确保每个预览都是真实、独立的渲染结果样式互相不污染。零构建。纯静态 HTML/CSS/JS只有 webfont / highlight.js / chart.js可选走 CDN。中英双语一等公民。fonts.css预导入 Noto Sans SC / Noto Serif SC中文 deck 无需额外配置。安装一行命令以及三种离线方案官方推荐安装方式是通过 skills CLI 拉取仓库npx skills add https://github.com/lewislulu/html-ppt-skill装好后对 agent 直接说需求即可例如做一份 8 页的技术分享 slides用 cyberpunk 主题 把这段 outline 变成投资人 pitch deck 做一个小红书图文9 张白底柔和风 做一份带演讲者模式的产品分享我想要有逐字稿npx skills add url需要目标机器能联网。仓库提供了三种对网络依赖依次递减的离线安装方式详见 README.zh-CN.md1. 从本地副本安装。在任意能联网的机器上取到仓库把整个目录搬过去再把 CLI 指向本地目录git clone https://github.com/lewislulu/html-ppt-skill npx skills add ./html-ppt-skill2. 纯手工拷贝——不需要 Node也不需要 CLI。一个 skill 就是一个根目录下放着SKILL.md的文件夹放进 agent 会扫描的目录即可Agent项目级全局Claude Code.claude/skills/html-ppt/~/.claude/skills/html-ppt/Codex.agents/skills/html-ppt/~/.codex/skills/html-ppt/Cursor.agents/skills/html-ppt/~/.cursor/skills/html-ppt/OpenCode.agents/skills/html-ppt/~/.config/opencode/skills/html-ppt/Gemini CLI.agents/skills/html-ppt/~/.gemini/skills/html-ppt/Windsurf.windsurf/skills/html-ppt/~/.codeium/windsurf/skills/html-ppt/mkdir -p ~/.claude/skills cp -R html-ppt-skill ~/.claude/skills/html-ppt ls ~/.claude/skills/html-ppt/SKILL.md # 必须存在运行时只需要SKILL.md、assets/、templates/、references/、scripts/docs/是约 4.6 MB 的 README 配图离线拷贝时可以删掉。3. 完全不用 agent。模板就是普通静态文件可以直接用./scripts/new-deck.sh my-talk open examples/my-talk/index.html断网能用吗能只有一个前提要说清楚。主题、布局、动效、演讲者模式、PNG 导出全部是本地静态 HTML/CSS/JS零构建、运行时不发请求。唯一的远程依赖是 assets/fonts.css它import了 Google Fonts。断网时这些 import 直接失败浏览器回落到 assets/base.css 里已经声明好的系统字体栈-apple-system/ Helvetica / Georgia / Menlodeck 照常渲染只是字体不同。要在离线环境锁定字体把fonts.css换成指向自带字体文件的font-face规则或删掉这些 import、接受系统字体。Skill 内容一览数量位置演讲者模式新增S键 /?previewN主题36assets/themes/*.css完整 deck 模板15templates/full-decks/ /单页布局36templates/single-page/*.html✨CSS 动画27assets/animations/animations.cssCanvas FX 动画20assets/animations/fx/*.js️Showcase deck4templates/*-showcase.html验证截图56scripts/verify-output/36 套主题一行link换整份 deck 的皮全部主题列表minimal-white、editorial-serif、soft-pastel、sharp-mono、arctic-cool、sunset-warm、catppuccin-latte、catppuccin-mocha、dracula、tokyo-night、nord、solarized-light、gruvbox-dark、rose-pine、neo-brutalism、glassmorphism、bauhaus、swiss-grid、terminal-green、xiaohongshu-white、rainbow-gradient、aurora、blueprint、memphis-pop、cyberpunk-neon、y2k-chrome、retro-tv、japanese-minimal、vaporwave、midcentury、corporate-clean、academic-paper、news-broadcast、pitch-deck-vc、magazine-bold、engineering-whiteprint。每个主题都是一份纯 CSS token 文件覆盖 assets/base.css 的:root变量。换皮只需改一行linklink relstylesheet idtheme-link href../assets/themes/aurora.css在 templates/theme-showcase.html 可以浏览全部主题每一页用独立 iframe 渲染避免样式互相污染。运行时按下T键即可循环切换主题主题列表通过html />15 套完整 deck 模板直接改内容即可交付8 个从真实作品提炼的视觉语言7 个通用场景脚手架见 README.zh-CN.md提炼款xhs-white-editorial— 小红书白底杂志风graphify-dark-graph— 暗底 力导向知识图谱knowledge-arch-blueprint— 蓝图 / 架构图风hermes-cyber-terminal— 终端 cyberpunk 风obsidian-claude-gradient— 紫色渐变卡testing-safety-alert— 红 / 琥珀警示风xhs-pastel-card— 柔和马卡龙图文dir-key-nav-minimal— 方向键极简场景款pitch-deck— 投资人 pitchproduct-launch— 产品发布会tech-sharing— 技术分享weekly-report— 周报xhs-post— 小红书图文9 页 3:4course-module— 教学模块presenter-mode-reveal — 完整分享模板每一页都带 150–300 字的示例逐字稿围绕S键演讲者模式专门设计每个模板都是自包含的文件夹用 scoped.tpl-nameCSS所以多个模板可以同时加载不会互相污染。在 templates/full-decks-index.html 可以看全套 gallery。重要使用完整模板时一定要通过脚手架./scripts/new-deck.sh my-talk -t pitch-deck来生成不要手工复制——模板内部的../../../assets/是相对于它自己位置的路径手工拷贝会落在错误的目录深度。脚手架会按 deck 的实际落点重算 assets 前缀并逐条校验每个引用都能解析见下文快速开始。36 种单页布局从模板复制section而不是从零手写布局清单cover · toc · section-divider · bullets · two-column · three-column · big-quote · stat-highlight · kpi-grid · table · code · diff · terminal · flow-diagram · timeline · roadmap · mindmap · comparison · pros-cons · todo-checklist · gantt · image-hero · image-grid · chart-bar · chart-line · chart-pie · chart-radar · arch-diagram · process-steps · cta · thanks。每个布局文件templates/single-page/*.html都带真实的示例数据拖进 deck 立即看得到效果。标准做法是打开匹配的布局文件 → 复制section classslide…/section块 → 粘贴进自己的 deck → 替换示例数据 → 设置data-title供总览网格使用→ 添加div classnotes写演讲备注。放图片的版式五个版式 一个.img-frame原语五个版式用的是真实img按这一页要放几张图挑我有…版式一张截图 / 示意图 / 图表image-single.html—— 完整显示不裁剪一张想撑满整页的照片image-full-bleed.html—— 整页铺满底部压暗保证标题可读一张图 一段论述image-text-split.html—— 各占一半加flip左右互换36 张图image-gallery.html—— 等大网格每张一句话改版前 / 改版后image-compare.html—— 两侧严格同尺寸它们共用 assets/base.css 里的同一个原语.img-frame拥有宽高比和裁剪img用object-fit填满它figure classimg-frameimg srcshot.png alt/figure !-- 裁剪填满 -- figure classimg-frame containimg srcdiagram.svg alt/figure !-- 完整显示 --比例和裁剪由框决定--img-ratio默认16/10--img-pos控制object-position不由图片决定——竖图、方图、超宽图直接换src就行版式不用改。.img-scrim/.img-cap/.img-tag分别是压暗层、图注和角落胶囊标签。截图、示意图、LOGO 一律用.img-frame.containletterbox 而非裁剪避免丢失信息。示例图放在 assets/demo-images/是手写的 SVG每个约 1KB这些版式离线也能正常渲染。注意image-grid.html和image-hero.html是纯渐变占位布局无img想要 bento 墙的形态但不提供图片时使用。47 个动效27 个 CSS 动画 20 个 Canvas FXCSS 动画轻量— 方向性淡入、rise-in、zoom-pop、blur-in、glitch-in、typewriter打字机、neon-glow霓虹光晕、shimmer-sweep流光、gradient-flow渐变流动、stagger-list列表错开入场、counter-up数字滚动、path-draw路径绘制、morph-shape、parallax-tilt、card-flip-3d、cube-rotate-3d、page-turn-3d、perspective-zoom、marquee-scroll、kenburns、ripple-reveal、spotlight等共 27 个命名动画完整列表见 assets/animations/animations.css运行时也维护了一份同名数组用于A键循环演示。使用方式给任意元素加data-animfade-up或classanim-fade-up列表/网格用anim-stagger-list做错序入场翻页时 assets/runtime.js 的go()会自动重新触发当前 slide 内所有[data-anim]元素的动画。用法建议来自 references/authoring-guide.md封面用rise-in/blur-in正文 hero 元素用fade-up统计页用counter-up章节页用perspective-zoom/cube-rotate-3d结尾用confetti-burst每页只挑一个强调动画其余保持克制。Canvas FX电影级—particle-burst粒子爆发、confetti-cannon彩带、firework烟花、starfield星空、matrix-rain代码雨、knowledge-graph力导向知识图谱、neural-net神经网络脉冲、constellation星座连线、orbit-ring轨道环、galaxy-swirl星系漩涡、word-cascade、letter-explode、chain-react、magnetic-field、data-stream、gradient-blob、sparkle-trail、shockwave、typewriter-multi、counter-explosion。每一个都是手写的 canvas 模块位于 assets/animations/fx/。用法div />为什么预览是像素级完美的每个预览卡片是一个iframe加载的是同一份 deck HTML 文件只是 URL 多了?previewN参数。assets/runtime.js 的getPreviewIdx()检测到这个参数后进入单页锁定模式只渲染第 N 页、隐藏所有 chrome进度条、notes 抽屉、总览网格等。所以预览使用和观众视图完全相同的 CSS、主题、字体、viewport颜色和排版保证 100% 一致外层再用 CSStransform: scale()把 1920×1080 画布等比缩放到卡片宽高不变形。丝滑翻页零闪烁iframe 初次加载后就常驻。翻页时演讲者窗口通过postMessage({type:preview-goto, idx:N})通知 iframeiframe 内的 runtime 只切换.is-activeclass ——不重新加载、不白屏、不闪烁。主题切换同理通过preview-theme消息更换link idtheme-link。两个窗口观众页 演讲者弹窗则通过以html-ppt-presenter-pathname命名的BroadcastChannel同步go与theme事件在任一窗口按 ← → 翻页另一边自动同步。四个磁吸卡片CURRENT— 当前页像素级完美预览iframe 加载?previewNNEXT— 下一页预览同样像素级完美到最后一页时显示 END OF DECKSPEAKER SCRIPT— 逐字稿字号 18px支持strong橘色加粗、em蓝色强调、code等 inline 样式可滚动TIMER— 计时器 页码如3 / 8 Prev / Next / Reset 按钮交互规则拖动卡片header带彩色圆点和标题的顶部条移动位置拖动右下角三角手柄调整大小位置/尺寸自动保存到localStorage每个 deck 独立 key下次打开恢复底部 重置布局 按钮恢复默认排列。源码层面还做了防御处理恢复的布局会经过sanitizeLayout()钳制回视口内卡片默认几何CSS 兜底保证即使内联脚本被 CSP 拦截四个卡片也立即可用。逐字稿写作三铁律提示信号不是讲稿— 关键词加粗过渡句独立成段。错误写法是整段念稿式的大家好欢迎来到今天的分享。今天我将要给大家介绍……正确写法是把核心词用strong加粗、每段 1–3 句、结尾自然引出下一页。每页 150–300 字— 约 2–3 分钟/页的节奏。少于 150 字提示不够讲到一半会卡多于 300 字根本来不及扫完。用口语不用书面语— 所以 不是 因此这个 不是 该。书面语与口语对照因此→所以、该方案→这个方案、然而→但是/不过、进行优化→优化一下、我们将会→我们会/接下来、综上所述→所以简单来说。写完读一遍听起来像说话才对。必备 HTML 结构S键演讲者视图是runtime.js内置的所有 full-deck 模板都自动支持。给任意已有模板加演讲者模式只需两件事每张 slide 末尾加aside classnotes或div classnotes写逐字稿确认引入了assets/runtime.js。标准结构!DOCTYPE html html langzh-CN>body># 从 base 模板新建一个 deck ./scripts/new-deck.sh my-talk # 也可以指定完整 deck 模板和任意输出目录。 # assets 路径会按 deck 的实际位置算出来并逐条校验能否解析。 ./scripts/new-deck.sh my-talk ~/decks -t pitch-deck # 浏览所有内容 open templates/theme-showcase.html # 全部 36 主题iframe 隔离 open templates/layout-showcase.html # 全部 36 布局 open templates/animation-showcase.html # 全部 47 动效 open templates/full-decks-index.html # 全部 15 个完整 deck # 用 headless Chrome 导出 PNG ./scripts/render.sh templates/theme-showcase.html ./scripts/render.sh examples/my-talk/index.html 12new-deck.sh 的完整用法scripts/new-deck.sh 用法为new-deck.sh name [output-parent-dir] [-t template]name必填输出父目录缺省为skill/examples可以是绝对路径或相对当前目录的相对路径-t可指定deck默认、某个 full-deck 名如pitch-deck、某个 single-page 名如arch-diagram或任意.html文件 / full-deck 目录的路径。从源码看脚本做了三件关键的事一是把模板复制到目标位置二是用relpath()计算从 deck 目录回退到 skill 根的相对前缀并用rewrite_assets()重写所有assets/引用——这解释了为什么templates/deck.html用../assets/、templates/single-page/*.html用../../assets/、templates/full-decks/*/index.html用../../../assets/而绝不能手工改这个深度三是对index.html里每一个本地href/src/url()引用做存在性自检lexjoin()按浏览器语义拼接路径任何一个断链都会让脚本以非零状态退出并报错。render.sh 的完整用法scripts/render.sh 用法为render.sh html-file [N|all] [out-dir]默认渲染第 1 页为单张 PNG传数字 N 则通过#/k深链逐页渲染 N 张传all则自动统计.slide数量可指定输出目录多页时缺省为文件同目录下的name-png/。输出默认 1920×1080小红书 3:4 场景可在脚本里改--window-size如 1242×1660。脚本要求本机装有 headless Chrome默认 macOS 路径/Applications/Google Chrome.app/Contents/MacOS/Google Chrome并以文件是否真的写出作为成功信号Chrome 即使没写出文件也常返回 0。项目结构速览html-ppt-skill/ ├── SKILL.md agent 入口 ├── README.md 英文 README ├── README.zh-CN.md 本文件 ├── references/ 详细文档 │ ├── themes.md 36 主题 使用场景 │ ├── layouts.md 36 布局 │ ├── animations.md 27 CSS 20 FX 目录 │ ├── full-decks.md 15 完整 deck 模板 │ ├── presenter-mode.md 演讲者模式 逐字稿指南 │ └── authoring-guide.md 完整工作流 ├── assets/ │ ├── base.css 共享 tokens 基础组件 │ ├── fonts.css web 字体引入 │ ├── runtime.js 键盘导航 演讲者模式 总览 │ ├── themes/*.css 36 主题 token 文件 │ └── animations/ │ ├── animations.css 27 个命名 CSS 动画 │ ├── fx-runtime.js 进入 slide 自动初始化 [data-fx] │ └── fx/*.js 20 个 Canvas FX 模块 ├── templates/ │ ├── deck.html 最小起步模板 │ ├── theme-showcase.html iframe 隔离的主题 tour │ ├── layout-showcase.html 全部 36 布局 │ ├── animation-showcase.html 47 动画 slide │ ├── full-decks-index.html 15 deck gallery │ ├── full-decks/name/ 15 个 scoped 多页 deck 模板 │ └── single-page/*.html 36 个布局文件带示例数据 ├── scripts/ │ ├── new-deck.sh 脚手架 │ ├── render.sh headless Chrome → PNG │ └── verify-output/ 56 张自测截图 └── examples/demo-deck/ 完整可运行的示例 deck结语html-ppt-skill 的价值在于把专业演示文稿设计沉淀成了可直接被 Agent 调用的静态资源系统主题即 token、布局即模板片段、动效即声明式属性而演讲者模式则把做 PPT延伸到讲 PPT的完整闭环。上手路径很清晰——先用./scripts/new-deck.sh脚手架生成 deck按需挑选主题与布局最后用S键与render.sh分别完成演讲与交付。项目协议为 MIT © 2026 lewis更多细节可继续查阅 references/themes.md、references/layouts.md、references/animations.md、references/full-decks.md 与 references/authoring-guide.md。赞分享AI 技能/插件前端【免费下载链接】html-ppt-skillHTML PPT Studio — AgentSkill with 24 themes, 31 layouts, 20 animations for building professional HTML presentations项目地址https://gitcode.com/gh_mirrors/ht/html-ppt-skill点击查看免费下载相关推荐html-ppt完全指南AI驱动的HTML演示文稿引擎36主题×47动效一键生成专业PPThtml ppt完全指南AI驱动的HTML演示文稿引擎36主题×47动效一键生成专业PPT html pptHTML PPT Studio是一款 AIAI 技能/插件前端html-ppt-skill 演讲者模式模板深度解析磁吸卡片式 Presenter View 与逐字稿工作流html ppt skill 演讲者模式模板深度解析磁吸卡片式 Presenter View 与逐字稿工作流 本篇围绕 html ppt skill 仓库中的AI 技能/插件前端html-ppt-skill 的 graphify-dark-graph 模板暗底力导向知识图谱演示稿的完整拆解html ppt skill 的 graphify dark graph 模板暗底力导向知识图谱演示稿的完整拆解 本文以仓库内置 full deck 模板 gAI 技能/插件前端上一篇iOS动画安全最佳实践Spring库的安全编码指南下一篇Mole生态共建打造macOS系统优化能力的开放平台创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
