WorkBuddy Claw 实战:AI 打造自动化公众号发布系统
🎯 项目背景
作为内容创作者,我每天都在为微信公众号文章的发布流程烦恼:从内容创作、格式转换到图文排版、封面生成,每个环节都需要重复劳动。直到我发现了 WorkBuddy Claw —— 国内首个 IM 原生 AI Agent 平台。
✨ 核心亮点
WorkBuddy Claw 让我体验到了真正的"AI 助手":
- 免部署·安装即用
—— 无需配置环境,开箱即用
- 预集成模型
—— 无需自己搞定 API Key,直接开干
- 本地+云端双模
—— 即使关掉电脑,Agent 也能继续工作
- 多 Agent 并行
—— 同时开发、测试、部署,一人成军
📋 实战任务
目标:用 WorkBuddy Claw 构建一套完整的微信公众号自动化发布系统,包括:
-
Markdown 转 HTML 格式转换
-
自动封面图生成(10种配色方案)
-
智能关键词提取
-
微信公众号 API 集成
-
一键发布到公众号
🛠️ 技术实现
第一步:需求分析与规划
我直接在企微中 @WorkBuddy Claw 发送:
帮我规划一个微信公众号自动化发布系统,需要支持 Markdown 转 HTML、自动封面生成、关键词提取和一键发布功能
WorkBuddy Claw 立即响应,分析需求并给出了完整的技术方案:
技术栈建议:
- Node.js:后端处理
- Markdown-it:Markdown 解析
- Sharp:图片处理(SVG→PNG)
- 微信公众号 API:文章发布
项目结构:
├── markdown-to-wechat.js # 主转换器
├── generate_cover.js # 封面生成
├── package.json # 依赖管理
└── test-converter.js # 测试脚本
第二步:代码生成
接着我让 WorkBuddy Claw 开始编写代码:
开始实现核心功能,先从 Markdown 转 HTML 和封面生成开始
WorkBuddy Claw 迅速生成了三个核心文件:
1. 封面生成器(generate_cover.js)
const sharp = require('sharp');
const crypto = require('crypto');
// 10 种渐变配色方案
const colorSchemes = [
['#667eea', '#764ba2'], // 紫蓝渐变
['#f093fb', '#f5576c'], // 粉紫渐变
['#4facfe', '#00f2fe'], // 蓝绿渐变
['#43e97b', '#38f9d7'], // 绿青渐变
['#fa709a', '#fee140'], // 粉黄渐变
['#a18cd1', '#fbc2eb'], // 青紫渐变
['#667eea', '#764ba2'], // 浅蓝粉
['#ff9a9e', '#fecfef'], // 浅粉
['#f6d365', '#fda085'], // 暖橙
['#ff0844', '#ffb199'] // 红蓝色
];
function generateSVGCover(title, outputFile) {
// 根据标题哈希选择配色
const hash = crypto.createHash('md5').update(title).digest('hex');
const schemeIndex = parseInt(hash.substring(0, 2), 16) % colorSchemes.length;
const [color1, color2] = colorSchemes[schemeIndex];
// 自动换行处理
const maxCharsPerLine = 12;
const words = title.split('');
let lines = [];
let currentLine = '';
for (let char of words) {
if (currentLine.length >= maxCharsPerLine) {
lines.push(currentLine);
currentLine = char;
} else {
currentLine += char;
}
}
if (currentLine) lines.push(currentLine);
// 动态字体大小
const fontSize = title.length < 30 ? 48 : title.length < 50 ? 36 : 28;
const lineHeight = fontSize * 1.5;
const startY = 200 - (lines.length * lineHeight) / 2 + (lines.length - 1) * lineHeight / 2;
// 生成 SVG
const svg = `
<svg width="1000" height="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:${color1};stop-opacity:1" />
<stop offset="100%" style="stop-color:${color2};stop-opacity:1" />
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="url(#grad)" />
<!-- 装饰圆圈 -->
<circle cx="100" cy="100" r="80" fill="rgba(255,255,255,0.1)" />
<circle cx="900" cy="300" r="120" fill="rgba(255,255,255,0.15)" />
<!-- 文字 -->
${lines.map((line, i) => `
<text x="500" y="${startY + i * lineHeight}"
font-family="system-ui, sans-serif"
font-size="${fontSize}"
font-weight="bold"
fill="white"
text-anchor="middle">
${line}
</text>
`).join('')}
</svg>
`;
// SVG 转 PNG
return sharp(Buffer.from(svg))
.png()
.toFile(outputFile);
}
2. Markdown 转换器(markdown-to-wechat.js)
const MarkdownIt = require('markdown-it');
const fs = require('fs');
const path = require('path');
const { generateSVGCover } = require('./generate_cover');
class MarkdownToWeChat {
constructor() {
this.md = new MarkdownIt({
html: true,
linkify: true,
typographer: true
});
}
markdownToHTML(markdown, title, coverPath) {
const htmlContent = this.md.render(markdown);
return `<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${title}</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.8;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #f5f5f5;
}
.content {
background: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.cover {
width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 30px;
}
h1 { color: #1a1a1a; font-size: 2em; margin-bottom: 0.5em; }
h2 { color: #333; border-left: 4px solid #667eea; padding-left: 15px; margin: 1.5em 0 1em; }
p { color: #555; margin: 1em 0; }
pre { background: #f8f9fa; padding: 15px; border-radius: 6px; overflow-x: auto; }
code { background: #f0f0f0; padding: 2px 6px; border-radius: 3px; }
blockquote { border-left: 4px solid #ddd; padding-left: 20px; color: #666; margin: 1.5em 0; }
table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
th { background: #f8f9fa; font-weight: 600; }
</style>
</head>
<body>
<div class="content">
<img src="${coverPath}" class="cover" alt="${title}">
${htmlContent}
</div>
</body>
</html>`;
}
async convert(markdownPath, outputDir, customTitle) {
const markdown = fs.readFileSync(markdownPath, 'utf-8');
const title = customTitle || path.basename(markdownPath, '.md');
// 生成封面
const coverPath = path.join(outputDir, 'cover.png');
await generateSVGCover(title, coverPath);
// 生成 HTML
const html = this.markdownToHTML(markdown, title, 'cover.png');
const htmlPath = path.join(outputDir, 'article.html');
fs.writeFileSync(htmlPath, html);
console.log(`✅ 转换成功!`);
console.log(`HTML: ${htmlPath}`);
console.log(`封面: ${coverPath}`);
return { html: htmlPath, cover: coverPath };
}
}
module.exports = MarkdownToWeChat;
第三步:测试与优化
让 WorkBuddy Claw 运行测试:
测试一下转换功能,用项目中的 OpenClaw-Aras-N8N-Enterprise-Integration.md 文件
WorkBuddy Claw 自动执行测试,并发现了问题:
⚠️ 发现问题:长标题在封面图上显示不完整
💡 解决方案:实现智能换行算法,根据标题长度动态调整字体大小
快速修复后,效果完美!
第四步:微信公众号 API 集成
继续扩展功能:
帮我集成微信公众号 API,实现一键发布功能
WorkBuddy Claw 立即生成发布模块:
const axios = require('axios');
class WeChatPublisher {
constructor(appId, appSecret) {
this.appId = appId;
this.appSecret = appSecret;
this.accessToken = null;
}
async getAccessToken() {
const url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${this.appId}&secret=${this.appSecret}`;
const response = await axios.get(url);
this.accessToken = response.data.access_token;
return this.accessToken;
}
async uploadMedia(filePath, type = 'thumb') {
const token = await this.getAccessToken();
const url = `https://api.weixin.qq.com/cgi-bin/material/add_material?access_token=${token}&type=${type}`;
const form = new FormData();
form.append('media', fs.createReadStream(filePath));
const response = await axios.post(url, form, {
headers: form.getHeaders()
});
return response.data.media_id;
}
async publishArticle(title, content, thumbMediaId) {
const token = await this.getAccessToken();
const url = `https://api.weixin.qq.com/cgi-bin/draft/add?access_token=${token}`;
const data = {
articles: [{
title,
author: 'OpenClaw',
digest: content.substring(0, 120) + '...',
content,
thumb_media_id: thumbMediaId,
show_cover_pic: 1,
need_open_comment: 1,
only_fans_can_comment: 0
}]
};
const response = await axios.post(url, data);
return response.data;
}
}
第五步:一键发布
最后整合所有功能:
# 一键发布
node publish.js OpenClaw-Aras-N8N-Enterprise-Integration.md
结果:
-
✅ Markdown 自动转换成 HTML
-
✅ 封面图自动生成(渐变配色很漂亮!)
-
✅ 上传到微信公众号素材库
-
✅ 自动保存为草稿
-
✅ 只需一键确认即可发布
🎉 实战效果
效率提升
- 过去
:手动排版 1 篇文章需要 30-60 分钟
- 现在
:自动化发布只需 5 分钟
- 提升
:6-12 倍效率
质量提升
-
封面图自动生成,配色专业美观
-
HTML 格式规范,响应式设计
-
一键发布,避免人工操作失误
体验提升
-
在企微里 @WorkBuddy Claw 就能工作
-
代码质量高,注释完整
-
遇到问题 AI 自动排查修复
💡 WorkBuddy Claw 核心优势体验
1. IM 一键派活
无需打开 IDE,在企微里直接发指令,Agent 全自动完成任务。这种体验真的太爽了!
2. 本地+云端双模
关掉电脑 Agent 也能继续运行,国内独家功能。再也不用担心长时间任务中断了。
3. 多 Agent 并行
同时让多个 Agent 并行工作:
-
Agent 1:生成封面
-
Agent 2:转换 HTML
-
Agent 3:测试 API
-
Agent 4:写文档
效率直接翻倍!
4. 免部署·安装即用
下载安装就能用,无需配置环境。预集成模型,不用自己申请 API Key,省心省力。
🚀 总结
这次实战让我深刻体会到 WorkBuddy Claw 的强大:
- 真正的 AI 助手
:不是聊天机器人,而是能执行任务的 Agent
- IM 原生体验
:在企微/飞书/钉钉里直接 @ 一下,Agent 自动接活、执行、交付
- 开发效率爆炸
:一人成军不再是梦
- 安全可靠
:腾讯级网关护航,数据安全有保障
如果你也需要提升工作效率,强烈推荐试试 WorkBuddy Claw!
📚 完整代码
完整项目代码已开源,欢迎 Star:
-
GitHub:https://github.com/andyy1976/workbuddy-claw-wechat-publisher
-
演示视频: [你的视频地址]
🔗 相关链接
-
WorkBuddy Claw 官网:https://www.codebuddy.cn/work/
-
产品文档:https://www.codebuddy.cn/docs/workbuddy/Overview
-
活动链接:https://wj.qq.com/s2/25894124/ua4u
作者:OpenClaw 开发者
标签:#WorkBuddyClaw实战 #百万Credits悬赏 #腾讯版小龙虾
发布时间:2026年3月22日
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)