企业官网建设流程全解析

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_source=taotoken_aicg_blog_end&utm_content=api_keys&utm_campaign=rewrite ，创建后只显示一次，记得先存到安全的地方。

第二，确认 API 基地址。TaoToken 的 API 入口是 https://taotoken.net/api ，注意这个地址不带 UTM 参数，配置时直接填这个。

第三，把 Key 和地址写进环境变量，避免硬编码到脚本里。Linux 或 macOS 下可以这样：

export TAOTOKEN_API_KEY="sk-你的Key" export TAOTOKEN_BASE_URL="https://taotoken.net/api"

Windows PowerShell 用：

$env:TAOTOKEN_API_KEY="sk-你的Key" $env:TAOTOKEN_BASE_URL="https://taotoken.net/api"

注意：环境变量只在当前终端会话生效。如果你希望长期生效，Linux/macOS 写进~/.bashrc或~/.zshrc，Windows 用系统环境变量面板添加。

如果你还没决定用哪个模型来跑 Skill，可以先去模型对话页面试一下调用是否通： https://taotoken.net/model-chat?utm_source=taotoken_aicg_blog_end&utm_content=model_chat&utm_campaign=rewrite 。确认 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.json

SKILL.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", "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.4s

4.3 参数调整的实操建议

如果第一次输出页数太多，把max_slides调小，同时把density降到low，Skill 会合并要点。如果视觉太素，把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 'class="slide"' 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_source=taotoken_aicg_blog_end&utm_content=api_keys&utm_campaign=rewrite 确认状态。

6.2 报错Skill not found: frontend-slides

Claude 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_source=taotoken_aicg_blog_end&utm_content=coding_plan&utm_campaign=rewrite ，同一个通道不用重复配置。接入细节和参数说明可以对照文档 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite ，遇到 Skill 调用层面的问题先查文档再排查环境，通常更快定位。