Design/UI 教程页 - Everything in Claude-Code

怎么选：先看输出形态

目标	更适合	原因
把现成 README / Markdown 立刻变成可分享演示页	`LivePPT`	最快把已有内容变成 deck
做开发者讲义、技术分享、live coding 幻灯片	`Slidev`	Markdown slides + drawing + export 很成熟
做带动画、镜头感和节奏的视频表达	`Remotion`	React 程序化视频更自由

如果你手上已经有 README、站内专题稿或 Markdown 草稿，`LivePPT` 的价值是最低成本把它变成一个可点击翻页、可分享的 HTML deck。

对我们最有价值的场景是：把成熟的站内专题快速导出成演示版，而不是重新写一套幻灯片。

`Slidev` 的优势在于它天然面向开发者内容：代码块、live coding、绘图、Mermaid、导出和 presenter mode 都很成熟。

如果你要做的是“讲解一个技术系统”，而不是单纯导出一个 deck，它通常比 LivePPT 更像一个真正的讲义工作台。

`Remotion` 的优势不是“它也能放字”，而是你终于可以用 React、CSS、Canvas、SVG 和代码逻辑来控制镜头、节奏和动画。

这特别适合后面把站内的系统解构页，升级成短视频、讲解片段或视觉解释素材。

如果只讲工具，很容易停在“知道了三个仓库”。真正能带来生产力的，是挑一个成熟专题，分别试一遍 deck / slides / video 三种路线。第一批最适合的样本是 topic-cc-unpacked-zh.html。

目标形态	建议工具	为什么适合 Claude Code 解构页
快速分享版 deck	`LivePPT`	现成章节多、结构清晰，最适合先把长文专题直接转成翻页式 HTML 演示版。
公开讲解 slides	`Slidev`	Claude Code 解构里有大量系统分层、工具调用、loop 机制，适合做一页一概念的开发者讲义。
解释型短视频 / 动画片段	`Remotion`	可以把“大脑 / 工具 / loop / context”这些结构拆成镜头节奏，做成更适合传播的动态讲解。

建议顺序

第 1 步：先把整篇专题压成 8~12 页 LivePPT deck，验证“文章能否快速变成演示页”。

第 2 步：再把同一主题提炼成 12~18 页 Slidev 讲义，按“入口 / runtime / tools / memory / loop / UI”排章节。

第 3 步：最后只挑其中一个最有画面感的结构，比如 Agent loop 或 runtime 分层，做成 30~60 秒的 Remotion 片段。

这条线现在不只是在 `LivePPT / Slidev / Remotion` 之间选，还要先判断：当前内容到底更适合先画图、先截图，还是已经到了该变成演示页的阶段。

内容类型	第一选择	说明
结构关系、层级、流程	`Mermaid`	当重点是“讲清结构”而不是还原真实界面时，优先 Mermaid。
复杂结构但需要更强版式感	`html-card-to-png`	当 Mermaid 不够美观或布局受限时，用 HTML 卡片图补上视觉表达。
真实页面、真实模块、真实交互状态	`webpage-screenshot-md`	当证据必须来自真实页面时，优先截图而不是重画。
成熟专题想快速变成演示页	`LivePPT`	先做 deck，验证文章能否低成本进入演示形态。
需要讲义化、现场演讲、代码示例	`Slidev`	更适合开发者分享、章节化讲解和导出。
需要镜头感、节奏、动画传播	`Remotion`	只取最有画面感的一条主线，不要直接把长文全文视频化。

一句话规则

先问“我是在解释结构，还是在保留证据，还是在做传播形态升级？”

解释结构 → Mermaid / html-card-to-png

保留真实证据 → webpage-screenshot-md

升级传播形态 → LivePPT / Slidev / Remotion

第一步：先判断当前最缺的是图、截图，还是传播形态升级

第二步：如果只是要解释结构，先走 Mermaid 或 html-card-to-png

第三步：如果要保留真实界面证据，走 webpage-screenshot-md

第四步：如果只是要快速演示，走 LivePPT

第五步：如果要做讲义或公开分享，走 Slidev

第六步：如果要做动态叙事或视频，走 Remotion