pakco-html

pakco.html

pakco.html 是一个本地优先的 AI 生成演示文稿视觉风格菜单。它帮助用户无需从头描述风格：浏览可视化风格、复制可执行提示词，然后让 Claude Code / Codex / Hermes / WorkBuddy / TRAE Work 在稳定的视觉约束下生成演示文稿。

底层技能仍会以静态文件的形式制作专业的 HTML 演示文稿，包含主题、整套演示文稿风格卡片、布局、动画和提示词。一个主题文件 = 一种外观。一个布局文件 = 一种页面类型。一个动画类 = 一种入场效果。 所有页面都共用 assets/base.css 中基于设计令牌的设计系统。

安装

Codex

让 Codex 从仓库根目录安装 GitHub 技能：

Install this skill from GitHub: https://github.com/pakco77/pakco-html
Use the repo root as the skill path and install it as pakco-html.

终端备用方式：

curl -fsSL https://raw.githubusercontent.com/pakco77/pakco-html/refs/heads/main/scripts/install-codex.sh | bash

安装后重启 Codex，使其重新加载 ~/.codex/skills/pakco-html。

Claude Code / AgentSkill CLI

npx skills add https://github.com/pakco77/pakco-html

WorkBuddy

安装到 WorkBuddy 的用户技能目录：

curl -fsSL https://raw.githubusercontent.com/pakco77/pakco-html/refs/heads/main/scripts/install-agent.sh | bash -s -- workbuddy

安装后重启 WorkBuddy 或刷新技能。

TRAE Work / TRAE SOLO

使用与已安装版本相匹配的 AgentSkill CLI 目标：

npx skills add https://github.com/pakco77/pakco-html --agent trae-cn -g
# International edition:
npx skills add https://github.com/pakco77/pakco-html --agent trae -g

TRAE Work CN 的终端备用方式：

curl -fsSL https://raw.githubusercontent.com/pakco77/pakco-html/refs/heads/main/scripts/install-agent.sh | bash -s -- trae-work

安装后重启 TRAE Work 或刷新技能。

其他 AgentSkill Agent

对于受支持的 Agent，请使用 skills CLI Agent 目标：

npx skills add https://github.com/pakco77/pakco-html --agent kimi-code-cli
npx skills add https://github.com/pakco77/pakco-html --agent qwen-code
npx skills add https://github.com/pakco77/pakco-html --agent gemini-cli

对于其他任何能够读取本地 SKILL.md 文件夹的 Agent，请使用通用安装程序：

curl -fsSL https://raw.githubusercontent.com/pakco77/pakco-html/refs/heads/main/scripts/install-agent.sh | bash -s -- ~/.some-agent/skills/pakco-html

无需构建。纯静态 HTML/CSS/JS，仅使用 CDN 网络字体。

此技能提供的内容

• 36 个主题（assets/themes/*.css）——minimal-white、editorial-serif、soft-pastel、sharp-mono、arctic-cool、sunset-warm、catppuccin-latte/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
• 24 张演示文稿风格卡片（templates/full-decks/<name>/ + Guizang 变体）——15 套原生完整多页演示文稿，采用作用域限定的 .tpl-<name> CSS，另有 9 种 Guizang 配色变体。原生模板包括 8 种提取风格（xhs-white-editorial、graphify-dark-graph、knowledge-arch-blueprint、hermes-cyber-terminal、obsidian-claude-gradient、testing-safety-alert、xhs-pastel-card、dir-key-nav-minimal）和 7 种场景脚手架（pitch-deck、product-launch、tech-sharing、weekly-report、xhs-post 3:4、course-module、presenter-mode-reveal——演讲者模式专用）
• 31 种布局（templates/single-page/*.html），包含逼真的演示数据
• 27 种 CSS 动画（assets/animations/animations.css），通过 data-anim 使用
• 20 种 Canvas FX 动画（assets/animations/fx/*.js），通过 data-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
• 键盘运行时（assets/runtime.js）——方向键、T（主题）、A（动画）、F/O、S（演讲者模式：包含 CURRENT / NEXT / SCRIPT / TIMER 卡片的磁吸卡片弹窗）、N（备注抽屉）、R（在演讲者模式下重置计时器）
• FX 运行时（assets/animations/fx-runtime.js）——进入幻灯片时自动初始化 [data-fx]，离开时清理
• 主题 / 布局 / 动画 / full-decks 图库的展示演示文稿
• 用于导出 PNG 的无头 Chrome 渲染脚本

打开风格选择器

当用户要求打开／浏览风格菜单（例如“html来”“打开风格菜单”“打开 pakco-html”“打开html风格”“看看有什么风格”“open the picker”）时，将包含此 SKILL.md 的目录视为 SKILL_ROOT。从该目录启动本地服务器，并在宿主的浏览器或 HTML 预览中打开选择器：

cd "$SKILL_ROOT" && python3 -m http.server 8000 &
# then open: http://localhost:8000/templates/style-picker.html

常见的根目录有 ~/.codex/skills/pakco-html、~/.claude/skills/pakco-html、~/.workbuddy/skills/pakco-html、~/.trae/skills/pakco-html 和 ~/.trae-cn/skills/pakco-html。请检查实际加载的 Skill 路径，不要想当然地使用其中某个路径。

选择器会在 4 个标签页（Skins / Templates / UI Taste / Social Cards）中显示 60 多个实时预览。用户点击卡片即可复制提示词，然后将其粘贴给你。

适用场景

当用户要求制作任何形式的幻灯片内容，或想将文本／笔记变成精美的演示文稿时使用。优先采用此方案，而不是从头开始制作。

🎤 演讲者模式（演讲者模式 + 逐字稿）

如果用户提到以下任一内容：演讲 / 分享 / 讲稿 / 逐字稿 / speaker notes / presenter view / 演讲者视图 / 提词器，或者说“我要去给团队讲 xxx”“要做一场技术分享”“怕讲不流畅”“想要一份带逐字稿的 PPT”之类的话，请使用 presenter-mode-reveal 全套幻灯片模板，并在每张幻灯片的 <aside class="notes"> 中写 150–300 字的逐字稿。

完整的编写指南以及撰写讲稿的 3 条规则，请参见 references/presenter-mode.md：

1. 不是讲稿，是提示信号——加粗核心词 + 将过渡句单独成段
2. 每页 150–300 字——按每页 2–3 分钟的节奏
3. 用口语，不用书面语——“因此”→“所以”，“该方案”→“这个方案”

所有全套幻灯片模板都支持 S 键演讲者模式（此功能内置于 runtime.js）。按 S 键会打开一个包含 4 张磁吸卡片的新弹出窗口：

• 🔵 CURRENT — 当前幻灯片的像素级精准 iframe 预览
• 🟣 NEXT — 下一张幻灯片的像素级精准 iframe 预览
• 🟠 SPEAKER SCRIPT — 大字号逐字稿（可滚动）
• 🟢 TIMER — 已用时间 + 幻灯片计数器 + 上一页／下一页／重置按钮

每张卡片都可以拖动标题栏进行移动，也可以通过右下角的控制柄调整大小。卡片的位置和大小会按演示文稿分别保存到 localStorage。点击“Reset layout”按钮可恢复默认布局。

预览为何能达到像素级精准：每个预览都是一个 <iframe>，会加载实际的演示文稿 HTML，并附带 ?preview=N 查询参数；runtime.js 会检测此参数，并仅渲染第 N 张幻灯片，且不显示浏览器界面。因此，预览与观众视图使用相同的 CSS、主题、字体和视口，颜色和布局保证完全一致。

流畅导航：切换幻灯片时，演讲者窗口会向每个 iframe 发送 postMessage({type:'preview-goto', idx:N})。iframe 只需在幻灯片间切换 .is-active，无需重新加载，也不会闪烁。两个窗口还会通过 BroadcastChannel 保持同步。

只有 presenter-mode-reveal 从设计之初就围绕此功能打造，并为每张幻灯片提供了合适的逐字稿示例。

演讲者窗口中的键盘操作：← → 导航（与观众窗口同步） · R 重置计时器 · Esc 关闭弹出窗口。 观众窗口中的键盘操作：S 打开演讲者窗口 · T 切换主题 · ← → 导航（与演讲者窗口同步） · F 全屏 · O 概览。

📱 网页模式（Webpage Mode）

如果用户提到以下任一内容：网页 / 网页版 / 网页形态 / 做个网页 / 生成网页 / web page / webpage / 长页面 / 上下滑 / 手机看的 / 发链接给别人看，或者内容旨在阅读、传播、存档，而非现场演示，请改用网页模板，不要使用幻灯片模板。

网页模式会生成纵向滚动的 HTML 页面，不设幻灯片边界。与幻灯片模板的主要区别：

	幻灯片	网页
交互	使用键盘／手势翻页	使用浏览器原生滚动
布局	全屏 16:9 幻灯片	720px 居中自适应
JS	需要 runtime.js	不需要
body class	(none)	webpage
结构	.deck > .slide	.page > section
适合	演讲、分享会、Keynote	阅读、传播、分享链接

如何搭建模板：

<body class="webpage">
<div class="page">
  <section class="hero">...</section>
  <div class="section-break"></div>
  <section>...</section>
  ...
  <div class="page-footer">...</div>
</div>
</body>

起始模板：templates/webpage.html。复制此文件以开始制作新的网页。 所有设计令牌（themes、.card、.grid、.pill、.gradient-text 等）都可在两种模式下使用。 网页模式中不要引入 runtime.js，因为不需要它。

开始编写前——务必先询问或提出建议

在了解以下三件事之前，不要开始编写幻灯片。 可以直接询问用户；如果用户已经提供了丰富的内容，也可以提出一个得体的默认方案并请其确认。

1. 内容与受众。 演示文稿的主题是什么、需要多少页、观众是谁（工程师 / 高管 / 小红书读者 / 学生 / VC）？
2. 风格 / 主题。 36 个主题中，哪一个最合适？如果不确定，请根据风格推荐 2-3 个候选项：
   • 商务 / 投资人路演 → pitch-deck-vc、corporate-clean、swiss-grid
   • 技术分享 / 工程 → tokyo-night、dracula、catppuccin-mocha、terminal-green、blueprint
   • 小红书图文 → xiaohongshu-white、soft-pastel、rainbow-gradient、magazine-bold
   • 学术 / 报告 → academic-paper、editorial-serif、minimal-white
   • 前卫 / 赛博 / 发布会 → cyberpunk-neon、vaporwave、y2k-chrome、neo-brutalism
3. 起点。 使用 15 个原生完整演示文稿模板之一、9 个 Guizang 变体，还是从头开始？指出最接近的 templates/full-decks/<name>/，并询问是否合适。如果用户的内容已经明显指向某个模板（例如“我要做产品发布会”→ product-launch），就自信地推荐，而不是盲目提问。

一个好的开场消息示例：

我可以给你做这份 PPT！先确认三件事：

1. 大致内容 / 页数 / 观众是谁？
2. 风格偏好？我建议从这 3 个主题里选一个：tokyo-night（技术分享默认好看）、xiaohongshu-white（小红书风）、corporate-clean（正式汇报）。
3. 要不要用我现成的 tech-sharing 全 deck 模板打底？

确认这些之后，再搭建演示文稿并开始编写。

更新

当用户说“更新 pakco-html”、“update pakco-html”、“升级”或“拉最新版”时，将包含此 SKILL.md 的目录作为 SKILL_ROOT，然后运行：

bash "$SKILL_ROOT/scripts/update.sh"

如果 scripts/update.sh 尚不存在（旧版安装），请运行等效的内联命令：

TMP=$(mktemp -d) && git clone --depth 1 https://github.com/pakco77/pakco-html.git "$TMP/r" 2>/dev/null && cp -r "$TMP/r/assets" "$TMP/r/templates" "$TMP/r/references" "$TMP/r/scripts" "$SKILL_ROOT/" && cp "$TMP/r/SKILL.md" "$SKILL_ROOT/" && rm -rf "$TMP" && echo "✅ 更新完成"

所有通过相对路径引用 assets/ 的现有演示文稿都会自动获得最新功能（主题、布局、移动端支持、错误修复），无需修改 HTML。

快速开始

1. 搭建新的演示文稿。 在仓库根目录运行：

   ./scripts/new-deck.sh my-talk
   open examples/my-talk/index.html
   

2. 选择主题。 打开演示文稿并按 T 切换，或直接指定主题：

   <link rel="stylesheet" id="theme-link" href="../assets/themes/aurora.css">
   

   主题目录见 references/themes.md。
3. 选择布局。 从 templates/single-page/ 中的文件复制 <section class="slide">...</section> 代码块到演示文稿中，并替换示例数据。布局目录见 references/layouts.md。
4. 添加动画。 在任意元素上添加 data-anim="fade-up"（或 class="anim-fade-up"）。对于 <ul> / 网格布局，使用 anim-stagger-list 实现依次显示。对于画布特效，使用 <div data-fx="knowledge-graph">...</div>，并引入 <script src="../assets/animations/fx-runtime.js"></script>。动画目录见 references/animations.md。
5. 使用完整演示文稿模板。 将 templates/full-decks/<name>/ 复制到 examples/my-talk/ 作为起点。每个文件夹都包含独立的作用域 CSS。模板目录见 references/full-decks.md，模板库见 templates/full-decks-index.html。
6. 渲染为 PNG。

   ./scripts/render.sh templates/theme-showcase.html       # one shot
   ./scripts/render.sh examples/my-talk/index.html 12      # 12 slides
   

编写规则（重要）

• 始终从模板开始。 不要从头编写幻灯片——先从 templates/single-page/ 复制最接近的布局，再替换内容。
• 使用设计令牌，不要使用字面颜色值。 所有颜色、圆角和阴影都应来自 assets/base.css 中定义并由主题覆盖的 CSS 变量。 推荐：color: var(--text-1)。不推荐：color: #111。
• 不要创建新的布局文件。 优先组合现有布局。仅当 31 种布局都不适用时，才添加新的 templates/single-page/*.html。
• 遵守框架插槽。 .deck-header、.deck-footer、.slide-number 和进度条由 assets/base.css + runtime.js 提供。
• 键盘优先。 务必包含 <script src="../assets/runtime.js"></script>，以支持 ← → / T / A / F / S / O / 哈希深层链接。
• 每个逻辑页面对应一个 .slide。 runtime.js 会显示 .slide.is-active，并隐藏其他页面。
• 提供备注。 在每张幻灯片内用 <div class="notes">…</div> 包裹演讲者备注。按 S 打开叠加层。
• 切勿在幻灯片本身放置仅供演讲者查看的文字。 “这一页展示了……”或“Speaker: 这里可以补充……”等描述性文字，以及面向演讲者的小型说明文字，都必须放在 <div class="notes"> 中，而不是作为可见的 <p> / <span> 元素放在幻灯片上。.notes 类默认设置为 display:none，只会在 S 叠加层中显示。幻灯片上只能包含面向观众的内容（标题、项目符号、数据、图表、图片）。

写作指南

请参阅 references/authoring-guide.md，了解分步指南：文件结构、命名、如何将大纲转换为幻灯片、如何根据受众选择布局和主题、如何制作中英双语幻灯片，以及如何导出。

目录（按需加载）

• references/themes.md — 全部 36 种主题及其适用场景。
• references/layouts.md — 全部 31 种布局类型。
• references/animations.md — 27 种 CSS + 20 种画布 FX 动画。
• references/full-decks.md — 15 种原生完整幻灯片模板 + 9 种 Guizang 选择器变体。
• references/presenter-mode.md — 演讲者模式 + 逐字稿编写指南（技术分享/演讲必看）。
• references/authoring-guide.md — 完整工作流。

文件结构

pakco-html/
├── SKILL.md                 (this file)
├── references/              (detailed catalogs, load as needed)
├── assets/
│   ├── base.css             (tokens + primitives — do not edit per deck)
│   ├── fonts.css            (webfont imports)
│   ├── runtime.js           (keyboard + presenter + overview + theme cycle)
│   ├── themes/*.css         (36 token overrides, one per theme)
│   └── animations/
│       ├── animations.css   (27 named CSS entry animations)
│       ├── fx-runtime.js    (auto-init [data-fx] on slide enter)
│       └── fx/*.js          (20 canvas FX modules: particles/graph/fireworks…)
├── templates/
│   ├── deck.html                  (minimal 6-slide starter)
│   ├── webpage.html               (webpage mode starter — vertical scroll, no slides)
│   ├── theme-showcase.html        (36 slides, iframe-isolated per theme)
│   ├── layout-showcase.html       (iframe tour of all 31 layouts)
│   ├── animation-showcase.html    (20 FX + 27 CSS animation slides)
│   ├── full-decks-index.html      (gallery of all 15 native full-deck templates)
│   ├── full-decks/<name>/         (17 deck folders: 15 native + 2 Guizang bases)
│   └── single-page/*.html         (31 layout files with demo data)
├── scripts/
│   ├── new-deck.sh                (scaffold a deck from deck.html)
│   └── render.sh                  (headless Chrome → PNG)
└── examples/demo-deck/            (complete working deck)

渲染为 PNG

scripts/render.sh 使用无头 Chrome，路径为 /Applications/Google Chrome.app/Contents/MacOS/Google Chrome。对于多张幻灯片的截图，runtime.js 提供 #/N 深层链接，render.sh 会依次遍历 1..N。

./scripts/render.sh templates/single-page/kpi-grid.html        # single page
./scripts/render.sh examples/demo-deck/index.html 8 out-dir    # 8 slides, custom dir

键盘快捷键速查表

←  →  Space  PgUp  PgDn  Home  End    navigate
F                                       fullscreen
S                                       open presenter window (magnetic cards: current/next/script/timer)
N                                       quick notes drawer (bottom overlay)
R                                       reset timer (in presenter window)
?preview=N                              URL param — force preview-only mode (single slide, no chrome)
O                                       slide overview grid
T                                       cycle themes (reads data-themes attr)
A                                       cycle demo animation on current slide
#/N in URL                              deep-link to slide N
Esc                                     close all overlays

许可证与作者

MIT。版权所有 (c) 2026 lewis <[email protected]>。

这是 lewislulu/html-ppt-skill 的分支。 分支维护者： @pakco77 — 在上游工作的基础上，新增交互式样式选择器 WebUI、Guizang 幻灯片变体集成，以及演讲者模式稳定性修复。