mcpField
B
bento-slides

bento-slides

github.com/nyblnet文档处理5.6k91 次安装2 天前更新
代码仓库

关于 bento-slides

用于创建和编辑以 .bento.html 文件保存的自包含 Bento 幻灯片的技能。它指导作者通过 JSON 设计内容、检查渲染效果并安全更新现有文档。

主要功能

  1. 01编辑嵌入的文档 JSON 区块
  2. 02按 Bento 文档架构创建幻灯片
  3. 03根据内容使用图表、表格、变形和媒体
  4. 04添加演讲者备注与动态效果
  5. 05检查幻灯片渲染并调整布局
  6. 06保留文档身份与共享密钥

适用场景

  1. 01将来源材料整理为可视化 Bento 幻灯片
  2. 02更新现有 .bento.html 演示文稿
  3. 03交付前检查幻灯片渲染效果

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/nyblnet/bento --skill bento-slides

安装后在 Claude Code 中输入/bento-slides确认已加载。

详细介绍

编写 Bento 演示文稿

Bento 演示文稿是一个独立的 .bento.html 文件。文档是一个单独代码块中的纯 JSON：

<script type="application/bento+json" id="bento-doc"> { "format":"bento/slides", ... } </script>

只需在原处编辑该代码块。将 JSON 中每个 < 都转义为 \u003c，这样其中就不会出现字面量 </script>。文件其余部分（压缩后的运行时） 保持不变。在聊天环境中，用户则会将 JSON 复制出来（Save ▾ → Copy document JSON）， 再粘贴你的替换内容（Save ▾ → Replace from JSON…）；也可以在控制台中运行 window.bento.loadDoc(json) 完成替换。

从零开始

用户不需要安装 Bento——每个演示文稿都内置了应用。当没有可编辑的 .bento.html 文件时，请自行获取最新的已签名发行版，并在其中编写内容：

# name the file after the deck's topic, e.g. Q4_Review.bento.html
curl -fsSL https://bento.page/releases/slides/Bento_Slides.bento.html -o "<Topic>.bento.html"

（Windows 上没有 curl 时：iwr https://bento.page/releases/slides/Bento_Slides.bento.html -OutFile <Topic>.bento.html。）

接着确认下载的文件包含 id="bento-doc"，并将文档写入该代码块。下载文件中的代码块是空的——浏览器首次打开时会生成示例演示文稿，但磁盘上的文件中没有任何内容需要丢弃或复制，因此不要试图查找它。 新建文档的规则：

  • 编写内容前，先获取 https://bento.page/agents.md**，并以其中的 “Minimal valid document”骨架为起点。size 和 theme（包括 theme.fontFamily）都是必需的**——缺少它们，应用将无法启动。
  • 完整指定各元素字段，如骨架所示（形状需要 stroke/strokeWidth；文本需要 fontFamily/align/valign）——缺少字段会导致渲染错误或完全不显示。
  • 完全省略 docId 和 collab：应用首次打开时会生成新的身份信息和未启用的协作凭证。

完成后，打开文件（open / xdg-open / start）——文件会直接启动编辑器并显示完成的演示文稿——并且报告完成前要检查每张幻灯片。文本溢出、元素彼此拥挤、标题换成三行，以及渲染器漏掉的图表图例，这些问题在 JSON 中都看不出来，在屏幕上却一目了然。编写、渲染、检查、修复；没人看过的演示文稿还不能算完成。

工作流

  1. 找到文档。 定位 #bento-doc 块；解析其中的 JSON。记下 doc.size（标准尺寸为 1280×720）、doc.theme、现有元素的 id，以及 是否设置了 doc.template/doc.readonly。

    先检查 doc.collab。 如果其中包含 ownerPriv、writerPriv 或 invite，那么你即将读取的文件中就有此演示文稿的实时会话密钥——任何收到该文件或 其中 JSON 的人都能加入会话并进行编辑。这是有意设计的：文件本身就是邀请。继续操作前 告知用户，因为只有用户能做决定，而且他们可能不知道演示文稿已共享。提供替代方案：使用只读副本，或在副本中选择 Share → Stop sharing。如果文件已被分享出去，补救方法是 Share → Rotate keys——之后再移除密钥也无法撤回已分享的密钥。

  2. **阅读用户提供的源材料，**并对每部分进行分类——是统计数据、表格、流程、需要展开的定义，还是照片？

  3. 将材料映射到功能（不要默认使用项目符号文本）。 这一步能让它成为 Bento 演示文稿，而不是段落幻灯片：

    • 需要直观比较的数字（趋势、大小、占比）→ 图表元素
    • 对比、规格、定价或功能网格 → 表格元素 （columns 权重 + rows 中的 cells + style 对象）
    • 连续幻灯片展现同一事物的变化 → 形变：让共享元素在两张幻灯片上使用相同的 id，并在 后一张幻灯片上设置 transition:"morph"（Bento 的标志性手法——多多使用）
    • 需要深入展开的要点 → 状态幻灯片（stateOf + 元素 link）
    • 主视觉 / 全屏图片 → 全出血图片 + 遮罩矩形 + 文本， 并添加 ken-burns 漂移效果
    • 序列 / 流程 / 时间线 → 使用带 dash-march 循环动画的线条/path，或通过形变让高亮效果依次经过各步骤
    • 醒目的数字 → 大号文本 + fx:{countUp:true}
    • 每张封面 / 分隔页 → 至少添加一种环境动态效果
    • 重复的装饰元素 / 标志 → 在各张幻灯片中保持其 id 不变，使其在原位形变
    • 演示片段 / 录屏 / 语音片段 → 使用 媒体元素 （kind: video|audio）；将短片嵌入为 data URI，将较大的媒体文件链接到 URL，以减小文件体积

  4. 使用 schema 编写。 保留完整 schema 和可复制粘贴的示例代码： 获取 https://bento.page/agents.md**（其中包含元素结构、形变/图表/状态/ken-burns 代码片段，以及注意事项）。遵循一款强调色、≤2 种字体、96px 侧边距（最右侧的 x ≤ 1184），并为每张幻灯片撰写演讲者备注**。

  5. 完成前自查：

    • 是否有应该用图表呈现、却以文本形式显示的数字？
    • 围绕同一主题的连续幻灯片是否使用相同的 id + transition:"morph"？
    • 是否至少有一个动态效果（ken-burns / 循环 / 数字递增），尤其是封面？
    • 是否有更适合做成状态幻灯片的深入展开内容？
    • 是否使用一款强调色、≤2 种字体和 96px 边距？
    • 每张幻灯片是否都有演讲者备注？

  6. 写回编辑后的 #bento-doc 块（转义 <），或返回替换用的 JSON。绝不要重新生成整个 HTML 文件。

关键注意事项

  • 图表：柱形／折线系列的 data 必须是纯数字（{value,…} 形式的项对象会被转换为 0——只有饼图接受 {name,value}）；按系列而非单个柱条设置颜色；option 必须是纯 JSON，只能使用模板格式化符（{b}／{c}／{d}），不能使用函数。
  • Morph 需要确定且稳定的 ID，并在应该一起动画的幻灯片之间共享。ID 不同就不会进行形变（元素只会直接切换）。
  • 图片／字体必须作为数据 URI 嵌入 doc.assets，并通过 "asset:<key>" 引用——这样文件才能保持自包含。
  • 媒体：media 元素（kind: video|audio）可以在 src 中以数据 URI 嵌入短片（保持自包含），也可以引用大型文件的 URL（保持演示文稿体积小）。autoplay 只会在演示模式下播放，视频还需要设置 muted:true。不要嵌入大型视频——它们会让文件膨胀。
  • 编辑现有演示文稿时，绝不要重新生成 docId；它是文档的身份标识。（新建演示文稿时可省略——应用会生成一个。）
  • template:true → 每次打开都会生成一个全新的演示文稿；readonly:true → 文件启动后直接进入演示，无编辑器。

如需查看各项技术的实际示例，请打开 https://bento.page 上的任意模板，并阅读其中的 #bento-doc 代码块。

评论

支持 Markdown