📦 Open Slide — 打开幻灯片

open-slide - 作为 React 代码的幻灯片 open-slide 是为代理商构建的幻灯片框架。您在固定 1920×1080 的画布上编写 React 组件；框架处理缩放、导航、热重载、演示模式和导出。每个幻灯片都是一个文件 —— 版本控制、可审查、属于您。

何时使用此技能 用户想要创建新的演示文稿/幻灯片（基于 Web 的输出） 用户提到“open-slide”或“代码幻灯片” 用户想要编辑或迭代现有的 open-slide 幻灯片 用户想要预览幻灯片或导出为 HTML/PDF 用户想要创建新的 open-slide 工作空间 用户想要将检查员评论应用于幻灯片 用户询问“代码幻灯片”、“React 幻灯片”或基于 Web 的演示文稿 如果用户明确需要 .pptx 文件以便与 PowerPoint 兼容，请使用 PowerPoint/PPTX 工作流程而不是 open-slide。

先决条件 必须可用 Node.js 18+。 必须可用 pnpm 或 npm。 必须可用 Python 3 以便导出 PDF。 Python 依赖项：从 {baseDir}/requirements.txt 安装。 浏览器二进制文件：Playwright 需要安装 Chromium。 检查可用性： python3 -m pip install -r {baseDir}/requirements.txt python3 -m playwright install chromium 检查 Node.js 可用性： node --version pnpm --version 或 npm --version 如果 Node.js、Python 3 和至少一个包管理器不可用，请在继续之前告诉用户缺少什么。

工作流 1：初始化 - 创建幻灯片（首次） # 首选 pnpm，如果可用；否则使用 npm/npx。 pnpm dlx @open-slide/cli init # 或：npx @open-slide/cli init cd pnpm install # 或 npm install 这将创建： / ├── slides/ │ └── getting-started/ │ └── index.tsx # 入门幻灯片 ├── themes/ # 可选共享主题 ├── open-slide.config.ts # 框架配置 ├── AGENTS.md # 代理商规则 └── package.json 跟踪幻灯片路径 - 所有后续命令都从那里运行。

工作流 2：创建 - 编写新幻灯片 在编写任何代码之前，请阅读 {baseDir}/references/authoring.md 中的编写参考，了解文件契约、画布规则、垂直预算数学、类型比例、设计系统和反模式。

步骤 1 - 选择主题（如果可用） 列出幻灯片根目录下的 themes/ 文件。 如果主题 markdown 文件存在，请询问用户使用哪个主题（或“无主题 - 从头设计”）。 从头到尾阅读选定的主题文件 - 其调色板、排版和布局现在具有权威性。

步骤 2 - 澄清要求 在编写任何代码之前，锁定这些决策（如果尚未提供）。 询问用户： 美学方向 - 提出 3 个适合主题的视觉方向。 每个方向应结合一个氛围词 + 具体的视觉提示（调色板、排版、图案）。 将最合适的方向标记为“(推荐)”。 页面数量 - 3-5（短）、6-10（标准）、11-20（深入）或自定义。 文本密度 - 最小（一行/大数字）、轻（标题 + 2-3 个项目符号）、标准（标题 + 4-5 个项目符号）、密集（多列）。 动画 - 静态（无动画）、微妙（渐入/渐出）、丰富（关键帧、延迟显示）。 仅当用户的原始请求已经给出了明确的答案时，才跳过问题 - 并重申您的假设，以便他们可以更正它。

步骤 3 - 选择幻灯片 ID 短、描述性、连字符分隔。 示例：rust-intro、q2-roadmap、team-offsite-2026。 检查 slides/ 以避免冲突。

步骤 4 - 计划结构 将幻灯片作为页面角色列表草拟： 角色 目的 封面 标题 + 副标题、强烈的视觉效果 议程 即将发生的事情（3-5 项） 部分分隔符 章节之间的大标签 内容 标题 + 2-5 个项目符号 或 标题 + 一个视觉元素 大数字 一个统计数据，大小为画布大小 引用 带有归属的引用 比较 两个列的对比或 A 与 B 结论 呼吁、感谢、联系 每页一个想法。如果您想放两个，分开它们。 与用户分享大纲，以便快速确认，然后再编写代码。

步骤 5 - 编写 slides//index.tsx 按照 {baseDir}/references/authoring.md 中的编写参考。 关键点： 在顶部声明 export const design: DesignSystem = { … } - 这使幻灯片可以从设计面板中调整。 使用 var(--osd-X) CSS 变量进行视觉属性（背景、文本、强调、字体、大小）。 在编写代码之前，执行每个页面的垂直预算数学 - 元素高度 + 间隙 + 2×填充 ≤ 1080px。 每页一个概念，最大约 40 个字的正文文本。 仅当用户必须提供真正的图像（产品截图、团队照片、数据图表）时，才使用 @open-slide/core 中的 - 而不是用于装饰。 仅使用 React 和标准 Web API。 不使用额外的 npm 包。

步骤 6 - 自我审查 在完成之前，运行 {baseDir}/references/authoring.md 中的检查清单。

步骤 7 - 交付 当环境可以运行浏览器时，自动创建视觉工件： 运行 {baseDir}/scripts/export_pdf.py 中的 PDF 导出脚本。 报告最终结果。