by4hp/bento-ppt-skill 使用教程：Bento 网格小稿与 HTML deck 验证

使用 by4hp/bento-ppt-skill 时，建议先用小稿验证 Bento 网格、主题色和类名。这个 skill 不是把内容塞进传统 .pptx，而是生成单文件 HTML 横向翻页 deck；如果第一轮没有完成基础验证，后面很容易出现卡片拥挤、颜色混搭、页面像 dashboard 但不好演示的结果。

它真正解决的是另一类问题：产品发布、SaaS 路演、AI demo、数据 dashboard 和功能矩阵展示，需要一种比普通线性幻灯片更像 Apple keynote 与现代 SaaS 页面混合体的视觉结构。先接受它的边界，再安装和试跑，成功率会高很多。

产物边界：HTML deck，不是 PPTX

bento-ppt-skill 的产物是浏览器打开的 index.html。每页被看作 12 列 × 8 行的 Bento Grid，卡片通过 .b-NxM 这类快捷类组合，例如顶部大卡、三I张特性卡、四个核心数字、数据看板式混排。它适合“展示一组产品能力或数据关系”，不适合“把每个元素交给 PowerPoint 继续精修”。

所以开局要先判断内容是否匹配：产品发布会、功能更新、开发者工具路演、模型 demo、KPI 矩阵，都是它的强项；个人故事型分享、培训课件、需要企业多人协作的内部稿，换别的工具更省时间。

安装关键：目录位置和必备文件

仓库 README 给出的安装方式很直接：把 repo clone 到 Claude Code 的 skills 目录，重启 Claude Code，再在新会话里说 /bento-ppt-skill 或“用 bento-ppt-skill 做一份某主题 PPT”。当前仓库的真实 clone 地址可以直接写死，别保留 这种占位。

git clone https://github.com/by4hp/bento-ppt-skill.git \
  ~/.claude/skills/bento-ppt-skill

如果只想在某个项目里使用，把它放到项目内的 .claude/skills/bento-ppt-skill。装完检查四类文件：SKILL.md 是入口说明，assets/template.html 是单文件种子，assets/motion.min.js 是离线动效兜底，references/ 里有主题、布局、组件和检查清单。

ls ~/.claude/skills/bento-ppt-skill/SKILL.md
ls ~/.claude/skills/bento-ppt-skill/assets/template.html
ls ~/.claude/skills/bento-ppt-skill/references

这个 skill 不要求你先启动服务。生成后的 HTML 直接用浏览器打开，动效优先使用本地 motion.min.js，网络不可用时也有兜底。真正要小心的是不要把缺失文件的安装结果当成成功安装：如果没有 template.html 或 references/layouts.md，后面就没有可靠的版式骨架。

小稿检查：类名、主题、卡片数和翻页

第一次调用时，别上来就做 20 页商业路演。先给一个 3 到 5 页的小题目，比如“AI 客服产品发布小稿”，要求它只用一套主题色，页面卡片不要超过 7 张，并在完成后告诉你生成的 index.html 在哪里。

/bento-ppt-skill
帮我做一份 5 页以内的 AI 客服产品发布小稿。
主题用 Apple Dark，先不要加复杂表格，生成 index.html 后说明检查重点。

小稿跑通后，再按仓库 checklist 看四个信号：b-NxM 类是否都在模板里定义，主题色是否只复制一整套，单页卡片数是否在 1 到 7 之间，翻页、空格推进和 ESC 索引是否正常。这个检查比“看起来很炫”更重要，因为 Bento 页面一旦密度失控，后面越改越乱。

如果你只记一条操作原则，就是先让 by4hp/bento-ppt-skill 做一份可翻页的小稿，再决定是否进入正式产品发布或 dashboard deck。它的优势在 Bento 网格和现代科技视觉，不在传统 PPTX 编辑；把安装目录、首轮小稿和 checklist 三关跑顺，后面的正式内容才值得继续加。