前言
每次写文章最痛苦的就是到各个平台发布文章，欧阳的文章发布在：微信公众号、掘金、知乎、CSDN、博客园。这也就意味着每次发布文章我都需要到这些平台去上传文章图片、粘贴md内容、填写摘要、上传logo这些，每个平台我都需要手动操作一次，非常繁琐。也试过一些多平台文章分发工具，但是效果都不太好。
主要的痛点
痛点1：文章是以md文件写在本地机器，并且文中有不少图片，发布文章的时候需要依次将本地的图片上传到这些平台，每个平台都要执行一次，很麻烦。
痛点2：不是所有平台都支持直接将md内容粘贴到编辑器
- 微信就只支持富文本编辑器，我的做法是先将md粘贴到mdnice生成html，然后粘贴到微信中。
- 知乎只支持md文件的上传
痛点3：由于每个平台规则不同，引流方式也不同 痛点4：公众号平台的logo和其他平台都不同，需要定制化
基于我这些痛点，目前市面上的多平台文章分发工具基本都不能满足我的需求，所以干脆就使用Vibe Coding为自己的工作流量身定做一个多平台分发工具。
这篇文章来聊聊我是如何做这个工具的过程的。
想要做一个什么样的工具？
首先要明确这个工具的目标是什么？
我期望的工作流是：在本地写完文章，然后一键将本地的md文件发布到各个平台。
这里的一键要做很多事情，这个是事情清单：
- 生成logo，分别是微信logo和其他平台logo
- 将文章中的图片上传到图床
- 将每个平台对应的引流钩子插入到文章中，生成对应平台的md文章
- 打开掘金文章发布页面、输入标题、将md文章粘贴到编辑器、选择分类、标签、创造话题、上传logo
- 打开csdn和博客园文章发布页，发布流程和掘金差不多
- 打开知乎的文章发布页，发布流程也是差不多，大的区别就是知乎是将md文件上传而不是粘贴
- 因为公众号编辑器只支持富文本，所以公众号这里区别大点：
- 打开mdnice，然后将md文章内容粘贴到编辑器中，生成富文本的html，点击复制按钮将富文本复制到剪贴板
- 打开公众号文章发布页面，首先选择我设置的模版，将模版内容填充到编辑器中
- 将从mdnice复制的富文本粘贴到模版的正文
- 上传logo，因为公众号的logo分为消息列表和卡片两种形式，所以我将两个logo合并成一个logo文件，然后在上传的时候手动调整
- 声明原创、填充描述、开启赞赏
上面的清单差不多就是欧阳每次发布文章需要做的事情，在已经很熟练的情况下，人工来做一般要30分钟左右才能完成，而且还可能出错，所以一般还要检查一遍。
做这个工具的难点？
明确了工具要做的事情后，来分析一下这个工具的难点在哪里？
难点1: logo如何生成？
好在我的logo风格都很简单，纯色的背景+白色的手写字体文案。
普通的logo如图： 
微信的logo如图： 
这里的唯一难点在于使用程序生成logo时什么时候进行换行，比如上面的图中 Claude Code换行就不错。
这个问题很简单，直接调用大模型，让大模型告诉我就行了。将整个logo的文案丢给大模型配合提示词，然后大模型就会输出换行后的logo文案。
难点2：公众号、掘金等平台没有提供API进行文章发布
这里我的做法是为每个平台量身定做一个浏览器插件，插件会注入一个名为"一键发布"的按钮，点击这个按钮后将对应平台的md文章内容填充到编辑器、以及前面提到的描述、logo上传、分类标签等。
这个"一键发布"按钮其实就是将我之前手工做的事情改为程序自动化执行，具体的实现也没有想象中的那么难，说白了还是操作DOM，以前是手工点按钮和输入内容，现在变成了程序操作DOM的方式点按钮和输入内容，这里前端的同学应该特别清楚。
这个是点击"一键发布"按钮之前的样子： 
这个是点击"一键发布"按钮之后的样子： 
通过这个浏览器插件，欧阳现在只需要点击"一键发布"按钮，然后等待几秒钟，就能将文章发布到掘金了。这个插件将所有的发布文章要做的事情都做了。
浏览器插件部分是工作量最大的一环，因为每个平台的文章发布页面都不同，需要进行量身定制。
实现这个工具
前面我们已经理清楚了工具的难点和工具要做的事情清单，接下来我们只需要按照清单顺序将功能依次填充即可。
生成logo
前面已经讲过了，写了一个logo-generator.js，执行这个脚本后就会生成两个logo文件，分别是普通logo和微信logo。这个很简单，直接让Claude Code来写就行了。
将文章中的图片上传到图床
博客园是支持API上传和发布文章的，并且图片上传到博客园后也不会添加水印。所以我的做法是实现一个cnblogs-uploader.js脚本，执行这个脚本后就会将文章中的图片上传到博客园，然后拿到一个新的md文件，这个文件里面的图片地址已经转换为了博客园的地址。
这个cnblogs-uploader.js脚本也是我指导Claude Code写的。
添加引流钩子
通过上一步已经拿到了一个将文章图片上传到图床后的md文件，这里我只需要给不同的平台创建不同的md文件，然后使用脚本遍历这些md文件插入引流钩子。如图： 
启动本地服务器
前面的浏览器插件你可能有个疑问，点击插件的"一键发布"按钮后就将md文件的内容填充到页面，那么这个md文件的内容从哪里来呢？
这里我在本地启用了一个node服务器，将前面添加引流钩子后的各平台md文件通过接口暴露给浏览器插件，所以在浏览器插件里面可以直接拿到对应平台的md文件内容，然后就可以通过一键发布按钮将本地md文件发布到各个平台。
如何将流程串起来，实现真正的一键发布
前面我们实现了几个脚本和几个浏览器插件，通过这些脚本和浏览器插件的组合可以让我们实现自动化的多平台文章发布，但是这些流程没有串起来。
1、我需要手动执行这些脚本生成logo、各个平台的md文件 2、启动本地服务器 3、手动在浏览器中打开这些平台的文章发布页面，然后一个个点击"一键发布"按钮
接下来我们要将这些流程串起来。
首先要做的事情是将这些脚本串起来，这个很简单，新增一个make命令就可以将这些脚本串起来： 
通过这个make命令，就可以帮我们自动生成logo、生成各个平台的md文件，启动本地服务器。
接下来就是手动打开各个平台的文章发布页面，然后一个个点击"一键发布"按钮这个问题。
我的做法是Claude Code + mcp-chrome来实现。
mcp-chrome是一个操作浏览器的mcp，我选择他主要有两个原因：
- 可以复用当前浏览器的登录状态
- 可以操作浏览器同时打开多个tab
所以我将我的需求告诉Claude Code，让他给我写一个prompt，大意是使用mcp-chrome打开掘金、csdn、知乎、公众号的文章发布页面，然后一个个点击"一键发布"按钮。
现在我们通过提示词已经解决了自动化打开浏览器、加载各平台文章发布页、点击"一键发布"按钮的问题。
接着我们还需要将前半段的make publish-with-logo命令也集成到前面的提示词里面，让AI先执行make publish-with-logo命令生成要发布的md文件和logo，然后在打开浏览器点击"一键发布"按钮进行发布。
现在我们已经有了一个提示词，通过将这个提示词丢给Claude Code，AI就能自动完成将本地md文件定制化发布到各个平台。
每次都输入这一堆提示词太麻烦了，所以我将这些提示词封装为Claude Code的自定义指令： 
这样我就可以直接输入/auto-publish命令，AI就能自动完成将本地md文件定制化发布到各个平台，实现真正的全流程一键发布。
总结
这篇文章介绍了我实现多平台文章一键发布工具的全过程，主要介绍还是在思路方面，文中没有贴代码。并且整个工具的所有代码和方案全部都是由Claude Code完成的，我做的事情只有：告诉Claude Code需求、和Claude Code讨论技术方案、监督Claude Code写代码。