GSD-2 领域文档消费指南：工程 Skill 如何读取 CONTEXT.md 与 ADR 并维护领域一致性
2026/9/27 23:38:09
1. 写第一个 HTML 页面前，环境到底要准备什么
很多零基础的朋友打开教程就开始敲<html>，结果卡在第一步：编辑器没装好、浏览器调试入口找不到、AI 补全工具连不上，代码写了一半全是波浪线。这篇就把「学习 HTML 前期准备」这件事拆开讲清楚——VSCode 怎么装、Chrome 怎么配成调试入口、settings.json 和 config.toml 两个配置文件怎么写，以及怎么用 TaoToken 作为统一的 Key/API 通道，把 AI 辅助工具一次性接进来。
适合谁看：完全没碰过前端、准备写第一个 HTML 页面的人；或者装过 VSCode 但插件乱装、配置一团糟的人。目标很明确——环境一次跑通，后面写代码不再折腾工具。
我试过把插件全堆上去，结果 VSCode 启动慢、格式化冲突、AI 插件报 401，排查半天。所以这篇的顺序是：先装最小可用集，再配调试入口，最后接 AI 通道，每一步都有可复制的配置和验证动作。
2. TaoToken 前置：统一 Key/API 通道是什么，为什么先配它
写 HTML 的过程中，你会用到 AI 补全、代码解释、报错分析这类辅助工具。这些工具通常各自要一套 Key、各自的接口地址，装三个插件就要管三份配置，换一个工具就重配一次。TaoToken 的作用就是把这些统一成一条通道：一个 Key、一个 API 地址，兼容主流工具的接入格式。
官网入口在这里：https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，注册后在控制台生成 Key 即可。API 地址是 https://taotoken.net/api （这个不加 UTM，直接填进配置文件）。
你需要提前拿到两样东西：
- 一个 API Key，形如
sk-开头的一串字符，在控制台的 API Keys 页面创建； - 确认接口地址，填
https://taotoken.net/api。
注意：Key 只创建一次就够，多个工具共用同一个 Key。不要把它写进会提交到 Git 的公开文件里，本地配置文件自己留着就行。
控制台和 Key 管理页面在这里：https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，API Keys 页面：https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= 。接入文档在 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，遇到格式问题先翻文档。
3. 可复制配置：VSCode 安装、插件与 settings.json
3.1 安装 VSCode 与 Chrome
VSCode 去官网下载对应系统版本，安装时勾选「添加到 PATH」和「将“通过 Code 打开”操作添加到资源管理器目录上下文菜单」，后面在文件夹右键就能直接打开。Chrome 用官方渠道装即可，装完设为默认浏览器，方便 Live Server 一键预览。
3.2 最小插件集
不要一上来装十几个。先装这几个就够写 HTML：
| 插件 | 作用 | 是否必装 |
|---|---|---|
| Chinese (Simplified) | 界面汉化 | 可选 |
| Live Server | 本地起服务、保存自动刷新 | 必装 |
| Auto Rename Tag | 双标签自动同步改名 | 必装 |
| Error Lens | 行内显示错误 | 推荐 |
| Prettier | 代码格式化 | 熟悉后再开 |
| One Dark Pro | 主题 | 可选 |
| vscode-icons | 文件图标 | 可选 |
安装方式统一：左侧扩展面板搜索名字，点安装，重启生效。Prettier 新手先别急着开自动保存格式化，容易把还没写完的标签格式打乱，等熟悉结构后再启用。
3.3 settings.json 骨架
按Ctrl+Shift+P（macOS 是Cmd+Shift+P），输入Open User Settings (JSON)，把下面这段贴进去。这是给 HTML 新手准备的最小配置：
{ "editor.fontSize": 15, "editor.tabSize": 2, "editor.formatOnSave": false, "editor.wordWrap": "on", "files.autoSave": "afterDelay", "files.autoSaveDelay": 1000, "liveServer.settings.donotShowInfoMsg": true, "liveServer.settings.port": 5500, "emmet.triggerExpansionOnTab": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "errorLens.enabledDiagnosticLevels": ["error", "warning"] }逐条说明几个关键项：editor.tabSize设 2 是前端社区惯例；formatOnSave先关，避免写一半被格式化；liveServer.settings.port固定 5500，方便你记住预览地址；emmet.triggerExpansionOnTab打开后，输入!再按 Tab 能直接生成 HTML5 骨架，这是写 HTML 最省事的技巧之一。
3.4 config.toml 骨架（AI 工具接入）
部分 AI 辅助工具用 TOML 格式配置，比如命令行类工具。在用户目录下建config.toml，写入：
# TaoToken 统一接入配置 api_base = "https://taotoken.net/api" api_key = "sk-你的Key替换这里" model = "claude-sonnet-4-20250514" timeout = 60 max_tokens = 4096字段含义：api_base是接口地址，固定填 TaoToken 的 API 地址；api_key换成你在控制台创建的那串；model按你实际要用的模型名填；timeout是请求超时秒数，网络慢可以调到 120。
注意：TOML 里字符串必须用双引号，Key 不要加多余空格，否则会报鉴权失败。
4. 验证请求：确认环境真的跑通了
配置写完不算完，要逐条验证。
第一步，验证 VSCode 能正常预览。新建文件夹html-demo，在里面建index.html，输入!按 Tab 生成骨架，写一行<h1>Hello HTML</h1>。在文件上右键选Open with Live Server，Chrome 会自动打开http://127.0.0.1:5500/index.html，看到标题就说明编辑器加浏览器这条链路通了。
第二步，验证 Chrome 调试入口。按F12打开开发者工具，切到 Console 面板，输入document.title回车，能看到页面标题，说明调试通道正常。以后 HTML 里引的 JS 报错，都在这个面板看。
第三步，验证 TaoToken 通道。用 curl 发一个最小请求：
curl https://taotoken.net/api/v1/messages \ -H "Content-Type: application/json" \ -H "x-api-key: sk-你的Key替换这里" \ -H "anthropic-version: 2023-06-01" \ -d '{ "model": "claude-sonnet-4-20250514", "max_tokens": 128, "messages": [ {"role": "user", "content": "用一句话说明 HTML 是什么"} ] }'返回 JSON 里带content字段和一段文字，就说明 Key 和地址都对。如果返回 401，是 Key 错了；返回 404，多半是路径写错，对照接入文档核对。
想直接在网页里对话验证模型是否可用，可以打开模型对话页面：https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，输入同样的问题，能正常回复就说明通道没问题。
5. 本篇常见错排查
Live Server 右键没有 Open with Live Server：插件没装成功或没重启 VSCode。去扩展面板确认状态是「已启用」，然后重启。
端口 5500 被占用：改 settings.json 里的liveServer.settings.port为 5501 或其他空闲端口，保存后重新打开。
curl 返回 401 Unauthorized：Key 复制时带了空格，或者用了已删除的 Key。去 API Keys 页面重新创建一个，整串替换。
返回 404 或路径错误：api_base写成了带/v1的完整路径，或者 curl 里路径拼错。基础地址统一用https://taotoken.net/api，具体路径按文档拼。
config.toml 解析报错：检查是不是用了单引号、有没有中文引号、Key 那行有没有漏引号。TOML 对格式敏感，建议用 VSCode 装个 TOML 插件看高亮。
AI 插件连不上但 curl 能通：多半是插件里填的地址格式和它预期的不一致，有的要带/v1，有的不要。对照接入文档里对应工具的示例填。
Emmet 按 Tab 不展开：确认emmet.triggerExpansionOnTab为 true，且文件语言模式是 HTML（右下角能看到）。如果是纯文本模式，Emmet 不生效。
6. 接下来怎么用这套环境
环境跑通后，写 HTML 的日常流程就是：VSCode 里写代码，Live Server 自动刷新看效果，Chrome 开发者工具调样式和看报错，AI 辅助工具通过 TaoToken 通道帮你解释标签、补全结构、分析报错。
如果你后面要长期用 AI 辅助写代码、跑 Agent 类任务，可以看下 Coding Plan：https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，适合把编码辅助固定成日常工具链。Claude Code 相关接入参考：https://taotoken.net/claudecode-anthropic?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= 。
一个实用小技巧：把settings.json和config.toml各备份一份到自己的笔记里，换电脑时直接粘贴，五分钟重建整套环境，不用再一个个插件点安装。