Keyhtml — 具有神奇移动能力的 HTML 演示文稿

用一个 HTML 文件做出 Keynote 级演示文稿：双击即放映，跨页元素「神奇移动」（共享元素过渡），零依赖、可离线、可发给任何人。

面向 AI 编程智能体设计——把这份仓库作为 skill 交给 Claude Code、Codex 等，它们就能按规范直接为你生成专业演示文稿。

它的优势

• 神奇移动：相邻两页的同名元素翻页时自动补间飞行——卡片收拢成标签、标题降级成角标、图形跨页生长，即 Apple Keynote 的招牌效果。
• 一个文件，双击即用：纯原生 HTML/CSS/JS，不引入任何框架。无需联网、无需构建，拷到任何电脑任何浏览器都能放映，会议室断网也不怕。
• 零依赖 = 零腐烂：没有框架版本与构建工具链的技术债，多年后照样能跑；且神奇移动依赖浏览器原生 View Transitions API，框架的虚拟 DOM 反而会碍事——原生才是最优解。
• 换肤即改一处：ink 墨黑 / midnight 深蓝 / paper 浅色三套主题，改一个 data-theme 整体切换。
• 开箱能力全内置：响应式字号、章节分页器、全屏演示、图片点击放大、弹簧动效。

安装 · 作为 AI 智能体的 skill

Claude Code — 克隆到 skills 目录即装好（团队共享则改用项目内 .claude/skills/keyhtml/）：

git clone https://github.com/xiezhongyuAI/Keyhtml.git ~/.claude/skills/keyhtml

Codex — 克隆到本地，在对话里让它读取 SKILL.md 作为规范：

git clone https://github.com/xiezhongyuAI/Keyhtml.git ~/keyhtml

装好后，让智能体「按 keyhtml 规范做一个神奇移动演示文稿」（Claude Code 也可直接 /keyhtml），它便会基于 assets/template.html 为你生成演示文稿。

任何其他工具同理：克隆本仓库，把 SKILL.md 和 assets/template.html 作为上下文交给它即可。

直接当模板用（不装 skill）

无需任何智能体，也能用：

1. 下载 assets/template.html，重命名为你的演示文稿；
2. 照文件内注释（ENGINE 引擎 / THEME 主题 / LAYOUTS 版式）改内容——只改 <section class="slide"> 和 THEME 变量，不动 ENGINE；
3. 双击用浏览器打开即放映。

模板本身就是 12 页范例，含三组可运行的神奇移动案例，照着改即可。

设计哲学：为什么没有组件库

Keyhtml 刻意不提供卡片、按钮等组件库——这是核心决策，不是缺失。原则一句话：

固化正确性与功能性，开放品味与表达性；交付语法，而非词汇。

翻页、神奇移动、字号阶梯、主题变量，以及分页器 / 灯箱 / 全屏这类功能性 UI——做错了会坏、长什么样无所谓——固化进引擎。卡片、按钮这类表达性元素——承载内容与个人品味、做"错"顶多不好看——交给作者自己写。

演示文稿要的是「每次都不同、服务当下叙事」，与产品 UI 追求的「一致、可复用」正相反：组件库在这里维护成本随品味多样性发散、永远追不上，且只能拉齐、拉不出彩。所以 Keyhtml 给的是造词的语法（主题变量、字号阶梯、变形层约定），而非现成的词——你自己做的卡片能自动融入体系、参与神奇移动。照范例抄有下限，用语法发挥无上限。

操作

操作	键
翻页	← → ↑ ↓ / 空格 / 滚轮 / 右侧圆点
首页 / 末页	Home / End
全屏演示	F（或右下角按钮）
放大图片	点击图片，Esc 关闭

浏览器兼容

神奇移动需要 View Transitions API：Chrome / Edge 111+、Safari 18+ 完整支持。其余浏览器自动回落为淡入淡出，内容零损失。

目录结构

keyhtml/
├── SKILL.md              # 给智能体读的规范（工作流 / 编排属性 / 约定 / 设计指导）
└── assets/
    ├── template.html     # 12 页模板，兼作范例，复制它开始做演示文稿
    └── design-spec.html  # 可视化设计规范：颜色 / 字号 / 能力演示，双击给团队看

License

MIT