参考来源与版本锚定
本页正文由本站独立撰写，用于对照 LivePPT、Slidev、Remotion 三种表达壳层，建立本站 Design/UI 线的结构地图。
技术权威：以各项目官方仓库与文档为准；本站仅做教学用归纳，实际功能与 API 以当前版本为准。
镜像锚定（维护者更新后请修订）：整理日期 2026-04-13。
01 · 三者的角色先拆开
| 样本 | 更像什么 | 核心优势 |
|---|---|---|
LivePPT | 演示页生成器 | 把已有 Markdown / README 快速变成 HTML deck |
Slidev | 开发者讲义系统 | Markdown slides + live coding + drawing + export |
Remotion | 程序化视频引擎 | 用 React 直接做可编排的视频和动画表达 |
01B · 三种表达壳层对照（点击展开）
下面把三条路线的核心定位、最佳场景和层级差异做成可交互卡片。点击任意卡片查看详细说明；帮助你快速判断「当前内容该用哪条工具链」。
01C · 三列能力对照（悬停高亮）
把 LivePPT、Slidev、Remotion 放在同一维度下横向比较。悬停任意维度，三列中对应行会同时高亮，帮助你一眼看出差异。
02 · Design/UI 知识图谱
下方为交互式网络图：节点是三条表达壳层与插件梯度层级，边表示它们之间的层级关系与共享基础。点击节点查看详细分析；拖拽可调整布局。帮助你建立“当前内容该用哪条工具链”的判断框架。
图谱中块内结构来自专题页内容拆解；块间联系是教学向层级归纳，不是工具之间的技术依赖图。它的作用是帮助你判断“先看哪里、再看哪里、哪些层级要一起考虑”。
03 · LivePPT：最像内容变演示页的壳
它最吸引人的点，不是功能大全，而是非常直接：把现有内容快速变成可演示的结果。这种"内容先行"的姿势，很适合给站内成熟专题做演示版。
| 核心能力 | 说明 | 判断标准 |
|---|---|---|
Markdown → Deck | 把已有文章、README、结构化笔记直接转换成可翻页的演示 | 当你已有文字内容，只需要"包一层壳"就能分享时 |
主题系统 | 内置多套 CSS 主题，可覆盖品牌色与排版风格 | 需要快速统一视觉风格，不追求完全自定义 |
HTML 导出 | 生成单页可离线浏览的 HTML，部署到任意静态托管 | 分享场景是"发一个链接"而不是"现场演讲" |
对我们最有价值的参考：它证明了"内容变演示页"这件事可以单独成为一层，不需要先把内容写成 PPT 再排版。我们的站点专题（如 Claude Code 解构、Hermes Agent 解构）在成熟后，很适合用 LivePPT 的思路生成一份可快速浏览的 deck 版。
04 · Slidev：最像开发者讲解工作台
它在 Markdown slides、绘图、Presenter Mode、Mermaid、代码高亮和 export 之间达成了比较完整的开发者讲义形态。
| 核心能力 | 说明 | 判断标准 |
|---|---|---|
Markdown Slides | 用纯 Markdown 写幻灯片，支持 frontmatter 配置每页样式 | 你习惯用 Markdown 写作，不想切到 PPT 或 Keynote |
Live Coding | 在幻灯片里直接嵌入可执行的代码块，支持 Monaco 编辑器 | 演示场景需要现场改代码、跑结果 |
Presenter Mode | 演讲者视图带计时器、备注和下一张预览 | 有公开演讲或团队内部分享需求 |
Mermaid + Export | 内置 Mermaid 图表，支持导出 PDF/PNG/可托管 SPA | 需要结构图 + 多种分发格式 |
对我们最有价值的参考：Slidev 说明开发者讲义页和普通 PPT 不是一回事。当我们需要讲解源码结构、CLI 使用或代码审查流程时，Slidev 的 live coding 和 Markdown-native 工作流是更适合的壳层。
05 · Remotion：最像代码驱动的视频表达层
一旦你不满足于静态页和 slides，而想把解释升级成动画、片段和节奏化叙事，Remotion 就会显出它的层级差异。
| 核心能力 | 说明 | 判断标准 |
|---|---|---|
React → Video | 用 React 组件直接定义视频帧、动画和转场，像写页面一样写视频 | 你需要动画、节奏、镜头感，而不是静态图文 |
程序化编排 | 时间轴、关键帧、插值、音频同步全部用代码控制，可复用可版本化 | 同一套视觉风格需要批量生成或频繁迭代 |
可部署流水线 | 可在 CI/CD 里渲染视频，配合 Lambda / Docker 做规模化出片 | 需要将视频生成纳入自动化流程 |
对我们最有价值的参考：Remotion 给了站点未来一条从图文走向视频的扩展路线。当我们需要把复杂的系统结构（如 Claude Code 主循环、Hermes 六层架构）做成"一眼看懂"的动效解释时，Remotion 的层级远高于静态图或 slides。
06 · 把同一个样本映射到三条壳层
为了让这条专题不是停在抽象对比，我们把 Claude Code 解构页 当作第一批样本，看看同一份内容在三种表达壳层里分别该怎么切。
| 样本层 | Claude Code 解构页该怎么切 | 产出目标 |
|---|---|---|
LivePPT | 保留原有章节，压缩成"是什么 / 为什么 / 核心分层 / loop / 技能 / UI" 这类 deck 页序。 | 一份可分享、可快速浏览的 deck。 |
Slidev | 把大章节拆成"每页一个控制点"，加入 Mermaid、代码块和 operator 视角说明。 | 一份开发者讲义，适合公开分享和现场讲解。 |
Remotion | 只取最强的一条视觉主线，比如 runtime / daemon / connector 或 loop in loop，把它做成节奏化镜头。 | 一个解释结构的短视频或动图片段。 |
这也是后面 `Design/UI` 线最重要的判断标准：不是"哪个工具更全"，而是"哪种表达壳层更适合当前内容的传播目标"。
插件梯度：图、截图、deck、slides、video 不是一层东西
| 层级 | 代表能力 | 最适合的任务 |
|---|---|---|
| 图形结构层 | Mermaid | 讲结构、讲关系、讲流程。 |
| 图形加强层 | html-card-to-png | 当结构图需要更强版式和视觉密度时。 |
| 证据保留层 | webpage-screenshot-md | 当必须保留真实页面、真实模块、真实界面状态时。 |
| 演示页层 | LivePPT | 当成熟文章需要快速变成可分享的 deck。 |
| 讲义层 | Slidev | 当主题需要开发者讲解、live coding 和页级章节控制时。 |
| 视频层 | Remotion | 当最强主线需要镜头感、动画和短视频传播时。 |
这套梯度的意义是：我们不再把所有表达手段混成"做个图"，而是先判断自己处在哪一层，再决定该用哪条工具链。
08 · 对我们最值得学什么
第一，Mermaid、HTML 卡片图、截图，是"解释与证据层"，和 deck/slides/video 不是同一层。
第二，LivePPT 告诉我们"已有内容快速变演示页"这件事可以单独成为一层。
第三，Slidev 说明开发者讲义页和普通 PPT 不是一回事。
第四，Remotion 给了站点未来一条从图文走向视频的扩展路线。
参考链接与站内导航
外部参考
- LivePPT（GitHub） — Markdown 快速变演示页
- Slidev 官方文档 — 开发者讲义系统
- Remotion 官方文档 — 程序化视频引擎
- Google DESIGN.md（GitHub） — 给 AI 代理读的 design system specification：YAML tokens + Markdown rationale + CLI validator（lint / diff / export）
站内相关专题
- Design/UI 专题总页 — 完整学习路线与样例映射
- Claude Code 解构 — 可作为三条壳层的切分样本
- Hermes Agent 解构 — 多层级 agent 系统的表达壳层对照
- DeepScientist 解构 — 研究输出层的视频化扩展思路