企业官网建设流程全解析

1. 为什么我要用 Claude Code 搭一个前端知识库

前端知识有个很烦人的特点：更新快、碎片多、来源杂。今天在 MDN 上看到structuredClone的深拷贝边界，明天在 issue 里翻到 React 18 并发渲染下useEffect的执行顺序变化，后天又踩了 Vite 5 的optimizeDeps预构建坑。这些知识点如果只是躺在浏览器书签或者聊天记录里，三个月后你根本找不到，更别说复用。

我试过用 Notion、Obsidian、语雀各搭一遍，最后都死在同一个环节：录入成本太高。手动建文件、想标题、打标签、归类目录，一套流程下来写代码的兴致都没了。真正能跑起来的知识库，录入这一步必须接近零摩擦。

Claude Code 在这里的价值不是"帮你写笔记"，而是它本身就跑在你的项目目录里，能直接读写文件、执行命令、按你定义的规则生成结构化 Markdown。你只需要把"知识该怎么组织"这件事写成一份SKILL.md，剩下的归类、命名、打标签、落盘全部交给它。这就是所谓的前端知识库自动化沉淀路径：SKILL.md 定义规则，Claude Code 执行规则，VSCode 负责检索和阅读。

这套方案适合谁？三类人最合适。第一类是正在系统学习前端、每天都有新知识点进账的初中级工程师，你需要一个能自动归档的"第二大脑"。第二类是团队里负责技术沉淀的人，想把散落在群聊和 PR 评论里的结论固化下来。第三类是已经在用 Claude Code 写代码、想把它从"编码助手"扩展成"知识管理助手"的开发者。

整条链路的核心检索词就三个：Claude Code、SKILL.md、前端知识库。下面我会从零开始，把目录约定、SKILL.md 模板、VSCode 配置、验证动作全部给全，你照着做就能跑通。中间涉及模型调用的部分，我用 TaoToken 作为统一入口来演示，因为它同时支持 Claude Code 的 Anthropic 协议和常规 API 调用，配置一次就能覆盖后面所有步骤。

先说清楚最终形态，避免你做到一半不知道目标长什么样：

你的项目/ ├── .claude/ │ └── skills/ │ └── frontend-secretary/ │ └── SKILL.md # 知识组织规则的大脑 ├── knowledgeBase/ │ ├── README.md # 知识库首页/索引 │ ├── react/ │ ├── css/ │ ├── typescript/ │ └── tooling/ └── .vscode/ └── settings.json # 检索入口配置

新增一条前端知识点后，Claude Code 会读取SKILL.md里的规则，判断它属于哪个分类，生成带 frontmatter 的 Markdown 文件，落到对应目录，并且能被 VSCode 的搜索和自定义任务快速检索到。这就是我们要验证的完整闭环。

2. 前置准备：TaoToken 接入 Claude Code 的配置

在写 SKILL.md 之前，得先让 Claude Code 能正常调用模型。Claude Code 默认走 Anthropic 的接口协议，我们需要把它的 Base URL 指向一个兼容 Anthropic 协议的服务端点。TaoToken 提供了这个能力，官网是 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，API 端点是 https://taotoken.net/api 。

第一步，去控制台创建 API Key。打开 https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_content=console_key&utm_campaign=rewrite ，在 API Keys 页面新建一个密钥，复制出来先存好。这个 Key 后面要写进环境变量，不要直接硬编码到项目文件里提交到 Git。

第二步，配置 Claude Code 的环境变量。Claude Code 读取的是ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY这两个变量。在 macOS/Linux 下编辑~/.zshrc或~/.bashrc，Windows 下用系统环境变量或者 PowerShell 的$PROFILE：

# macOS / Linux，写入 ~/.zshrc export ANTHROPIC_BASE_URL="https://taotoken.net/api" export ANTHROPIC_API_KEY="sk-你的TaoToken密钥"

# Windows PowerShell，写入 $PROFILE $env:ANTHROPIC_BASE_URL = "https://taotoken.net/api" $env:ANTHROPIC_API_KEY = "sk-你的TaoToken密钥"

改完记得source ~/.zshrc或者重开终端。这里有个坑要提前说：Base URL 结尾不要带/v1，Claude Code 会自己拼接路径，多写一层会导致 404。如果你之前配过别的端点，先把旧变量清掉再设新的。

第三步，验证 Claude Code 能连上。在任意目录执行：

claude --version claude "用一句话说明什么是闭包"

如果第二条命令能正常返回中文回答，说明模型通道打通了。如果报 401，八成是 Key 复制时带了空格或者引号；如果报连接超时，检查 Base URL 是不是写成了https://taotoken.net/api/带尾斜杠，去掉它。

关于模型选择，Claude Code 场景下建议用支持长上下文和工具调用的模型，因为读写文件、执行命令都依赖 function calling 能力。如果你后面要做长期的编码和 Agent 任务，可以考虑 Coding Plan，入口在 https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding_plan&utm_campaign=rewrite ，它按订阅制计费，比按量付费更适合高频使用。想先对比不同模型的表现，可以用模型对话页面 https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=model_chat&utm_campaign=rewrite 快速试几个 prompt。

这一步做完，Claude Code 就具备了"能读能写能执行"的基础能力，接下来才是真正定义知识库规则的部分。

3. 可复制配置：SKILL.md 模板与目录约定

这一节是整篇的核心，配置给全，你直接抄。先建目录结构，在项目根目录执行：

mkdir -p .claude/skills/frontend-secretary mkdir -p knowledgeBase/{react,css,typescript,tooling} touch knowledgeBase/README.md

然后创建.claude/skills/frontend-secretary/SKILL.md。注意 Claude Code 只识别.claude/skills这个路径，放到别的地方它读不到，这是最常见的"技能不生效"原因。文件内容如下：

--- name: frontend-secretary description: 前端知识沉淀助手。当用户要求总结对话中的前端知识、生成技术笔记、整理代码片段，或说"沉淀一下""记到知识库""生成前端笔记"时触发。全程用中文回答。 --- # 前端小秘书 ## 角色定义 你是一个专业的前端知识管理助手，负责把非结构化的对话、代码片段、报错排查过程，转化为结构清晰、可检索的 Markdown 技术文档。 ## 触发条件 用户输入包含以下意图时激活： - "总结刚才的对话" - "把这段代码的知识点记下来" - "生成前端笔记" - "沉淀一下这个技术" - "记到知识库" ## 核心任务 1. 提取核心：识别对话中的前端技术点（React、Vue、CSS、TypeScript、构建工具、性能优化等）。 2. 去伪存真：删除闲聊、试错过程和冗余信息，只保留最终正确结论和最佳实践。 3. 分类归档：根据知识点主领域，决定写入 knowledgeBase 下的哪个子目录。 4. 生成文件：文件名格式为 `YYYY-MM-DD_简短标题.md`，写入对应子目录。 ## 分类规则 - react/：React、Hooks、状态管理、组件设计、并发渲染 - css/：布局、选择器、动画、响应式、CSS 变量 - typescript/：类型系统、泛型、类型体操、tsconfig - tooling/：Vite、Webpack、ESLint、包管理、CI 构建 如果知识点跨多个分类，以"主要解决的问题"所属领域为准，其余分类写进 tags。 ## 输出模板 严格按以下格式生成文件内容，不要输出模板之外的废话： --- title: [简练标题] date: [YYYY-MM-DD] tags: [标签1, 标签2, 标签3] category: [react|css|typescript|tooling] --- ## 核心摘要 > [一句话概括本次沉淀的核心价值] ## 知识点详情 ### [知识点分类] - 原理/概念：[简要解释] - 关键代码： ```javascript // 关键代码片段，带简短注释

• 注意事项：
  • [易错点或最佳实践]

参考资料

• [对话中提到的官方文档或链接]

执行约束

• 所有代码块必须标注语言。
• 文件必须写入 knowledgeBase 对应子目录，不要写到项目根目录。
• 生成后，在 knowledgeBase/README.md 的索引列表追加一行链接。

这份 SKILL.md 里有三个设计点值得说明。第一，`description` 字段是触发识别的关键，必须包含具体触发词，写得太模糊 Claude Code 不会激活它。第二，分类规则写死成四个目录，避免 AI 每次自由发挥导致目录越来越乱。第三，最后一条约束要求它同步更新 README 索引，这样知识库首页始终是最新的目录。 接着配置 VSCode 的检索入口。在 `.vscode/settings.json` 里加两段，一段是搜索排除，一段是自定义任务： ```json { "search.exclude": { "**/node_modules": true, "**/dist": true }, "search.useIgnoreFiles": true, "files.associations": { "*.md": "markdown" }, "workbench.editor.labelFormat": "short" }

再建一个.vscode/tasks.json，把"打开知识库首页"和"按标签搜索"做成快捷任务：

{ "version": "2.0.0", "tasks": [ { "label": "打开知识库首页", "type": "shell", "command": "code knowledgeBase/README.md", "problemMatcher": [] }, { "label": "搜索前端知识库", "type": "shell", "command": "grep -rn --include='*.md' '${input:keyword}' knowledgeBase/", "problemMatcher": [] } ], "inputs": [ { "id": "keyword", "type": "promptString", "description": "输入要检索的关键词" } ] }

这样在 VSCode 里按Cmd/Ctrl + Shift + P，输入Run Task，就能选"搜索前端知识库"，输入关键词后直接看到所有匹配的 Markdown 文件路径和行号。比在侧边栏搜索框里翻要快，尤其是知识库文件多起来之后。

4. 验证请求：新增一条知识点并确认归类检索

配置写完不验证等于没写。这一节我们走一遍完整闭环：给 Claude Code 一段前端知识，看它是否按 SKILL.md 的规则生成文件、落到正确目录、更新索引，最后能被 VSCode 检索到。

先准备一段测试素材。在 Claude Code 里输入下面这段对话内容，模拟一次真实的知识沉淀：

帮我沉淀一下：今天排查了一个 React 的坑。在 React 18 的 StrictMode 下， useEffect 会执行两次，导致我发起的请求重复了。解决办法是用 AbortController 在 cleanup 里取消请求。代码大概是这样： useEffect(() => { const controller = new AbortController(); fetch('/api/data', { signal: controller.signal }) .then(res => res.json()) .then(setData) .catch(err => { if (err.name !== 'AbortError') console.error(err); }); return () => controller.abort(); }, []); 注意点：StrictMode 只在开发环境双调用，生产环境不会；AbortError 要单独 判断，否则会误报。

发送后，Claude Code 应该会激活 frontend-secretary 技能。判断它有没有激活，看它回复里有没有提到"写入 knowledgeBase/react/"之类的路径。如果它只是普通回答而没有生成文件，说明 SKILL.md 没被识别，回到上一节检查路径和 description。

正常情况下，它会在knowledgeBase/react/下生成一个类似2026-04-02_React18_StrictMode_useEffect双调用.md的文件，内容带 frontmatter：

--- title: React 18 StrictMode 下 useEffect 双调用与请求取消 date: 2026-04-02 tags: [React, useEffect, StrictMode, AbortController] category: react --- ## 核心摘要 > 用 AbortController 在 cleanup 中取消请求，解决 StrictMode 下 useEffect 双调用导致的重复请求。 ## 知识点详情 ### React Hooks 机制 - 原理/概念：React 18 StrictMode 在开发环境会故意双调用 effect，用于暴露副作用清理不彻底的问题。 - 关键代码： ```javascript useEffect(() => { const controller = new AbortController(); fetch('/api/data', { signal: controller.signal }) .then(res => res.json()) .then(setData) .catch(err => { if (err.name !== 'AbortError') console.error(err); }); return () => controller.abort(); }, []);

• 注意事项：
  • StrictMode 双调用只在开发环境，生产环境不会。
  • AbortError 必须单独判断，否则会误报为请求失败。

参考资料

• React 官方文档 useEffect 章节

同时它应该在 `knowledgeBase/README.md` 里追加一行： ```markdown - [React 18 StrictMode 下 useEffect 双调用与请求取消](react/2026-04-02_React18_StrictMode_useEffect双调用.md)

现在验证检索。在 VSCode 里按Cmd/Ctrl + Shift + P，运行"搜索前端知识库"任务，输入AbortController，应该能看到匹配的文件路径和行号。再打开knowledgeBase/README.md，确认索引里有这条新记录。如果这两步都通过，说明整条链路跑通了。

再补一个验证动作：故意给一条跨领域的知识，看分类是否合理。比如输入"Vite 5 的 optimizeDeps 预构建怎么配置"，它应该落到tooling/而不是react/。如果落错了，说明 SKILL.md 的分类规则描述还不够明确，回去把对应目录的关键词补全。

5. 常见报错排查：401、技能不触发、文件写错位置

配置过程中最容易卡在几个具体报错上，这一节按真实错误信息对照排查。

报错一：401 Unauthorized或invalid api key

这是接入层最常见的。先确认ANTHROPIC_API_KEY环境变量在当前终端里生效：

echo $ANTHROPIC_API_KEY

如果输出为空，说明变量没加载，重开终端或source配置文件。如果输出有值但报 401，检查 Key 是否在 TaoToken 控制台被删除或过期，去 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api_keys&utm_campaign=rewrite 重新生成一个。还有一种情况是 Key 前后带了引号或空格，export时不要加引号包裹整个值，或者确保引号是英文半角。

报错二：local proxy failed或连接被拒绝

这个通常出现在 Base URL 配置错误时。确认ANTHROPIC_BASE_URL是https://taotoken.net/api，不带尾斜杠，不带/v1。如果你本地有别的工具占用了 Claude Code 的端口，也会报类似错误，检查有没有其他进程在监听。排查命令：

curl -I https://taotoken.net/api

能返回 HTTP 状态码说明网络通，问题在配置；返回连接失败说明网络层有问题，检查 DNS 和防火墙。

报错三：reading 'choices'或返回结构解析失败

这个报错说明请求发出去了，但返回的 JSON 结构不符合 Claude Code 的预期。常见原因是 Base URL 指向了一个 OpenAI 协议端点而不是 Anthropic 协议端点。Claude Code 走的是 Anthropic 的 messages 接口，必须用兼容该协议的端点。确认你用的是https://taotoken.net/api这个 Anthropic 兼容入口，而不是其他路径。

报错四：SKILL.md 不触发，Claude Code 不生成文件

先确认路径是.claude/skills/frontend-secretary/SKILL.md，注意是.claude不是.claude-code，也不是项目根目录。然后检查 frontmatter 格式，---必须是文件第一行，name和description之间不能有空行。最后检查 description 里有没有具体触发词，如果只写"前端助手"这种模糊描述，Claude Code 判断不出什么时候该用。

报错五：文件生成到了错误目录

如果知识点是 React 但文件落到了tooling/，说明分类规则不够明确。在 SKILL.md 的分类规则里给每个目录补上更具体的关键词，比如react/后面加上"Hooks、状态管理、组件生命周期、并发特性"。规则越具体，归类越准。

报错六：OAuth 相关报错

如果你之前用 Claude Code 登录过官方账号，它可能缓存了 OAuth token，导致环境变量不生效。清理缓存目录：

rm -rf ~/.claude/credentials.json

然后重新用环境变量方式启动。这个操作不会影响你的项目文件，只是清掉旧的登录态。

排查完这些，如果还有问题，去接入文档 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite 对照最新的配置说明，协议和端点偶尔会更新。

6. 把知识库用起来：从沉淀到复用的日常动作

配置跑通只是开始，真正让知识库产生价值的是日常使用习惯。我自己的做法是每天下班前花五分钟，把当天踩的坑、查到的结论、写顺手的代码片段丢给 Claude Code 沉淀一次。输入就是一句"沉淀一下今天关于 XXX 的内容"，剩下的它按 SKILL.md 规则处理。

检索这块，除了前面配的 VSCode 任务，还有两个入口值得用。一是knowledgeBase/README.md的索引，它按时间倒序排列，适合快速回顾最近沉淀了什么。二是 VSCode 的全局搜索，因为所有文件都有统一的 frontmatter，你可以直接搜tags: [React]或者category: css来按标签和分类过滤。

如果你想让知识库支持更复杂的查询，比如"找出所有涉及性能优化的笔记"，可以在 SKILL.md 里加一条规则，要求生成文件时在 frontmatter 里维护一个keywords字段，把同义词也写进去。这样搜索"性能""优化""卡顿"都能命中同一条记录。

长期来看，这套方案的上限取决于 SKILL.md 的规则质量。规则越细，AI 生成的文件越规范，检索越准。你可以随着使用逐步迭代它，比如发现某类知识点总是归类错误，就补一条规则；发现某个字段检索时总用不上，就调整 frontmatter 结构。SKILL.md 本身也是一个需要沉淀的资产。

最后给一个实用技巧：把 SKILL.md 纳入 Git 版本管理，和知识库文件一起提交。这样规则的变化有历史记录，团队协作时也能共享同一套知识组织标准。如果多人共用，可以在 README 里约定命名规范，避免文件名冲突。

整套流程走下来，你得到的不只是一个能自动归档的前端知识库，更是一套可复用的"知识组织协议"。换任何项目、任何技术栈，改改 SKILL.md 里的分类规则就能迁移。这才是 Claude Code 配合 SKILL.md 做知识管理的真正价值所在。