企业官网建设流程全解析

1. 公众号排版为什么总是撞脸：从 wenyan-cli 自定义主题说起

公众号排版这件事，很多人一开始都靠编辑器里那几套固定模板。刚用的时候觉得挺省事，点一下就能套用，标题、引用、代码块都自动排好。但发得多了就会发现一个问题：你打开别人的文章，再打开自己的文章，除了文字不一样，视觉上几乎分不出谁是谁。尤其是技术号、产品号、个人品牌号，读者对「辨识度」其实是有感知的，一套用烂了的模板会让内容显得廉价。

我身边不少做公众号的朋友都卡在同一个点上：想改排版，但不想学前端。CSS 这东西对非科班来说门槛不算低，光是选择器、盒模型、伪元素就够劝退一批人。于是大家要么继续忍受模板撞脸，要么花几百块找人做一套主题，做完之后想微调还得再找人。

wenyan-cli 这个工具解决的是 Markdown 到公众号的转换和发布问题，它本身内置了 8 套主题，覆盖了大部分常见场景。但内置主题终究是「通用款」，它要照顾所有人的审美，所以只能做到不出错，做不到出彩。真正想要按品牌调性来，就得自己写主题 CSS。

问题来了：自己写 CSS 对普通写作者不现实。那有没有办法让 AI 帮你写？这就是「公众号排版 Skill」要干的事。它的核心思路是：你用自然语言描述想要的风格，Claude Code 调用 Skill 生成一份可用的主题 CSS，然后通过 wenyan-cli 注入到渲染流程里，本地预览确认效果，最后发布。整个过程你不需要懂 CSS 语法，只需要能说清楚「我想要什么感觉」。

这篇文章会从零走一遍完整路径：先讲清楚 wenyan-cli 的主题机制，再讲怎么在 Claude Code 里装 Skill，然后给出可复制的配置片段和主题 CSS 变量清单，接着用真实命令验证渲染结果，最后把常见的报错和排查方法列出来。目标很明确：让你读完能自己产出一套专属主题，而不是继续套模板。

适合读这篇的人有三类：一是做公众号但不想学前端的内容创作者；二是想给团队统一排版规范的运营；三是用 Claude Code 做自动化发布、想把主题也纳入版本管理的开发者。如果你属于其中任何一类，下面的步骤可以直接跟着做。

2. TaoToken 前置准备：Claude Code 接入与 wenyan-cli 环境搭建

在开始写主题之前，得先把工具链跑通。这条链路是：Claude Code 负责生成和调整 CSS，wenyan-cli 负责把 Markdown 加主题渲染成公众号可粘贴的 HTML。两者都需要能正常调用模型和命令行。

先说 Claude Code 这一侧。Claude Code 本身是一个终端里的编码助手，它要能工作，需要配置好模型接入。这里用 TaoToken 来做接入层，它的 API 地址是 https://taotoken.net/api，兼容 Anthropic 的接口格式，所以 Claude Code 可以直接指向它。你需要先去控制台创建一个 API Key，地址是 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=，创建完把 Key 复制出来，后面配置要用。

配置 Claude Code 的方式是在项目目录或用户目录下放一个 settings 文件。如果你用的是 Claude Code 的 Anthropic 兼容模式，核心就是三件套：Base URL、API Key、Model ID。Base URL 填 https://taotoken.net/api，Key 填你刚创建的那串，Model ID 按你实际要用的模型填。这三件套在后面的配置片段里会给出完整写法，这里先记住它们的关系。

再说 wenyan-cli。它是一个命令行工具，安装方式取决于你的系统。macOS 和 Linux 一般用包管理器或直接下载二进制，Windows 可以用 WSL 或者对应的发行版。装完之后在终端执行wenyan --version，能打印出版本号就说明装好了。wenyan-cli 的核心命令有几个：wenyan publish用来发布，wenyan theme用来管理主题，wenyan preview用来本地预览。主题相关的操作都围绕--custom-theme和wenyan theme --add这两个参数展开。

这里要强调一个顺序：先保证 Claude Code 能正常对话，再保证 wenyan-cli 能正常渲染默认主题，最后才去折腾自定义主题。如果基础链路没通，后面生成 CSS 再漂亮也没法验证。我见过有人一上来就写主题，结果渲染出来样式全丢，排查半天发现是 wenyan-cli 版本太旧不支持自定义主题参数。所以环境这一步别跳过。

另外，如果你打算长期做主题迭代，建议把主题 CSS 文件放进 Git 管理。主题本质上就是一份 CSS，改坏了可以回滚，多个主题可以并存，团队协作时也能 review。这个习惯在后期会省很多事。

3. 可复制配置：Skill 安装、主题 CSS 变量与 wenyan-cli 注入

这一节是整篇的核心，给出可以直接复制粘贴的配置。分三块：Claude Code 的接入配置、Skill 的安装方式、主题 CSS 的变量清单和注入命令。

先看 Claude Code 的接入配置。在项目根目录创建.claude/settings.json，写入下面这段。注意路径和字段名要和你的实际环境一致，Base URL 用 TaoToken 的 API 地址，不要加多余路径。

{ "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_API_KEY": "sk-你的TaoToken密钥", "ANTHROPIC_MODEL": "claude-sonnet-4-20250514" } }

如果你用的是 Codex 风格的auth.json，写法是这样的，放在~/.codex/auth.json：

{ "base_url": "https://taotoken.net/api", "api_key": "sk-你的TaoToken密钥", "model": "claude-sonnet-4-20250514" }

这两份配置的字段名不同，但三件套是一样的：Base URL、Key、Model ID。填错任何一个都会导致 401 或模型找不到。填完之后在 Claude Code 里发一句「你好」，能正常回复就说明接入成功。

接下来装 Skill。Claude Code 的 Skill 机制是通过/skills命令管理的。在终端里打开 Claude Code，输入/skills，然后搜索generate-wenyan-theme，找到后点击安装。安装完成后，Skill 会出现在可用列表里。这个 Skill 的作用是：接收自然语言描述，生成符合 wenyan-cli 规范的主题 CSS 文件。

装好之后，你可以直接对 Claude Code 说：「帮我生成一个赛博朋克风格的公众号主题，主色调是霓虹蓝和品红，代码块要深色背景」。它会生成一份 CSS 并保存到本地，比如theme-cyber.css。这份 CSS 就是后面要注入的主题文件。

现在说主题 CSS 的变量清单。wenyan-cli 的主题 CSS 本质上是对公众号 HTML 结构做样式覆盖，所以你需要知道它暴露了哪些可定制的部分。下面这份清单是实际可用的变量和选择器，你可以让 AI 按这个结构生成，也可以自己微调。

/* 全局容器 */ .wenyan-container { font-family: -apple-system, "PingFang SC", sans-serif; font-size: 16px; line-height: 1.75; color: #2c3e50; letter-spacing: 0.5px; } /* 一级标题 */ .wenyan-container h1 { font-size: 24px; font-weight: 700; color: #1a1a1a; border-left: 4px solid #3498db; padding-left: 12px; margin: 32px 0 16px; } /* 二级标题 */ .wenyan-container h2 { font-size: 20px; font-weight: 600; color: #2c3e50; margin: 28px 0 14px; } /* 引用块 */ .wenyan-container blockquote { background: #f7f9fc; border-left: 3px solid #3498db; padding: 12px 16px; color: #555; border-radius: 4px; } /* 代码块 */ .wenyan-container pre { background: #1e1e1e; color: #d4d4d4; padding: 16px; border-radius: 6px; overflow-x: auto; } /* 行内代码 */ .wenyan-container code { background: #f0f0f0; color: #e74c3c; padding: 2px 6px; border-radius: 3px; font-size: 14px; } /* 表格 */ .wenyan-container table { border-collapse: collapse; width: 100%; margin: 16px 0; } .wenyan-container th { background: #3498db; color: #fff; padding: 10px; } .wenyan-container td { border: 1px solid #e0e0e0; padding: 10px; }

这份清单覆盖了公众号文章里最常出现的元素：标题、引用、代码块、行内代码、表格。你让 AI 生成主题时，可以要求它按这个结构输出，这样生成的结果能直接被 wenyan-cli 识别。

主题文件有了，接下来是注入。wenyan-cli 支持两种方式。临时使用是单次生效：

wenyan publish -f article.md --custom-theme ./theme-cyber.css

永久注册是给主题起个名字，之后可以反复用：

wenyan theme --add --name cyber --path ./theme-cyber.css wenyan publish -f article.md -t cyber

注册之后，wenyan theme --list能看到所有已注册主题，wenyan theme --remove --name cyber可以删掉。如果你用 MCP 版本，可以直接对 AI 说「把 ./theme-cyber.css 注册成主题，名字叫 cyber」，然后「用 cyber 主题把 article.md 发布到公众号」，它会自动完成注册和发布。

这里有个细节要注意：主题 CSS 里的选择器必须和 wenyan-cli 渲染出的 HTML 结构匹配。如果你自己写选择器，最好先用wenyan preview看一下默认渲染出的 DOM 结构，再针对性地覆盖。用 Skill 生成的好处是它已经知道这个结构，所以生成的选择器大概率是对的。

4. 验证请求与成功结果：本地预览与渲染前后对比

配置写完不代表就能用，必须验证。验证分两步：先本地预览看渲染结果，再实际发布确认公众号里显示正常。

本地预览用wenyan preview命令。它会启动一个本地服务，把 Markdown 按指定主题渲染成 HTML，你在浏览器里就能看到效果。命令格式是：

wenyan preview -f article.md --custom-theme ./theme-cyber.css

执行后终端会输出一个本地地址，比如http://localhost:3000，用浏览器打开就能看到渲染结果。这一步的关键是「对比」：先用默认主题预览一次，再用自定义主题预览一次，把两次的截图放一起看差异。差异应该体现在标题样式、引用块、代码块背景、表格配色这些地方。如果两次看起来一模一样，说明主题没生效，大概率是路径写错或者选择器没匹配上。

我实测下来，验证主题是否真正注入，最直接的方法是看代码块背景色。默认主题的代码块背景通常是浅灰，自定义主题如果设成深色，预览里应该立刻变深。如果没变，就去检查 CSS 文件路径和--custom-theme参数是否写对。

预览通过之后，执行发布：

wenyan publish -f article.md -t cyber

发布成功后，终端会输出发布结果，通常会带上公众号文章的草稿链接或发布状态。这时候去公众号后台打开草稿，检查排版是否和预览一致。重点看三处：一是标题的边框和颜色有没有丢；二是引用块的背景和圆角有没有生效；三是代码块在手机端会不会横向溢出。公众号编辑器对某些 CSS 属性支持有限，比如position: fixed和部分伪元素可能被过滤，所以预览和实际发布之间可能有细微差异，这一步就是用来发现这些差异的。

如果发布后发现某处样式丢了，回到 CSS 文件里把对应的属性换成公众号支持的写法。比如border-radius一般没问题，但box-shadow有时会被过滤，可以用border替代。改完重新预览、重新发布，直到一致。

验证通过的标志是：你在公众号后台看到的排版，和本地预览看到的排版基本一致，且符合你最初描述的风格。到这一步，一套专属主题就算真正落地了。

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

这一节把实际会遇到的报错列出来，对照着排查。这些错误大多出在接入层和主题注入环节，按顺序检查基本能定位。

401 Unauthorized。这个最常见，说明 API Key 不对或没生效。检查三处：一是settings.json或auth.json里的 Key 有没有复制完整，前后有没有多余空格；二是 Base URL 是不是https://taotoken.net/api，多写或少写路径都会导致鉴权失败；三是 Key 有没有过期或被禁用，去控制台确认一下状态。如果三处都没问题，试着在 Claude Code 里重新加载配置，有时候是配置没被读取。

local proxy failed。这个报错通常出现在 Claude Code 启动时，说明它尝试走本地代理但没连上。检查你的环境变量里有没有残留的代理设置，比如HTTP_PROXY或HTTPS_PROXY。如果有，先清掉再启动。另外确认网络能正常访问https://taotoken.net/api，可以用curl测一下连通性。

reading choices 相关报错。这个一般出现在模型返回格式不符合预期时，比如返回体里没有choices字段。原因可能是 Model ID 填错了，或者接口版本不匹配。检查ANTHROPIC_MODEL字段是不是你实际有权限调用的模型，去控制台看一下可用模型列表。如果模型名写错，接口可能返回一个结构不同的错误体，导致解析失败。

OAuth 相关报错。如果你用的是需要 OAuth 的客户端，报错通常提示 token 无效或回调失败。这种情况下，确认你用的是 API Key 模式而不是 OAuth 模式。TaoToken 的接入用 API Key 就够了，不需要走 OAuth 流程。如果客户端强制走 OAuth，检查它的配置项里有没有切换到 API Key 的选项。

主题不生效。这个不算报错，但很常见。排查顺序：先确认 CSS 文件路径存在且可读；再确认--custom-theme或-t参数拼写正确；然后确认主题已注册（用wenyan theme --list看）；最后确认 CSS 选择器和渲染出的 DOM 结构匹配。如果都对了还是不生效，试着把 CSS 里最基础的一条规则（比如body { background: red; }）加进去，看预览有没有变红，以此判断是注入问题还是选择器问题。

发布后样式丢失。公众号编辑器会过滤部分 CSS，常见被过滤的有position、z-index、部分伪元素和@media查询。解决办法是尽量用公众号支持的属性，比如用border代替box-shadow，用padding和margin控制间距。如果某个效果必须用被过滤的属性，考虑用图片替代。

把这几类报错记住，遇到问题时按顺序排查，大部分情况能在几分钟内定位。

6. 从主题到工作流：把排版 Skill 纳入日常发布

主题做出来只是第一步，真正省时间的是把它变成固定工作流。我的做法是把主题 CSS 放进项目仓库，和文章 Markdown 放在一起，每次发布用注册好的主题名，而不是每次指定路径。这样命令更短，也不容易写错路径。

如果你用 Claude Code 做自动化，可以把「生成主题」和「发布文章」串成一个流程：先让 Skill 根据品牌描述生成或更新主题 CSS，再用 wenyan-cli 注册并发布。整个过程在终端里完成，不需要打开公众号后台手动调格式。

对于团队协作，建议把主题 CSS 的变量清单文档化，谁想改风格就改对应的变量值，而不是重写整个文件。这样多人维护时不会互相覆盖。主题命名也建议统一规范，比如按品牌名加版本号，方便回滚。

如果你还没开始做主题，现在就可以从最简单的描述入手，让 Claude Code 生成第一版，本地预览看效果，不满意就继续调。调到自己看着舒服为止，再发布。这套流程跑通一次之后，后面就是重复使用，边际成本很低。

需要创建 API Key 或查看接入文档的话，可以从这里进：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= 。想先验证模型对话是否正常，可以用模型对话页面 https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= 。如果你打算长期用 Claude Code 做编码和发布自动化，Coding Plan 会更合适：https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= 。