1. 从 iThinkAir 大纲到 HTML 幻灯片这条链路到底解决什么问题如果你平时用 iThinkAir 记大纲笔记又经常需要把同一份内容变成能直接打开演示的页面那 Claude Code Skill 加 frontend-slides 这套组合值得试一次。它做的事情很具体把 iThinkAir 里层级化的大纲笔记通过 Claude Code 的 Skill 机制调用 frontend-slides输出一个零依赖、单文件、浏览器直接能打开的 HTML 演示文稿。适合谁适合经常写结构化笔记、做内部技术分享、整理产品更新或课程提纲的人尤其是那些不想为了做几页幻灯片去装一堆构建工具的人。传统路径一般是笔记写完手动复制到 PPT 工具调版式、配图、对齐半小时起步。而这条链路把「排版」交给 Skill把「内容结构」留给你已经写好的大纲。frontend-slides 这个 Skill 的定位就是生成零依赖、动画丰富、视觉完成度较高的 HTML 演示文稿CSS 和 JavaScript 内联在单个文件里不需要 npm也不需要构建步骤。换句话说你拿到的是一个可以直接双击打开、也可以丢到任意静态托管上的文件。这篇会按可复现的顺序走一遍先讲清楚前置条件再给 Skill 配置骨架和 frontend-slides 的参数然后是转换命令、本地打开验证、结构检查最后把常见的报错和坑列出来。中间涉及模型调用通道的地方统一用 TaoToken 的 Key 和 API 地址这样你不用在多个平台之间来回切。2. 前置准备TaoToken 统一 Key 与 API 通道在动手配 Skill 之前先把模型调用这条线打通。Claude Code Skill 在执行时需要通过 API 访问模型这里用 TaoToken 作为统一的 Key 和 API 通道好处是一个 Key 覆盖对话、编码、Agent 等场景不用为每个工具单独申请。你需要做三件事第一拿到 API Key。登录 TaoToken 控制台在 API Keys 页面创建一个新 Key复制保存。地址是 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite 创建后只显示一次记得先存到安全的地方。第二确认 API 基地址。TaoToken 的 API 入口是 https://taotoken.net/api 注意这个地址不带 UTM 参数配置时直接填这个。第三把 Key 和地址写进环境变量避免硬编码到脚本里。Linux 或 macOS 下可以这样export TAOTOKEN_API_KEYsk-你的Key export TAOTOKEN_BASE_URLhttps://taotoken.net/apiWindows PowerShell 用$env:TAOTOKEN_API_KEYsk-你的Key $env:TAOTOKEN_BASE_URLhttps://taotoken.net/api注意环境变量只在当前终端会话生效。如果你希望长期生效Linux/macOS 写进~/.bashrc或~/.zshrcWindows 用系统环境变量面板添加。如果你还没决定用哪个模型来跑 Skill可以先去模型对话页面试一下调用是否通 https://taotoken.net/model-chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite 。确认 Key 能用之后再进入 Skill 配置环节能省掉不少排查时间。3. frontend-slides Skill 配置骨架与参数说明frontend-slides 的核心思路是输入结构化内容输出单文件 HTML 演示文稿。它的配置骨架分三块——Skill 元信息、输入约定、输出参数。下面给一份可以直接改的骨架。3.1 Skill 目录结构Claude Code 的 Skill 一般放在项目的.claude/skills/下frontend-slides 的目录长这样.claude/ skills/ frontend-slides/ SKILL.md templates/ base.html config.jsonSKILL.md是技能说明告诉 Claude Code 这个 Skill 做什么、怎么调用。config.json放默认参数。templates/base.html是输出模板frontend-slides 会把内容和样式注入进去。3.2 SKILL.md 骨架--- name: frontend-slides description: 将结构化大纲笔记转换为零依赖单文件 HTML 演示文稿 --- # frontend-slides ## 输入要求 - 结构化大纲Markdown 层级或 iThinkAir 导出的 outline - 补充信息用途、受众、页数、演讲密度 ## 输出 - 单个 HTML 文件CSS/JS 内联 - 16:9 舞台支持键盘翻页 - 每页信息密度受演讲密度参数控制 ## 调用方式 读取输入大纲按页拆分套用 templates/base.html输出到指定路径。3.3 config.json 参数对照参数作用可选值默认stage_ratio舞台比例16:9/4:316:9theme视觉方向signal/minimal/vividsignaldensity信息密度low/medium/highmediummax_slides最大页数整数12inline_assets资源内联true/falsetruetransition翻页动画fade/slide/noneslide{ stage_ratio: 16:9, theme: signal, density: medium, max_slides: 10, inline_assets: true, transition: slide }theme选signal偏稳重适合技术或产品更新简报minimal更干净适合课程vivid视觉更强适合对外传播。density直接决定每页塞多少字内部分享建议medium演讲型建议low。3.4 补充信息表单字段frontend-slides 支持通过补充信息控制成品定位字段包括用途内部分享 / 对外发布 / 课程材料目标受众技术团队 / 产品团队 / 泛用户阅读或演讲密度低 / 中 / 高期望页数整数内容边界需要强调的结论、需要省略的部分这些字段不是可选项。用途和受众会直接影响叙事节奏页数和密度会约束输出规模。填得越具体返工越少。4. 从 iThinkAir 大纲到 HTML 的转换命令与执行配置好之后进入实际转换。这一步分两个动作把 iThinkAir 大纲导出成 Skill 能读的格式然后执行转换命令。4.1 导出 iThinkAir 大纲iThinkAir 的大纲笔记本身是层级结构导出时选 Markdown 或 outline 格式。假设导出文件叫notebooklm-update.md内容大致是# 这次新的 NotebookLM 更新改变了一切 ## 核心观点 - NotebookLM 从笔记工具升级为能自主研究、生成代码并产出成品的智能体 ## 三项核心变化 - 使用更强的 Gemini 模型 - 集成 antigravity 能力 - 工作流从读资料变成造成品 ## 输出形态扩展 - 总结和引用 - 图表、文档、表格、幻灯片 ## 对工作流的影响 - 从整理资料到交付成品这种层级正好对应幻灯片的「主线 分页」。Skill 会按 H2 拆页H3 和列表作为页内要点。4.2 执行转换在 Claude Code 里调用 Skill命令形式如下claude skill run frontend-slides \ --input ./notebooklm-update.md \ --output ./dist/notebooklm-update.html \ --config ./.claude/skills/frontend-slides/config.json \ --meta {purpose:内部分享,audience:技术团队,density:medium,max_slides:10}如果你用的是 TaoToken 通道确保环境变量已经导出Skill 在调用模型时会自动读取TAOTOKEN_API_KEY和TAOTOKEN_BASE_URL。执行后终端会输出类似[frontend-slides] 读取输入: notebooklm-update.md [frontend-slides] 拆分页数: 10 [frontend-slides] 应用主题: signal [frontend-slides] 输出: ./dist/notebooklm-update.html [frontend-slides] 完成耗时 18.4s4.3 参数调整的实操建议如果第一次输出页数太多把max_slides调小同时把density降到lowSkill 会合并要点。如果视觉太素把theme换成vivid。如果翻页动画影响讲解把transition设为none。这些改动都在config.json里改完重跑命令即可不需要重新导出大纲。5. 本地打开验证与结构检查生成 HTML 之后别急着分享先本地打开检查一遍。这一步能挡掉大部分「看起来生成了但没法用」的问题。5.1 本地打开最简单的方式是直接双击 HTML 文件或者用命令行起一个本地静态服务cd dist python3 -m http.server 8080然后浏览器访问http://localhost:8080/notebooklm-update.html。用本地服务而不是直接双击是因为部分浏览器对file://协议下的内联脚本有额外限制起服务能避免这类干扰。5.2 结构检查清单打开后按这几项过一遍首屏是否在 3 秒内呈现核心观点而不是一堆装饰每页信息量是否和density设置一致medium下每页要点控制在 4 到 6 条键盘左右方向键能否正常翻页字体在 1080p 和笔记本屏幕上是否都清晰移动端窄屏下是否出现横向滚动条最后一页是否有明确收尾而不是空白5.3 用命令行做结构抽查如果页数多可以用脚本快速统计页数和标题grep -o classslide dist/notebooklm-update.html | wc -l grep -o h2[^]*[^]*/h2 dist/notebooklm-update.html第一条统计页数第二条列出每页标题。对照你的大纲看有没有漏页或标题错位。这一步比肉眼翻页快得多尤其是 10 页以上的演示文稿。6. 本篇常见错误排查转换链路里最容易卡住的地方集中在环境、输入格式和输出检查三块。下面按现象列出来。6.1 报错401 Unauthorized说明 Key 没被正确读取。先确认环境变量echo $TAOTOKEN_API_KEY echo $TAOTOKEN_BASE_URL如果为空重新导出。如果非空但仍报 401检查 Key 是否在 TaoToken 控制台被禁用或删除去 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite 确认状态。6.2 报错Skill not found: frontend-slidesClaude Code 没找到 Skill 目录。确认.claude/skills/frontend-slides/SKILL.md存在且当前工作目录是项目根目录。如果 Skill 放在全局目录检查~/.claude/skills/下是否有对应文件夹。6.3 输出 HTML 打开是空白多半是模板注入失败。检查templates/base.html里是否有占位符没被替换比如{{content}}还在。另外确认inline_assets为true时模板里的 CSS 和 JS 确实被内联而不是引用了外部路径。6.4 页数和预期不符max_slides是上限不是目标值。如果大纲层级少Skill 会合并页面。想让页数更接近预期把大纲拆得更细或者把density调低让每页承载更少内容。6.5 中文显示成方块模板里没指定中文字体。在base.html的font-family里加上系统中文字体回退font-family: PingFang SC, Microsoft YaHei, Noto Sans SC, sans-serif;改完重跑转换命令即可。6.6 翻页卡顿如果transition用了slide且页面元素多低配机器上会卡。把transition改成fade或none或者减少单页动画元素数量。7. 把这条链路固定成日常流程跑通一次之后建议把命令固化成脚本避免每次手敲参数。比如在项目根目录放一个make-slides.sh#!/usr/bin/env bash set -e INPUT${1:-./notebooklm-update.md} OUTPUT${2:-./dist/slides.html} claude skill run frontend-slides \ --input $INPUT \ --output $OUTPUT \ --config ./.claude/skills/frontend-slides/config.json \ --meta {purpose:内部分享,audience:技术团队,density:medium,max_slides:10} echo 生成完成: $OUTPUT之后每次写完 iThinkAir 大纲导出 Markdown执行./make-slides.sh 你的大纲.md再起本地服务检查一遍整个流程控制在几分钟内。如果你后续要做更长期的编码或 Agent 任务可以把 Key 复用到 Coding Plan 场景地址是 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite 同一个通道不用重复配置。接入细节和参数说明可以对照文档 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 遇到 Skill 调用层面的问题先查文档再排查环境通常更快定位。