🎨 新专题 Slides · Demo Pages · Programmatic Video

Design/UI
把讲解、演示和程序化表达收成一条线

这条专题不只看“页面好不好看”，更关心：Markdown/README 怎样变成演示页、Slides 怎样服务开发者内容、程序化视频怎样变成新的讲解媒介。 `LivePPT`、`Slidev`、`Remotion` 三条线合在一起，刚好构成站内的讲解 UI / 演示 UI / 代码驱动视觉表达轴。

为什么值得单独立一个 Design/UI 专题

不是普通前端页

这里更关心“如何讲解”，不是通用后台 UI 或营销站模版。

它服务我们的内容系统

站内专题、知乎稿、图文页、演示页和未来的视频解说都能从这里长出来。

它能变成绘图插件线

从 Mermaid、HTML 卡片图，到 Slidev 绘图、Remotion 视频和 LivePPT deck，都是一条连续谱。

三条路线放到一张图里看

Design/UI 三条路线总图
样本 更像什么 最适合我们学什么
LivePPT Markdown / README 到 HTML 演示页的快速生成器 如何把已有内容快速变成可演示、可分享的 deck
Slidev 开发者讲义 / slides 工作台 如何把 Markdown、live coding、绘图和 export 收到同一套讲义系统
Remotion React 程序化视频框架 如何把前端和代码表达延伸到动画、视频和解释性可视化

子入口：教程页 + 解构页

🧭 Design/UI 教程页

先讲“什么时候该用 LivePPT，什么时候该用 Slidev，什么时候该上 Remotion”，给站内后续内容生产一个明确工作流。

进入 →

🧩 Design/UI 解构页

把三者放到一张结构图和对照表里，看它们分别站在“演示页 / 幻灯片 / 程序化视频”哪一层。

进入 →

绘图 / 演示插件线

第一层：站内插图

Mermaid、HTML 卡片图、截图块，用来快速服务专题解释。

第二层：讲义 / 演示页

LivePPT / Slidev 用来把专题页升级成演示版本，适合分享和公开讲解。

第三层：程序化视频

Remotion 适合把静态讲解再提升到动画和视频层，后面可以做成解释性片段和短视频素材。

当前表达目标 第一优先 什么时候升级
解释结构关系 Mermaid 如果结构太复杂或版式要求更强，再升级到 html-card-to-png
保留真实界面或真实网页状态 webpage-screenshot-md 如果截图之后还需要讲解型重排，再补 Mermaid 或卡片图
快速可分享的讲解页 LivePPT 如果要讲义化、要做开发者分享，就升级到 Slidev
公开演讲 / 开发者讲义 Slidev 如果需要镜头感和动态节奏，再升级到 Remotion
解释型动画 / 视频传播 Remotion 优先只挑最有画面感的一条主线，不要把整篇文章硬塞进视频

所以这条线最终不只是“找几个 UI 仓库”，而是：为站点建立从图、截图、deck、slides 到程序化视频的连续表达能力。

后续最顺的开展路线

第一步

先固定这三种角色：`LivePPT = deck`，`Slidev = slides`，`Remotion = video`。

第二步

从站内找一篇成熟专题，分别做成 deck / slides / video 的最小样稿。

第三步

把这条线回写到绘图插件与内容生产工作流里，形成真正的设计/演示工具链。