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 负责生成和调整 CSSwenyan-cli 负责把 Markdown 加主题渲染成公众号可粘贴的 HTML。两者都需要能正常调用模型和命令行。先说 Claude Code 这一侧。Claude Code 本身是一个终端里的编码助手它要能工作需要配置好模型接入。这里用 TaoToken 来做接入层它的 API 地址是 https://taotoken.net/api兼容 Anthropic 的接口格式所以 Claude Code 可以直接指向它。你需要先去控制台创建一个 API Key地址是 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content创建完把 Key 复制出来后面配置要用。配置 Claude Code 的方式是在项目目录或用户目录下放一个 settings 文件。如果你用的是 Claude Code 的 Anthropic 兼容模式核心就是三件套Base URL、API Key、Model ID。Base URL 填 https://taotoken.net/apiKey 填你刚创建的那串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_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。想先验证模型对话是否正常可以用模型对话页面 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。如果你打算长期用 Claude Code 做编码和发布自动化Coding Plan 会更合适https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。