企业官网建设流程全解析

1. 公众号排版为什么总在重复劳动：Markdown 转 HTML 的链路拆解

写公众号这件事，内容本身往往只占一半时间，另一半全耗在排版上。你写完一篇 Markdown，复制到公众号后台，字号变了、行距塌了、代码块缩进全乱、引用卡片变成一坨纯文本。于是你开始手动调：标题加粗、正文 15px、行距 1.75、段间距 16px、代码块换行……调完这一篇，下一篇还得从头再来。

问题的根源在于：公众号编辑器只认「内联样式」。它不加载外部 CSS，不认 class 选择器，你写的<div class="card">到了后台就是一块没有样式的裸标签。所以 Markdown 转公众号 HTML，不是简单地把#换成<h1>，而是要把每一层样式都「焊」进标签的style属性里，还要用<span leaf="">把文字包起来，才能绕过编辑器的清洗逻辑。

这件事手工做几乎不可能，但交给 AI Agent 就顺理成章。gzh-design-skill 这个开源 SKILL 的思路是：把排版规则沉淀成组件库和校验脚本，Agent 只负责按规则装配。你给它一篇 Markdown，它输出一份样式全内联的 HTML，粘贴进公众号后台格式不丢。

而要让 Agent 稳定调用这个 SKILL，绕不开一个现实问题：鉴权和通道。Claude Code、Codex、Cursor 这些 Agent 工具，各自要配 API Key、Base URL、Model ID，换一个工具就得重配一遍。TaoToken 在这里的角色就是统一入口——一个 Key、一个 Base URL，把模型调用收敛到一处，Agent 换工具时配置不用推倒重来。

这篇就按「装 SKILL → 配统一 Key → 生成 HTML → 粘贴验证 → 排错」的完整链路走一遍，每一步都给可复制的配置和命令，目标是让这套流程可复现、可交接。适合公众号运营者、技术写作者，以及想用 AI Agent 把排版自动化的人。

2. TaoToken 前置准备：统一 Key 与 Base URL 的填写位置

在装 SKILL 之前，先把模型通道配好。原因很简单：gzh-design-skill 本身是排版逻辑，它不绑定模型，但 Agent 执行 SKILL 时需要调用大模型来理解你的 Markdown 结构、选择组件、生成 HTML。如果模型通道没配通，SKILL 装了也跑不起来。

TaoToken 的定位是统一 Key 接入层。你不需要为每个 Agent 工具单独申请 Key，也不用记多套 Base URL。官网入口在 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，API 地址是 https://taotoken.net/api （这个不加 UTM，直接填进配置里）。

具体要准备三样东西，我把它叫「三件套」：

拿 Key 的路径：进控制台 → API Keys → 创建新 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= 。创建后复制那串sk-开头的字符串，后面所有工具都填它。

这里有个容易踩的坑：很多人以为 Base URL 要填到/v1或者/v1/chat/completions。实际上 TaoToken 的 Base URL 就是https://taotoken.net/api，具体路径由各工具自己拼接。你多填了后缀，反而会 404。

如果你用的是 Claude Code 这类工具，配置通常写在~/.claude/settings.json或者环境变量里。以环境变量为例：

export ANTHROPIC_BASE_URL="https://taotoken.net/api" export ANTHROPIC_API_KEY="sk-你的Key" export ANTHROPIC_MODEL="claude-sonnet-4-5"

如果你用的是 Codex，配置落在~/.codex/auth.json和~/.codex/config.toml。auth.json 里放 Key，config.toml 里指定 Base URL 和 Model ID：

{ "OPENAI_API_KEY": "sk-你的Key" }

model = "gpt-4o" model_provider = "taotoken" [model_providers.taotoken] name = "TaoToken" base_url = "https://taotoken.net/api" wire_api = "chat"

Cline 这类 VS Code 插件则是在设置面板里填：API Provider 选 OpenAI Compatible，Base URL 填https://taotoken.net/api，API Key 填sk-你的Key，Model ID 填你要用的模型。三件套齐了，通道就通了。

配好之后先别急着装 SKILL，用一次模型对话验证通道是否正常。打开 https://taotoken.net/models?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，随便发一句「你好」，能正常返回就说明 Key 和 Base URL 没问题。这一步花两分钟，能省掉后面一半的排错时间。

3. 可复制配置：gzh-design-skill 安装与 settings 片段

通道通了，接下来装 SKILL。gzh-design-skill 的仓库在 GitHub 上，安装方式有三种，我按推荐程度排。

方式一，一行命令安装，适合已经装了 Node 环境的人：

npx skills add https://github.com/isjiamu/gzh-design-skill

这条命令会把 SKILL clone 到对应 Agent 的 skills 目录，并自动接入。实测下来最省事，前提是你的 npx 能正常跑。

方式二，让 AI 自己装。对任意 Agent 说一句：

请帮我查找并自动安装 https://github.com/isjiamu/gzh-design-skill 这个 skill

Agent 会自行 clone 到 skills 目录并完成接入。这种方式的好处是不用记路径，坏处是不同 Agent 的 skills 目录不一样，你得确认它装对了地方。

方式三，手动 clone，适合想控制安装位置的人：

git clone https://github.com/isjiamu/gzh-design-skill.git ~/.claude/skills/gzh-design

注意路径里的~/.claude/skills/是 Claude Code 的 skills 目录。如果你用的是 Codex 或 Cursor，目录名会不同，按你工具的约定来。

装好之后，SKILL 的配置片段需要落到 Agent 的 settings 里。以 Claude Code 为例，~/.claude/settings.json里要确保 skills 目录被扫描到：

{ "skills": { "directory": "~/.claude/skills", "enabled": ["gzh-design"] }, "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_API_KEY": "sk-你的Key", "ANTHROPIC_MODEL": "claude-sonnet-4-5" } }

这段 JSON 里，skills.directory告诉 Agent 去哪找 SKILL，enabled列出启用的 SKILL 名，env里就是前面说的三件套。路径和原文一致，直接复制改 Key 就能用。

如果你用的是 Cline 的 MCP 模式，配置落在 MCP settings 里，同样是三件套：

{ "mcpServers": { "gzh-design": { "command": "npx", "args": ["-y", "gzh-design-skill"], "env": { "OPENAI_BASE_URL": "https://taotoken.net/api", "OPENAI_API_KEY": "sk-你的Key", "OPENAI_MODEL": "gpt-4o" } } } }

这里 Base URL、Key、Model ID 三件套一个都不能少。少 Base URL 会走默认官方地址，少 Key 会 401，少 Model ID 会报 model not found。

装完 SKILL 后，验证它是否被识别。对 Agent 说：

列出当前可用的 skills

如果返回列表里有gzh-design，说明装好了。没有的话，检查 skills 目录路径和 settings 里的enabled字段是否对得上。

这一步的产物是一个可复现的配置：任何人拿到你的 settings.json 片段，改一下 Key，就能在自己的机器上跑起同一套排版流程。这就是「可交接」的意思——配置即文档。

4. 验证请求：从 Markdown 输入到 HTML 粘贴进公众号后台

配置齐了，跑一次完整链路。准备一篇 Markdown，比如article.md，内容随意，带标题、正文、引用、代码块最好，能覆盖更多组件。

对 Agent 说：

用摸鱼绿把这篇文章排成公众号 HTML：article.md

Agent 会调用 gzh-design-skill，按摸鱼绿主题装配组件，生成 HTML。实测下来会产出两个文件：一个是带预览和复制功能的 HTML，方便你在浏览器里看效果；另一个是纯内联样式的 HTML，直接粘贴进公众号后台用。

生成过程里，SKILL 会做几件事：自动编章节号、给关键词加下划线、配引言卡和目录、处理代码块缩进、合并作者签名。这些不是模型「记性好」做出来的，而是组件库和校验脚本在兜底。

生成后，SKILL 会跑校验脚本。校验分两关：第一关查 HTML 结构是否合法，第二关查公众号平台的坑，比如<span leaf="">是否包裹到位、内联样式是否完整、有没有被编辑器清洗的标签。ERROR 清零才交付，有 ERROR 会提示你哪一行有问题。

拿到 HTML 后，打开公众号后台，新建图文，把 HTML 粘贴进编辑器。这里有个操作细节：不要用「粘贴」按钮，用 Ctrl+V 直接粘，或者用编辑器右上角的「源代码」模式粘贴。粘贴后检查三处：

第一，标题字号和颜色是否保留。摸鱼绿主题的标题是深绿色，如果变成黑色，说明样式没内联成功。

第二，代码块缩进是否正常。公众号编辑器对<pre>支持不好，SKILL 会把代码块转成带背景色的<section>，缩进用 保留。如果代码块变成一行，检查是不是漏了white-space: pre-wrap。

第三，引用卡片是否还在。引言卡是<section>加边框和背景色，如果变成纯文本，说明<section>被清洗了，需要换用<blockquote>加内联样式。

验证成功的标志：粘贴后预览，格式和你在浏览器里看到的一致，不用手动调任何东西。这时候你可以把这篇 HTML 存成模板，下次同类文章直接套。

整个链路跑通后，排版时间从「一个下午」压缩到「一次生成 + 一次粘贴」。更重要的是，这套流程可复现：换一篇 Markdown，同样的命令，同样的主题，输出同样的排版质量。

5. 本篇常见错排查：401、local proxy failed、reading choices、OAuth

链路跑起来后，报错基本集中在几个地方。我按真实遇到的频率排一下。

401 Unauthorized。这是最常见的，九成是 Key 没填对。检查三处：settings.json 里的ANTHROPIC_API_KEY或OPENAI_API_KEY是不是sk-开头；Key 有没有多余空格；Key 是不是在控制台被删了。如果 Key 没问题，检查 Base URL 是不是填成了https://taotoken.net/api/v1，多填后缀会 401。

local proxy failed。这个报错通常出现在 Agent 工具启动时，意思是本地代理没起来。原因可能是 Base URL 填错，工具尝试连一个不存在的本地端口。检查ANTHROPIC_BASE_URL或OPENAI_BASE_URL是不是https://taotoken.net/api，不要填localhost或127.0.0.1。如果你之前配过别的代理，先把环境变量清掉再重试。

reading choices 报错。这个报错说明请求发出去了，但返回结构不对。常见原因是 Model ID 填错，比如填了claude-3但实际模型名是claude-sonnet-4-5。去 https://taotoken.net/models?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= 确认可用模型名，填对再试。另一个原因是wire_api配错，Codex 的 config.toml 里要写wire_api = "chat"，写成responses会报这个错。

OAuth 相关报错。Claude Code 有时会走 OAuth 流程，如果你用的是 API Key 模式，需要在 settings 里关掉 OAuth。检查~/.claude/settings.json里有没有oauth相关字段，有的话删掉，只保留env里的三件套。如果报错提示OAuth token expired，说明工具在尝试刷新 OAuth，但你用的是 Key，两者冲突，清掉 OAuth 缓存即可。

SKILL 没被识别。对 Agent 说「列出 skills」返回空，检查 skills 目录路径。Claude Code 默认是~/.claude/skills/，Codex 是~/.codex/skills/，Cline 是插件目录下的 skills。路径不对，Agent 扫不到。另外检查 settings 里的enabled数组有没有写gzh-design，名字要和目录名一致。

生成的 HTML 粘贴后样式丢失。这不是报错，但比报错更烦。原因通常是 SKILL 版本旧，组件库没更新。去 GitHub 拉最新版：

cd ~/.claude/skills/gzh-design && git pull

拉完重新生成一次。如果还丢，检查是不是用了「粘贴」按钮而不是 Ctrl+V，公众号编辑器的粘贴按钮会走一次清洗，Ctrl+V 走的是另一条路径。

排错的核心思路：先确认三件套（Base URL + Key + Model ID）对不对，再确认 SKILL 装没装对，最后确认粘贴方式对不对。这三层过了，基本不会有大问题。

6. 语义一致 CTA：把排版流程固化下来

这套流程跑通后，我建议你做一件事：把配置和命令写成一个README.md，放在项目目录里。内容包括三件套的填写位置、SKILL 安装命令、生成 HTML 的命令、粘贴验证的三处检查。下次换人接手，或者你自己换机器，照着 README 走一遍就能复现。

如果你还在选模型通道，TaoToken 的统一 Key 能省掉多工具重复配置的麻烦。模型对话验证通道走 https://taotoken.net/models?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= ，API Key 管理在 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= 。如果你长期用 Agent 做编码或排版这类重复任务，Coding Plan 在 https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，按用量走比单次调用更划算。

Claude Code 用户如果想把 SKILL 和通道一起配好，参考 https://taotoken.net/claude-code?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= 里的接入步骤，Base URL 填https://taotoken.net/api，Key 填控制台创建的sk-串，Model ID 按需选。

排版这件事，好看不是玄学，是规则叠加。把规则写成组件库，把组件库交给 Agent 执行，人去做更值得做的判断。这套流程的价值不在于省了一个下午，而在于它可复现、可交接、可验证——下次排版，你不用再从头调字号。