Whiteboard / Recording相关项目

Excalicord

白板讲解、提词与录屏合在一起的演示工作台

把 Excalidraw 式白板、分镜场景、提词器、参考画面、摄像头气泡和录屏框选收在一个桌面优先的工作台里,用来做产品讲解、教学演示和异步说明。

  • Whiteboard
  • Recording
  • Teleprompter
  • Explainers
相关项目Web 应用在线可用Web更新于 2026-05-20
Excalicord cover

概览

这项工作的关键构成

结果

结果与影响

  • 把“画草图 → 讲清楚 → 录下来 → 留作可继续编辑的项目”串成一条连续流程。
  • 相比单纯白板或单纯录屏,这个版本更贴近真实 explain / walkthrough 场景。

决策

关键决策与取舍

  • 不从零重造画布,而是基于熟悉的白板核心,把 scenes、teleprompter、reference panel、camera bubble 和 recording frame 叠加成一套演示工作台。
  • 把 GitHub sync 放进产品里,让单次讲解不只是录完即散,而是可以继续保存、回拉、复用。

证据

证据与验证

  • 线上原型可直接打开:包含 scenes、teleprompter、reference source、camera bubble、preview frame 和 sync 面板。
  • 当前部署头部标题为 20260331-excalicord-base,说明它已经作为独立工作台持续迭代,而不是一次性草图。

案例

叙事、决策与证据

01

结果

结果与影响

  • 把“画草图 → 讲清楚 → 录下来 → 留作可继续编辑的项目”串成一条连续流程。
  • 相比单纯白板或单纯录屏,这个版本更贴近真实 explain / walkthrough 场景。

02

决策

关键决策与取舍

  • 不从零重造画布,而是基于熟悉的白板核心,把 scenes、teleprompter、reference panel、camera bubble 和 recording frame 叠加成一套演示工作台。
  • 把 GitHub sync 放进产品里,让单次讲解不只是录完即散,而是可以继续保存、回拉、复用。

03

证据

证据与验证

  • 线上原型可直接打开:包含 scenes、teleprompter、reference source、camera bubble、preview frame 和 sync 面板。
  • 当前部署头部标题为 20260331-excalicord-base,说明它已经作为独立工作台持续迭代,而不是一次性草图。

04

角色

角色与贡献

  • Owner / Product Engineer:围绕“解释一件事”这条实际工作流,定义产品边界并完成白板、录制、同步等能力整合。

05

问题

要解决的问题

  • 普通白板擅长画,录屏工具擅长录,但做讲解型内容时,提词、参考、摄像头与录制边界往往分散在多个窗口里。

06

约束

约束与边界

  • 讲解时主画布必须保持清爽,辅助能力只能在需要时出现,不能反客为主。
  • 浏览器录屏、摄像头和本地草稿同步都涉及权限与状态管理,体验稍乱就会中断讲解流程。

07

背景

为什么做

这不是“再做一个白板”。真正触发它的,是做产品讲解和教学说明时总要同时开着白板、提词、参考画面、摄像头和录屏工具。于是我把这些高频并发动作,收成同一个桌面工作台。

08

场景

应用场景

  • 录制 whiteboard explainer:边画边讲,保留摄像头与提词节奏。
  • 做产品 walkthrough:一边讲结构,一边参考浏览器页面或本地视频。
  • 做异步交接:把讲解过程、场景结构和项目文件一起保留下来。

09

交付

实现了什么

  • Scene 列表:支持把一段讲解拆成多个可切换分镜,而不是只留一张无限画布。
  • Teleprompter、reference panel、camera bubble、preview frame:把讲解时真正会同时用到的辅助能力拉到同一界面。
  • GitHub sync:把本地项目状态推送到指定 repo / branch / path,方便继续维护与回拉。

10

设计

设计要点

  • 设计重点不是“功能越多越好”,而是辅助层必须围绕讲解动作排布,随时可隐藏、可聚焦。
  • 桌面优先:录屏、拖拽、分镜切换和参考视频都需要稳定的大画布与清晰层级。
  • 产品语义上更接近 presenter workspace,而不是通用画图工具克隆版。

11

技术

技术实现

  • 以 Excalidraw 作为白板核心,在外层叠加 scene 管理、提词器、参考视频面板和录制框选交互。
  • 结合浏览器媒体能力处理摄像头、屏幕共享、录制与导出,形成完整的录制链路。
  • 通过 GitHub token / repo / branch / path 配置实现项目级同步,减少“录完就散”的一次性产物。

12

访问

当前访问方式

  • 线上原型地址:https://excalicord.zondev.top。
  • 当前交互明显面向桌面浏览器,移动端会直接提示使用桌面设备。

流程

从进入到完成的路径

这类项目最适合按“真实产品”去理解:入口、反馈循环和完成状态,与表层界面同样重要。

Frame / Explain / Record / Sync

Excalicord flowFrameExplainRecordSync

继续探索

在上下文里打开产品

Excalicord cover

在线预览

有些站点会因为安全策略拒绝 iframe 嵌入;如果这里是空白,请直接使用上面的“打开线上版本”。

访问方式

这个条目仍属于持续演进中的实践。公开表面可能是线上网址、导览式预览,或者一组经过整理的界面状态,取决于当前发布形态。