文章目录2026-10-23 更新重新上线也收到第一个 PR效果基础环境搭建基础环境搭建MCP工具扩展Pro版功能开发过程AI辅助迭代优化Vibe Coding项目想法(尝试1轮)对话第2次实时预览对话第3次修复问题对话第4次下载的PDF样式对话第16轮-- 小说主题适配的优化使用心得2026-10-23 更新重新上线也收到第一个 PR最近迁移个人网站时发现这个小工具的体验链接没有跟着恢复玩具目录里也少了入口。这次把它重新部署好了原来的链接继续用不用换收藏直接打开 Markdown 转 PDF从“有趣玩具”目录进入顺手修了一个实测发现的问题关闭或取消打印之后刚输入的 Markdown 和样式设置会丢失。原因是旧实现拿body.innerHTML保存页面它没有保存输入框当前的值恢复后又重新绑定了一遍事件。现在改为保留原来的 DOM 节点打印完成再放回去正文、主题和纸张设置都能保留也可以接着编辑、再次打印。这次用中文正文、表格、代码块、行内和块级公式实际导出了一份 A5 PDF文字可以选择复制也检查了取消打印后的恢复。使用时点击“打印 / 保存 PDF”目标选择“另存为 PDF”想保留背景色或背景图记得勾选打印窗口里的“背景图形”不需要网址和日期就关闭页眉页脚。另外项目收到了第一个外部 PR感谢 webbrain-one 在8月提交的 PR #1把 README 中旧的 html2canvas 导出说明改成了实际使用的浏览器原生打印 API。这次已经合并保留了原提交和贡献者署名。虽然只是一处文档修正但它把说明和代码对齐了很开心有人一起补这个小工具。当前基础排版和导出仍然是纯前端公式库需要联网加载。仓库里的 AI 背景功能是可选项需要自己配置模型服务和 API Key也会受服务商跨域策略及额度限制这次没有开放共享的免费 AI 接口。效果体验链接https://yywebsite.cn/home/toy/md2pdf开源仓库https://github.com/YYForReal/md-2-pretty-pdf开发原型周期2天Claude Code GLM 4.6 MCP 本人先上10.18效果一个可以自定义样式的md转pdf的在线工具页面。10.19更新新增支持纯色以及自定义上传背景图设置。可以放个大头照当水印了hhh页面预览导出后10.24: 支持常规数学公式渲染。基础环境搭建基础环境搭建参考智谱AI开发平台快速入门文档完成Claude Code与GLM环境变量的一键配置安装Node.js v22版本配置对应的Claude Code依赖包下载脚本之后通过bash一键执行输入api key即可。MCP工具扩展Pro版功能由于我订阅了pro所以可以通过下面的两条指令配置网页获取和视觉理解的MCP。(注意下面的api key 也需要替换)# 视觉理解MCP配置claude mcpadd-suser zai-mcp-server--envZ_AI_API_KEYyour_api_key -- npx-yz_ai/mcp-server# 网页搜索MCP配置claude mcpadd-suser-thttp web-search-prime https://open.bigmodel.cn/api/mcp/web_search_prime/mcp--headerAuthorization: Bearer your_api_key配置参考MCP视觉服务文档打个广告如果有希望订阅的朋友通过邀请链接过去的话可以少10%然后我也有优惠了嘿嘿链接https://www.bigmodel.cn/claude-code?icUMZFVDB1VY最后当我们在新项目目录下输入cmd开启终端之后键入claude看到如下界面即成功。默认模型表面是sonnet 4.5 实则会转发到GLM 4.6Tips如果是基于已有项目先输入/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 mcpaddchrome-devtools npx chrome-devtools-mcplatest终端提示如下E:\code\vibe-coding\md-2-pretty-pdfclaude mcpaddchrome-devtools npx chrome-devtools-mcplatest Added stdio MCP server chrome-devtools with command: npx chrome-devtools-mcplatest tolocalconfig 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的时候务必要保持耐心