1. 从「模板里抠颜色」到「说一句话就出片」我为什么盯上了这个 GitHub 19K 项目如果你也做过对外汇报大概经历过这种循环打开模板站翻二十页找一套「不那么像模板」的配色改完标题改字号改完字号发现图表对不齐最后交上去的东西自己都不想看第二眼。问题不在于你不会做 PPT而在于「排版」这件事本身消耗了太多本该花在内容上的时间。frontend-slides 这个项目解决的就是这一段。它在 GitHub 上有 19K 量级的收藏定位很明确用 AI 把一段文字描述或者一份旧的 PPTX 文件直接生成一份零依赖的单文件 HTML 动画演示文稿。你不需要 Canva不需要 MasterGo不需要在模板里抠颜色只要告诉 AI 你要讲什么剩下的它来。它本质上是一个 Claude Code 技能skill不是独立网站也不是 App而是装在 Claude Code 里、通过对话驱动的工具。你说「帮我做一个 Q2 销售复盘的演示六页风格现代一点」它会吐出一个完整的 HTML 文件动画、排版、配色全部内联在里面浏览器打开就能全屏放映。和普通模板相比差异集中在三点。第一零依赖单文件样式和脚本全部内联复制给任何人、用任何浏览器打开都一致不会出现字体丢失、图片找不到。第二内置十几种精心设计的风格深色系、浅色系、特殊风格都有明确避开了「AI 生成的大众模板感」。第三支持从旧 PPTX 提取文字、图片、备注重新排版成 HTML你已有的内容不用白费。这篇要讲的不是「这个工具多好」而是完整落地链路怎么把它接到 Claude Code 上怎么用 TaoToken 统一 Key 和 API 通道settings.json和config.toml怎么写CC Switch 怎么切最后跑一次真实的动画 PPT 生成来验证。照着做你能从一句中文描述走到一份可放映的 HTML 演示文稿。2. 前置准备TaoToken 统一 Key 与 Claude Code 接入2.1 为什么要在中间加一层统一 KeyClaude Code 默认走 Anthropic 官方通道配置分散在环境变量、settings.json、config.toml几个地方换一次模型或者换一次额度就要改一圈。更麻烦的是如果你同时用多个模型、多个项目Key 管理会变成一团乱麻。TaoToken 在这里的角色是统一入口一个 Key 覆盖模型对话、编码、Agent 等场景Claude Code 只需要指向一个 base URL 和一个 Key剩下的切换动作交给它。官网在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 入口是 https://taotoken.net/api 这个不加 UTM。需要说清楚的是TaoToken 是合规的 API 聚合与统一 Key 服务不是所谓「中转」也不涉及任何网络访问工具。你只是把 Claude Code 的请求地址指向一个统一网关Key 和额度在控制台里管理。2.2 拿到 Key 并确认通道先去控制台创建 API Key控制台https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewriteAPI Keys 管理https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite创建后你会得到一串sk-开头的 Key先复制到剪贴板后面配置要用。同时确认一下你要用的模型在通道里可用不确定的话可以先去模型对话页试一句模型对话https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewrite如果对话页能正常返回说明 Key 和通道没问题再往下配 Claude Code 就不会卡在鉴权上。2.3 安装 Claude Code 与 frontend-slides 技能Claude Code 的安装按官方指引走即可装完确认claude命令能在终端里跑起来。然后安装 frontend-slides 技能在 Claude Code 对话框里执行/plugin marketplace add MageByte-Zero/frontend-slides /plugin install frontend-slidesfrontend-slides等半分钟左右安装完成这是一次性操作。验证方式是输入/frontend-slides如果 AI 回应让你描述需求说明技能已就位。注意原作者的版本有不少 bug 没修社区有 fork 修复版建议用修复后的仓库否则生成阶段容易踩坑。3. 可复制配置settings.json 与 config.toml 骨架3.1 settings.json把 Claude Code 指向统一通道Claude Code 的用户级配置一般放在~/.claude/settings.json项目级放在项目根目录的.claude/settings.json。核心是把 base URL 和 Key 指到 TaoToken{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: sk-你的TaoToken密钥, ANTHROPIC_MODEL: claude-sonnet-4-5, ANTHROPIC_SMALL_FAST_MODEL: claude-haiku-4-5 }, permissions: { allow: [ Bash(python scripts/extract-pptx.py:*), Read, Write ] } }几个参数说明一下。ANTHROPIC_BASE_URL指向https://taotoken.net/api注意这里不带任何查询参数。ANTHROPIC_AUTH_TOKEN填你刚创建的 Key。ANTHROPIC_MODEL是主模型负责生成 HTML 这种重活ANTHROPIC_SMALL_FAST_MODEL是轻量模型处理意图识别、文件读取这类小任务能省不少额度。permissions.allow里放的是 frontend-slides 会用到的动作尤其是提取 PPTX 的 Python 脚本提前放行可以避免生成过程中反复弹确认。3.2 config.toml给需要 TOML 的场景留一份有些工具链或者团队规范要求用 TOML 管理配置等价写法如下[env] ANTHROPIC_BASE_URL https://taotoken.net/api ANTHROPIC_AUTH_TOKEN sk-你的TaoToken密钥 ANTHROPIC_MODEL claude-sonnet-4-5 ANTHROPIC_SMALL_FAST_MODEL claude-haiku-4-5 [permissions] allow [ Bash(python scripts/extract-pptx.py:*), Read, Write, ]两份配置的语义完全一致选你项目里已经在用的那份就行不要同时生效否则容易出现「改了 A 没生效」的困惑。3.3 CC Switch一键切换配置档如果你在多个 Key、多个模型之间来回切手动改 JSON 很容易出错。CC Switch 这类配置切换工具的作用就是把这些 profile 存起来一键切换。配置思路是为每个环境建一个 profile比如taotoken-sonnet、taotoken-haiku每个 profile 里存一份完整的settings.json内容。切换时工具会把对应内容写回~/.claude/settings.jsonClaude Code 下次启动就生效。切换动作本身很简单选中目标 profile 点应用即可。真正要注意的是切换后重启 Claude Code因为环境变量是在进程启动时读取的热改文件不一定立刻生效。提示切换前先确认当前 profile 里ANTHROPIC_BASE_URL指向的是https://taotoken.net/api避免切到一半发现请求打到了别处。4. 验证请求从一句中文描述到可放映的 HTML4.1 先做一次最小连通性验证配置写完别急着生成 PPT先用一条最简请求确认通道通了。在 Claude Code 里输入claude -p 只回复两个字通了如果返回「通了」说明 Key、base URL、模型三者都对上了。如果报 401检查 Key 是否复制完整如果报 404检查 base URL 是不是写成了带路径的形式。4.2 触发 frontend-slides 生成动画 PPT连通之后输入/frontend-slides然后按正常说话的方式描述需求。描述越具体生成质量越高帮我做一个 Q2 销售复盘的演示文稿大概 6 页。 第一页封面标题「Q2 销售复盘」副标题「2024 上半年」。 第二页 Q2 整体完成率 87%达成年度目标的 43%。 第三页三个重点成交案例每个案例一句话说明。 第四页下半年三个策略方向。 第五页重点客户列表五个客户。 第六页结语。 风格要现代、深色不要那种大众模板感。AI 收到后会展示风格预览让你选。不同场合的推荐大致是这样使用场景推荐风格特点向领导汇报、述职Bold Signal深色背景标题强调专业感强对外客户提案Swiss Modern克制、精致有设计感团队内部分享Notebook Tabs干净、轻盈不压迫产品发布、创意展示Electric Studio / Neon Cyber视觉冲击力强年度总结、回顾类Vintage Editorial有质感不花哨选完风格AI 开始生成一般一到三分钟你会拿到一个.html文件。用浏览器打开按F11Windows或Cmd Ctrl FMac全屏方向键翻页动画会自动播放。4.3 从旧 PPTX 转换的完整命令如果你手上已经有 PPTX想换一套视觉风格流程多一步提取。先装依赖pip install python-pptx然后把文件放到固定目录在 Claude Code 里告诉 AI 路径它会自动调用提取脚本。你也可以自己跑python scripts/extract-pptx.py 述职.pptx脚本会把每页的文字、图片、备注整理出来AI 展示给你确认后选风格重新生成 HTML。注意PPTX 里原本的切换动画和元素动画不会被迁移HTML 版会用 frontend-slides 自带的动画替代通常更流畅但风格不同。另外Excel 联动的数据图表会按截图处理不是可编辑矢量图。4.4 成功结果长什么样生成完成后你会得到一个单文件 HTML里面内联了所有 CSS 和 JS。判断成功的标准有三条浏览器打开无报错、翻页动画正常、中文字体显示正常。把文件发给同事对方用任何浏览器打开效果一致就说明零依赖这条走通了。5. 本篇常见错排查5.1 报 401 / 403Key 或通道问题最常见的原因是 Key 复制时带了空格或者ANTHROPIC_AUTH_TOKEN写成了ANTHROPIC_API_KEY。Claude Code 认的是前者。另外确认 base URL 是https://taotoken.net/api不要多加/v1之类的后缀。排查顺序先用模型对话页验证 Key 本身可用再回到 Claude Code 里跑最小请求逐步缩小范围。5.2 技能装了但/frontend-slides没反应先确认安装命令执行时没有报错再检查 Claude Code 版本是否支持 plugin marketplace。如果装的是原作者版本部分环境下技能注册会失败换成修复版仓库重装一次通常能解决。5.3 生成到一半卡住或超时多半是模型选得太重或者描述太长。可以先把ANTHROPIC_MODEL换成更快的型号跑通流程确认链路没问题再换回高质量模型。另外permissions.allow里没放行 Python 脚本时提取 PPTX 那一步会卡在确认弹窗上看起来像卡死其实是等你点确认。5.4 中文字体显示偏差HTML 在某些 Windows 系统上打开中文字重可能偏细。优先用 Chrome 打开字体支持最稳定。如果要发给不确定对方用什么浏览器的人浏览器里「打印 → 保存为 PDF」是最保险的做法。5.5 HTML 通过微信发送后打不开微信会把 HTML 当网页处理通常只显示代码。正确做法是发群文件、云盘链接或者先转 PDF 再发。如果是当场汇报直接在自己电脑上打开浏览器放映就行。6. 把这条链路固定下来跑通一次之后我建议你把配置沉淀成两份东西一份是settings.json的 profile交给 CC Switch 管理一份是常用描述模板把「页数、每页要点、风格偏好」写成固定结构下次直接改数字就行。需要长期做编码和 Agent 任务的可以看 Coding Plan把额度和模型规划一次配好Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite接入过程中遇到鉴权、配置、切换问题的直接对照 API Keys 和接入文档API Keyshttps://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite接入文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewriteClaude Code 相关的接入细节文档里也有对应章节Claude Code / Anthropic 接入https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentclaudecode-anthropicutm_campaignrewrite想先验证模型效果再决定用哪个的去模型对话页试几句模型对话https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewrite最后留一个我踩过的坑切换 profile 之后一定要重启 Claude Code环境变量是启动时读的热改文件经常看起来「没生效」其实只是进程还在用旧配置。把这一步养成习惯后面省下的排查时间比配置本身多得多。
用文字直接生成 HTML 动画演示文稿 PPT：GitHub 19K 收藏的 AI 工具，配 TaoToken 统一 Key 后我彻底换了路子
1. 从「模板里抠颜色」到「说一句话就出片」我为什么盯上了这个 GitHub 19K 项目如果你也做过对外汇报大概经历过这种循环打开模板站翻二十页找一套「不那么像模板」的配色改完标题改字号改完字号发现图表对不齐最后交上去的东西自己都不想看第二眼。问题不在于你不会做 PPT而在于「排版」这件事本身消耗了太多本该花在内容上的时间。frontend-slides 这个项目解决的就是这一段。它在 GitHub 上有 19K 量级的收藏定位很明确用 AI 把一段文字描述或者一份旧的 PPTX 文件直接生成一份零依赖的单文件 HTML 动画演示文稿。你不需要 Canva不需要 MasterGo不需要在模板里抠颜色只要告诉 AI 你要讲什么剩下的它来。它本质上是一个 Claude Code 技能skill不是独立网站也不是 App而是装在 Claude Code 里、通过对话驱动的工具。你说「帮我做一个 Q2 销售复盘的演示六页风格现代一点」它会吐出一个完整的 HTML 文件动画、排版、配色全部内联在里面浏览器打开就能全屏放映。和普通模板相比差异集中在三点。第一零依赖单文件样式和脚本全部内联复制给任何人、用任何浏览器打开都一致不会出现字体丢失、图片找不到。第二内置十几种精心设计的风格深色系、浅色系、特殊风格都有明确避开了「AI 生成的大众模板感」。第三支持从旧 PPTX 提取文字、图片、备注重新排版成 HTML你已有的内容不用白费。这篇要讲的不是「这个工具多好」而是完整落地链路怎么把它接到 Claude Code 上怎么用 TaoToken 统一 Key 和 API 通道settings.json和config.toml怎么写CC Switch 怎么切最后跑一次真实的动画 PPT 生成来验证。照着做你能从一句中文描述走到一份可放映的 HTML 演示文稿。2. 前置准备TaoToken 统一 Key 与 Claude Code 接入2.1 为什么要在中间加一层统一 KeyClaude Code 默认走 Anthropic 官方通道配置分散在环境变量、settings.json、config.toml几个地方换一次模型或者换一次额度就要改一圈。更麻烦的是如果你同时用多个模型、多个项目Key 管理会变成一团乱麻。TaoToken 在这里的角色是统一入口一个 Key 覆盖模型对话、编码、Agent 等场景Claude Code 只需要指向一个 base URL 和一个 Key剩下的切换动作交给它。官网在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 入口是 https://taotoken.net/api 这个不加 UTM。需要说清楚的是TaoToken 是合规的 API 聚合与统一 Key 服务不是所谓「中转」也不涉及任何网络访问工具。你只是把 Claude Code 的请求地址指向一个统一网关Key 和额度在控制台里管理。2.2 拿到 Key 并确认通道先去控制台创建 API Key控制台https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewriteAPI Keys 管理https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite创建后你会得到一串sk-开头的 Key先复制到剪贴板后面配置要用。同时确认一下你要用的模型在通道里可用不确定的话可以先去模型对话页试一句模型对话https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewrite如果对话页能正常返回说明 Key 和通道没问题再往下配 Claude Code 就不会卡在鉴权上。2.3 安装 Claude Code 与 frontend-slides 技能Claude Code 的安装按官方指引走即可装完确认claude命令能在终端里跑起来。然后安装 frontend-slides 技能在 Claude Code 对话框里执行/plugin marketplace add MageByte-Zero/frontend-slides /plugin install frontend-slidesfrontend-slides等半分钟左右安装完成这是一次性操作。验证方式是输入/frontend-slides如果 AI 回应让你描述需求说明技能已就位。注意原作者的版本有不少 bug 没修社区有 fork 修复版建议用修复后的仓库否则生成阶段容易踩坑。3. 可复制配置settings.json 与 config.toml 骨架3.1 settings.json把 Claude Code 指向统一通道Claude Code 的用户级配置一般放在~/.claude/settings.json项目级放在项目根目录的.claude/settings.json。核心是把 base URL 和 Key 指到 TaoToken{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: sk-你的TaoToken密钥, ANTHROPIC_MODEL: claude-sonnet-4-5, ANTHROPIC_SMALL_FAST_MODEL: claude-haiku-4-5 }, permissions: { allow: [ Bash(python scripts/extract-pptx.py:*), Read, Write ] } }几个参数说明一下。ANTHROPIC_BASE_URL指向https://taotoken.net/api注意这里不带任何查询参数。ANTHROPIC_AUTH_TOKEN填你刚创建的 Key。ANTHROPIC_MODEL是主模型负责生成 HTML 这种重活ANTHROPIC_SMALL_FAST_MODEL是轻量模型处理意图识别、文件读取这类小任务能省不少额度。permissions.allow里放的是 frontend-slides 会用到的动作尤其是提取 PPTX 的 Python 脚本提前放行可以避免生成过程中反复弹确认。3.2 config.toml给需要 TOML 的场景留一份有些工具链或者团队规范要求用 TOML 管理配置等价写法如下[env] ANTHROPIC_BASE_URL https://taotoken.net/api ANTHROPIC_AUTH_TOKEN sk-你的TaoToken密钥 ANTHROPIC_MODEL claude-sonnet-4-5 ANTHROPIC_SMALL_FAST_MODEL claude-haiku-4-5 [permissions] allow [ Bash(python scripts/extract-pptx.py:*), Read, Write, ]两份配置的语义完全一致选你项目里已经在用的那份就行不要同时生效否则容易出现「改了 A 没生效」的困惑。3.3 CC Switch一键切换配置档如果你在多个 Key、多个模型之间来回切手动改 JSON 很容易出错。CC Switch 这类配置切换工具的作用就是把这些 profile 存起来一键切换。配置思路是为每个环境建一个 profile比如taotoken-sonnet、taotoken-haiku每个 profile 里存一份完整的settings.json内容。切换时工具会把对应内容写回~/.claude/settings.jsonClaude Code 下次启动就生效。切换动作本身很简单选中目标 profile 点应用即可。真正要注意的是切换后重启 Claude Code因为环境变量是在进程启动时读取的热改文件不一定立刻生效。提示切换前先确认当前 profile 里ANTHROPIC_BASE_URL指向的是https://taotoken.net/api避免切到一半发现请求打到了别处。4. 验证请求从一句中文描述到可放映的 HTML4.1 先做一次最小连通性验证配置写完别急着生成 PPT先用一条最简请求确认通道通了。在 Claude Code 里输入claude -p 只回复两个字通了如果返回「通了」说明 Key、base URL、模型三者都对上了。如果报 401检查 Key 是否复制完整如果报 404检查 base URL 是不是写成了带路径的形式。4.2 触发 frontend-slides 生成动画 PPT连通之后输入/frontend-slides然后按正常说话的方式描述需求。描述越具体生成质量越高帮我做一个 Q2 销售复盘的演示文稿大概 6 页。 第一页封面标题「Q2 销售复盘」副标题「2024 上半年」。 第二页 Q2 整体完成率 87%达成年度目标的 43%。 第三页三个重点成交案例每个案例一句话说明。 第四页下半年三个策略方向。 第五页重点客户列表五个客户。 第六页结语。 风格要现代、深色不要那种大众模板感。AI 收到后会展示风格预览让你选。不同场合的推荐大致是这样使用场景推荐风格特点向领导汇报、述职Bold Signal深色背景标题强调专业感强对外客户提案Swiss Modern克制、精致有设计感团队内部分享Notebook Tabs干净、轻盈不压迫产品发布、创意展示Electric Studio / Neon Cyber视觉冲击力强年度总结、回顾类Vintage Editorial有质感不花哨选完风格AI 开始生成一般一到三分钟你会拿到一个.html文件。用浏览器打开按F11Windows或Cmd Ctrl FMac全屏方向键翻页动画会自动播放。4.3 从旧 PPTX 转换的完整命令如果你手上已经有 PPTX想换一套视觉风格流程多一步提取。先装依赖pip install python-pptx然后把文件放到固定目录在 Claude Code 里告诉 AI 路径它会自动调用提取脚本。你也可以自己跑python scripts/extract-pptx.py 述职.pptx脚本会把每页的文字、图片、备注整理出来AI 展示给你确认后选风格重新生成 HTML。注意PPTX 里原本的切换动画和元素动画不会被迁移HTML 版会用 frontend-slides 自带的动画替代通常更流畅但风格不同。另外Excel 联动的数据图表会按截图处理不是可编辑矢量图。4.4 成功结果长什么样生成完成后你会得到一个单文件 HTML里面内联了所有 CSS 和 JS。判断成功的标准有三条浏览器打开无报错、翻页动画正常、中文字体显示正常。把文件发给同事对方用任何浏览器打开效果一致就说明零依赖这条走通了。5. 本篇常见错排查5.1 报 401 / 403Key 或通道问题最常见的原因是 Key 复制时带了空格或者ANTHROPIC_AUTH_TOKEN写成了ANTHROPIC_API_KEY。Claude Code 认的是前者。另外确认 base URL 是https://taotoken.net/api不要多加/v1之类的后缀。排查顺序先用模型对话页验证 Key 本身可用再回到 Claude Code 里跑最小请求逐步缩小范围。5.2 技能装了但/frontend-slides没反应先确认安装命令执行时没有报错再检查 Claude Code 版本是否支持 plugin marketplace。如果装的是原作者版本部分环境下技能注册会失败换成修复版仓库重装一次通常能解决。5.3 生成到一半卡住或超时多半是模型选得太重或者描述太长。可以先把ANTHROPIC_MODEL换成更快的型号跑通流程确认链路没问题再换回高质量模型。另外permissions.allow里没放行 Python 脚本时提取 PPTX 那一步会卡在确认弹窗上看起来像卡死其实是等你点确认。5.4 中文字体显示偏差HTML 在某些 Windows 系统上打开中文字重可能偏细。优先用 Chrome 打开字体支持最稳定。如果要发给不确定对方用什么浏览器的人浏览器里「打印 → 保存为 PDF」是最保险的做法。5.5 HTML 通过微信发送后打不开微信会把 HTML 当网页处理通常只显示代码。正确做法是发群文件、云盘链接或者先转 PDF 再发。如果是当场汇报直接在自己电脑上打开浏览器放映就行。6. 把这条链路固定下来跑通一次之后我建议你把配置沉淀成两份东西一份是settings.json的 profile交给 CC Switch 管理一份是常用描述模板把「页数、每页要点、风格偏好」写成固定结构下次直接改数字就行。需要长期做编码和 Agent 任务的可以看 Coding Plan把额度和模型规划一次配好Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite接入过程中遇到鉴权、配置、切换问题的直接对照 API Keys 和接入文档API Keyshttps://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite接入文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewriteClaude Code 相关的接入细节文档里也有对应章节Claude Code / Anthropic 接入https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentclaudecode-anthropicutm_campaignrewrite想先验证模型效果再决定用哪个的去模型对话页试几句模型对话https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewrite最后留一个我踩过的坑切换 profile 之后一定要重启 Claude Code环境变量是启动时读的热改文件经常看起来「没生效」其实只是进程还在用旧配置。把这一步养成习惯后面省下的排查时间比配置本身多得多。
