reel

Reel 是一个用于为网页应用和命令行界面创建“代码即演示”（demos-as-code）的开源工具。其核心是一个小型 YAML 规范文件，驱动真实的应用程序——无论是通过 Playwright 在 Chromium 浏览器中运行，还是在真实终端中执行——并记录实际发生的行为。录制的内容随后被渲染为始终最新的 GIF、MP4、WebM 文件、PNG 故事板以及由 HyperFrames 提供支持的交互式 HTML 组合。 该工作流围绕一个规范文件展开：编写或捕获该文件后，运行 `reel check` 来验证每一步仍然有效，然后使用 `reel shoot` 生成演示内容。接着，`reel compose` 可以搭建一个 HyperFrames 项目，作者再填写场景描述并进行渲染。 主要功能包括： - **捕获模式**：手动操作应用程序，Reel 自动编写规范，包括基于稳定可访问性的选择器； - **场景语法**：标题卡、标注、高亮、转场、图表（Mermaid）、缩放、滚动和拖拽手势等结构化为有向序列而非原始录制； - **交付预设**：针对 README、社交媒体、文档和高质量分享优化输出格式； - **音频支持**：通过 ElevenLabs 或 OpenAI 提供可选旁白、合成音效、带淡入淡出的背景音乐，以及画面与语音同步功能； - **字幕与本地化**：支持 SRT/VTT 字幕文件，并提供基于 LLM 的多语言翻译版本； - **认证处理**：可在离线状态下使用已保存的 Playwright 会话登录一次，演示重播时无需暴露密码； - **确定性行为**：冻结时钟、禁用动画、固定区域设置/时区以确保可重现的渲染结果； - **Claude Code 插件**：通过自然语言指令使用 `/reel` 和 `/reel-polish` 技能构建和润色演示； - **工作室界面**：本地运行的 Next.js 界面，支持规范编辑、实时预览录制、AI 创作和漂移检查； - **CI 集成**：`reel check` 作为烟雾测试，在演示流程中断时使流水线失败； - **编辑器支持**：VS Code、JetBrains 和 Neovim 均提供 YAML 模式自动补全。 所有操作均在本地运行，完全采用 MIT 许可证，无 SaaS 服务，也无需托管。需要 Node.js 22+ 和 TypeScript 环境。