1. 从 Markdown 到 PDF，为什么我非要自己造一个工具
写技术文档、整理小说稿、做项目周报，Markdown 几乎是我唯一会用的格式。但每次要把.md发给别人看，问题就来了：对方手机打开一堆#和|表格，排版全乱。转 PDF 吧，市面上的在线工具要么样式固定死板，要么导出后字体变形、代码块溢出，想调个标题居中、换个护眼背景，基本没戏。
我试过手动调 CSS 再打印，也试过几个开源方案，结果不是依赖太重就是导出效果和预览对不上。核心痛点其实就一个：预览和导出必须是同一套渲染逻辑，样式要能自定义，还得能框选文字。截图式导出（html2canvas 那类）直接排除，因为导出的 PDF 里文字选不中，搜索也搜不到，体积还大。
于是我想，能不能用 AI 辅助编码，两天内撸一个自定义样式的 MD 转 PDF 工具？技术选型上，Claude Code 负责终端里的项目级操作，GLM 4.6 提供模型能力，MCP 扩展视觉理解和联网搜索，再用 TaoToken 统一管理 Key 和 API 通道，省得在多个平台之间来回切换配置。这篇文章就把从环境搭建、MCP 接入、样式渲染到导出验证的全流程拆开讲，配置片段可以直接复制。
2. TaoToken 前置：统一 Key 与 API 通道配置
在开始写代码之前，先把模型调用通道理顺。Claude Code 默认走的是 Anthropic 的接口，但我们可以通过环境变量把它转发到 GLM 上。这里用 TaoToken 做统一入口，好处是 Key 只需要管一份，模型对话、编码计划、API Keys 都在一个控制台里。
2.1 获取 API Key 与配置环境变量
先到 TaoToken 控制台创建一个 API Key。地址是https://taotoken.net/api-keys，登录后点新建，复制那串sk-开头的密钥。注意不要把它提交到 Git 仓库里，后面我们会用环境变量注入。
拿到 Key 之后，配置 Claude Code 的转发。Claude Code 读取的是ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY这两个环境变量。在 Windows 的 PowerShell 里可以这样设：
$env:ANTHROPIC_BASE_URL="https://taotoken.net/api" $env:ANTHROPIC_API_KEY="sk-你的TaoToken密钥"macOS 或 Linux 的 bash/zsh 则是：
export ANTHROPIC_BASE_URL="https://taotoken.net/api" export ANTHROPIC_API_KEY="sk-你的TaoToken密钥"如果你想让配置持久化，Windows 可以写进系统环境变量，macOS 可以追加到~/.zshrc。这样每次打开终端，Claude Code 就会自动走 TaoToken 的通道，模型请求会被转发到 GLM 4.6 上。
2.2 settings.json 骨架
Claude Code 支持项目级的settings.json，放在项目根目录的.claude文件夹下。这个文件可以固化模型选择、权限模式等。一个可用的骨架如下：
{ "model": "claude-sonnet-4-5", "permissions": { "allow": [ "Read", "Write", "Edit", "Bash(npm run *)", "Bash(git *)" ] }, "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api" } }这里model写的是 sonnet 4.5，但实际请求会被 TaoToken 转发到 GLM 4.6，表面模型名不影响使用。permissions.allow里放开文件读写和常用命令，避免每步都弹确认。注意不要把 API Key 写进这个文件，Key 还是走环境变量更安全。
2.3 config.toml 骨架（可选，用于 MCP 注册）
有些 MCP 客户端或工具链会用config.toml来管理服务注册。如果你习惯用配置文件而不是命令行注册 MCP，可以准备一份这样的骨架：
[mcp_servers.zai-mcp-server] command = "npx" args = ["-y", "@z_ai/mcp-server"] env = { Z_AI_API_KEY = "你的智谱Key" } [mcp_servers.web-search-prime] type = "http" url = "https://open.bigmodel.cn/api/mcp/web_search_prime/mcp" headers = { Authorization = "Bearer 你的智谱Key" }不过 Claude Code 更推荐用claude mcp add命令来注册，下面会讲。这份 toml 主要是给你在别的 MCP 宿主里复用时参考。
3. 可复制配置：Claude Code 与 MCP 接入
环境变量配好之后，安装 Claude Code 并注册 MCP 服务。这一步是整个工具能“自己查错、自己搜方案”的关键。
3.1 安装 Claude Code 与 GLM 转发
先确保 Node.js 版本在 v22 以上。然后全局安装 Claude Code：
npm install -g @anthropic-ai/claude-code安装完成后，在项目目录下打开终端，输入claude，如果看到欢迎界面，说明环境变量生效了。此时默认模型表面显示 sonnet 4.5，实际请求已经通过 TaoToken 转发到 GLM 4.6。
如果是基于已有项目开发，进入项目后先输入/init，让模型梳理整个目录结构，生成一份项目说明。新项目则可以直接描述需求。
3.2 注册视觉理解 MCP
GLM 的视觉理解 MCP 可以让模型“看懂”截图。注册命令如下，把your_api_key换成你的智谱 Key：
claude mcp add -s user zai-mcp-server --env Z_AI_API_KEY=your_api_key -- npx -y "@z_ai/mcp-server"-s user表示注册到用户级配置，所有项目都能用。注册成功后，在 Claude Code 里输入/mcp可以看到当前可用的 MCP 列表。
3.3 注册网页搜索 MCP
联网搜索 MCP 走的是 HTTP 方式，注册时带上 Authorization 头：
claude mcp add -s user -t http web-search-prime https://open.bigmodel.cn/api/mcp/web_search_prime/mcp --header "Authorization: Bearer your_api_key"这个 MCP 在后续调研 PDF 导出方案时非常有用。注意，调用时需要点名“联网搜索”，否则模型可能不会主动触发。
3.4 注册 chrome-devtools MCP
为了排查前端控制台报错，再装一个 chrome-devtools MCP：
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest注册后终端会提示Added stdio MCP server chrome-devtools，并修改~/.claude.json。这个 MCP 能自动驱动浏览器、查看控制台、截图，相当于给模型装了一双眼睛。
4. 验证请求与成功结果：从想法到可导出 PDF
配置就绪后，开始让模型干活。整个过程是对话式迭代，每一轮聚焦一个具体问题。
4.1 第一轮：描述需求，生成初版
我直接把想法丢给模型：“最近让大模型生成了小说，但分享时用 Markdown 不方便，希望转成 PDF。现有工具样式单一，我想要一个能调整 PDF 样式的 md2pdf 工具，比如标题居中、背景自定义。”
允许文件编辑后（按shift + tab保持允许状态），GLM 开始生成代码。几分钟后第一版出来了：左侧编辑器，右侧配置面板，底部有预览和下载按钮。打开index.html预览正常，但下载后的 PDF 字体变形。
4.2 第二轮：实时预览与布局调整
第一轮的问题是预览需要手动点按钮，且下载后样式不对。我提出新要求：“预览面板默认打开且实时跟随编辑区渲染，左右并列布局。预览正常，但下载后的 PDF 整体变形。”
模型调整了布局，但控制台出现两条报错，主题配置没生效。这时候 chrome-devtools MCP 派上用场。我输入：
请使用 chrome-devtools 查看当前 index.html 页面运行是否出现错误。模型自动驱动浏览器，查看控制台，截图，然后定位到问题并修复。这一步的关键是点名 MCP 工具，否则模型可能只用静态分析。
4.3 第三轮：修复 PDF 导出变形
预览正常但导出变形，根因是内部用了 html2canvas 截图导出。我把下载的 PDF 截图作为image.png，通过@指定文件位置，让模型理解问题。注意终端里不支持直接粘贴剪贴板图片，得先保存成文件。
模型调用视觉理解 MCP 分析截图后，发现 html2canvas 导致文字无法框选且变形。接着我让它联网搜索替代方案：
请使用联网搜索调研纯前端 PDF 导出的其他方案。调研结果是：纯前端导出要么走window.print，要么用 html2canvas。截图方案排除，最终选择打印方案。核心思路是：点击打印按钮 → 保存页面状态 → 设置预览 HTML →window.print→ 恢复页面状态。
4.4 第四轮：小说主题适配
基础功能跑通后，开始做差异化。我提出：“新增两个适合小说阅读的 PDF 主题，可调用 MCP 联网搜索，参考主流阅读平台的护眼背景，或搜集公开剪贴画装饰。”
模型联网搜索后生成了护眼配色和装饰元素。导出打印时仍有部分样式丢失，又折腾了几轮。总计约 30 轮对话，两天完成。
4.5 验证导出结果
最终验证动作：在编辑器输入一段包含标题、表格、代码块、数学公式的 Markdown，点击预览确认渲染，再点下载。用 PDF 阅读器打开，检查三点：文字能否框选、代码块是否溢出、背景色是否保留。实测下来，打印方案导出的 PDF 文字可选中，样式与预览一致。
5. 本篇常见错排查
5.1 MCP 工具不触发
模型不会自动调用所有 MCP。视觉理解要明确说“使用 zai-mcp-server 理解图片”，联网搜索要说“联网搜索”，chrome-devtools 要说“使用 chrome-devtools 查看控制台”。名称点对，调用才稳。
5.2 环境变量不生效
ANTHROPIC_BASE_URL末尾不要多加斜杠，写成https://taotoken.net/api即可。如果claude启动后仍报连接错误，检查 Key 是否复制完整，以及终端是否重启过。
5.3 PDF 导出字体变形
根因是 html2canvas 截图。改用window.print方案，并在打印前设置@media print样式，隐藏不需要打印的按钮和面板。打印时用window.print()触发浏览器原生导出，文字可框选。
5.4 上下文过长导致模型“失忆”
对话轮次多了之后，上下文会膨胀。每隔一段时间用/compact压缩，或者/clear清空重来。也可以开一个 Cursor 窗口方便查看文件改动，纯终端不方便对比。
5.5 改错代码无法回滚
做好 Git 阶段性提交。每完成一个小功能就git commit，改错了直接git checkout回滚。Vibe coding 一时爽，不 review 就是 debug 火葬场。
6. 继续迭代：把工具用起来
工具跑通后，日常使用就是打开页面、粘贴 Markdown、选主题、导出。如果想让模型能力更顺手，可以到模型对话页面直接测试 GLM 4.6 的响应效果；长期做编码和 Agent 任务，可以了解 Coding Plan 的额度方案；需要管理多个 Key 或查看调用量，API Keys 控制台和接入文档里有详细说明。
两天做出一个自定义样式的 MD 转 PDF 工具，核心不在于代码量，而在于把 MCP 工具用对、把上下文管好、把每一步验证做扎实。模型负责生成和排查，你负责聚焦需求和把关结果。这套流程复用到其他小工具上，同样成立。
