2天开发自定义样式MD转PDF工具：AI辅助编码（Claude Code+GLM）实践全记录
文章目录
- 效果
- 基础环境搭建
- 基础环境搭建
- MCP工具扩展（Pro版功能）
- 开发过程：AI辅助迭代优化（Vibe Coding）
- 项目想法(尝试1轮)
- 对话第2次：实时预览
- 对话第3次：修复问题
- 对话第4次：下载的PDF样式
- 对话第16轮-- 小说主题适配的优化
- 使用心得
效果
先上10.18效果：一个可以自定义样式的md转pdf的在线工具页面。
10.19更新：新增支持纯色以及自定义上传背景图设置。（可以放个大头照当水印了hhh）
| 页面预览 | 导出后 |
|---|---|
 |  |
两图共同反映了模型训练过程中的学习状态和泛化能力表现。
体验链接：https://yywebsite.cn/home/toy/md2pdf
开源仓库：https://github.com/YYForReal/md-2-pretty-pdf
开发周期：2天（Claude Code + GLM 4.6 + MCP + 本人） 后续有时间再进一步优化吧~
基础环境搭建
基础环境搭建
参考智谱AI开发平台快速入门文档，完成Claude Code与GLM环境变量的一键配置：
- 安装Node.js v22版本，配置对应的Claude Code依赖包；
- 下载脚本之后通过bash一键执行，输入api key即可。
MCP工具扩展（Pro版功能）
由于我订阅了pro，所以可以通过下面的两条指令配置网页获取和视觉理解的MCP。(注意下面的api key 也需要替换)
# 视觉理解MCP配置
claude mcp add -s user zai-mcp-server --env Z_AI_API_KEY=your_api_key -- npx -y "@z_ai/mcp-server"# 网页搜索MCP配置
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视觉服务文档
打个广告：如果有希望订阅的朋友通过邀请链接过去的话可以少10%（然后我也有优惠了嘿嘿）：
链接：https://www.bigmodel.cn/claude-code?ic=UMZFVDB1VY
最后当我们在新项目目录下输入cmd，开启终端之后键入claude看到如下界面即成功。（默认模型表面是sonnet 4.5 实则会转发到GLM 4.6）
Tips
-
如果是基于已有项目，先输入/init可以让大模型提前梳理整个项目目录。
-
由于我们是新项目，所以可以直接说想法或者找个Github开源项目拉下来二次开发。
开发过程：AI辅助迭代优化（Vibe Coding）
项目想法(尝试1轮)
- 最近让大模型生成了小说，但是当我需要分享给其他人的时候，用markdown直接发过去别人用手机看显然不够方便，希望转成pdf。
- 但是现有的md2pdf的工具都用起来通常的样式都比较单一，我希望能够部署一个md2pdf的工具，但是可以调整生成的pdf的样式。
比如标题可以居中，背景可以自定义选择等等。
就是上面的话（毫无提示技巧，让我们看看LLM的能力）
后面允许文件编辑即可。（通过shift tab可以保持允许编辑文件的状态。）
允许后我们就能看到GLM 开始酷酷干活啦。
等待几分钟之后，模型生成了第一版，让我们来看看效果：
不知道是claude code还是GLM 4.6的模型本身，感觉最近包含cursor在内的AI 辅助编码都很习惯生成测试文件了。
打开index.html ，左侧是编辑器，右侧是配置面板。
右侧配置面板底部才有预览按钮以及下载按钮。
预览的时候正常，但是下载之后的pdf字体似乎有点变形了。
测试对话第一次后梳理新的要求（prompt）：
- 我希望预览面板是默认打开且实时跟随编辑区域渲染的，最好左右并列布局。
- 预览的页面正常，但是下载后的pdf页面整体变形了。
为了一次focus单个任务，所以打算一条条输入。
对话第2次：实时预览
其实这里的界面有了，但是开控制台会发现，因为删除了预览的触发按钮，所以有些挂载的对象缺失了，其实主题配置没有效果的。
（并且手动打开控制台会看到报错两条消息）
最近出了一个能够查看chrome的开发者工具的chrome-devtools-mcp，决定先加上，这样子我们就可以不直接给LLM错误提示，而是让他用mcp工具自己去控制台检查一下。
ctrl c终止，新建终端输入一行指令即可。
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
终端提示如下：
E:\code\vibe-coding\md-2-pretty-pdf>claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
Added stdio MCP server chrome-devtools with command: npx chrome-devtools-mcp@latest to local config
File modified: C:\Users\Administrator\.claude.json [project: E:\code\vibe-coding\md-2-pretty-pdf]
最后在终端输入claude --continue可以保持上下文再继续：
输入/mcp可以查看当前已有的mcp工具：
对话第3次：修复问题
请使用chrome-devtools查看当前index.html页面运行是否出现错误。
这个mcp工具还不错，会自动驱动浏览器并且尝试查看控制台信息，当然需要我们先允许。
终于看到他排查到了那两个问题（老父亲落泪），可以看到它也是会截图看效果，看控制台信息再返回去修代码的。
后面还会模拟鼠标点击（但是等待超时）、转去在控制台执行脚本查看效果测试。。
最后的主题渲染也支持了。
对话第4次：下载的PDF样式
可能直接说样式变形不太好理解，故将下载的PDF截图作为image.png。通过@指定该图片文件位置，让其理解原因并尝试修复。
注意，这里不支持在终端ctrl v粘贴剪贴板里面的图片文件。
对话第5次
（发现这里是模型自带的理解，应该要说 使用zai-mcp-server理解当前图片中下载的PDF效果,否则不会触发）
对话第6次
同理，联网搜索这个MCP也需要直接点名，不过考虑到原本这个mcp的名称取得好，所以直接说联网搜索页能切换到这个mcp调用上。
此时发现了内部使用了html2canvas 导致变形，需要让其联网调研一下其他方案。
实现效果如下：
后续 存在 8 轮的对话在反复进行PDF导出的优化，AI调研后发现纯前端的pdf导出要么是通过打印，要么是通过html2canvas（但是截图导出就无法框选文字了，且占用空间较大，故排除。）
最终选择的核心思路：点击打印按钮 - 保存页面状态 - 设置预览的HTML代码 - window.print - 恢复页面状态 - 完成。
对话第16轮-- 小说主题适配的优化
直到这里才开始做与市面上不同的功能定制了。
理解我们当前的主题设置能力，我希望新增2个关于适合小说阅读的PDF主题。可以调用MCP工具联网搜索、也可以参考主流的小说阅读平台的护眼模式背景。或者搜集一些公开可用的剪贴画作为装饰图片进行点缀。
得到如下效果:
不过当前流程虽然成功了，但是导出打印的时候仍有部分样式丢失，此处又折腾了好几轮。总计大概在30轮的样子。而且包括人工排查，两天造一个小工具，还不错。
使用心得
- 可以先了解更多的claude code指令与，比如sub agent这种指令有助于上下文保持干净的编码；每隔一段时间使用/compact 或者 /clear 清空上下文。
- mcp工具也很重要，有时候需要指明特定的MCP工具名称来强制调用。
- 体验下来可以开一个cursor窗口方便查看文件改动，纯终端不方便。同时做好GIt的阶段性提交记录备份，防止改错。
- 指令聚焦到某一个具体的细节虽然可以更精准的实现，但是需要注意是否会影响到其他级联的流程或者模块。
- vibe coding一时爽，debug火葬场（不review的时候），务必要保持耐心！