원클릭으로
wechat-article-formatter
// 将Markdown文章转换为美化的HTML格式,适配微信公众号发布。应用专业CSS样式、代码高亮、优化排版。当用户说"美化这篇文章"、"转换为HTML"、"优化公众号格式"、"生成公众号HTML"时使用。
// 将Markdown文章转换为美化的HTML格式,适配微信公众号发布。应用专业CSS样式、代码高亮、优化排版。当用户说"美化这篇文章"、"转换为HTML"、"优化公众号格式"、"生成公众号HTML"时使用。
自动将 HTML 文章发布到微信公众号草稿箱,支持封面图上传、标题、作者和元数据管理。当用户说"推送到微信"、"发布到公众号草稿"、"上传到草稿箱"或提到微信文章发布时使用。
从 AI 产品经理视角撰写微信公众号文章。涵盖 AI 产品拆解、场景解决方案、效率提升实战、产品方法论、行业观察。当用户说"写一篇关于XXX的文章"、"分析一下XXX产品"、"聊聊XXX"时使用。
自动搜索、抓取、改写技术内容,生成适合微信公众号的中文科普文章。涵盖AI大模型、GitHub开源工具、技术话题。当用户说"写一篇关于XXX的文章"、"帮我研究XXX"、"生成公众号文章"时使用。
| name | wechat-article-formatter |
| description | 将Markdown文章转换为美化的HTML格式,适配微信公众号发布。应用专业CSS样式、代码高亮、优化排版。当用户说"美化这篇文章"、"转换为HTML"、"优化公众号格式"、"生成公众号HTML"时使用。 |
| allowed-tools | Read, Write, Bash |
目标:将 Markdown 文章转换为适配微信公众号的精美 HTML,实现一键发布。
核心价值:效率提升 15 倍(30分钟 → 2分钟),格式一致专业。
场景判断:
| 场景 | 如何处理 |
|---|---|
| 用户提供文件路径 | 直接使用该路径 |
| 用户粘贴 Markdown 内容 | 先使用 Write 工具保存为 .md 文件 |
| 刚使用过 wechat-tech-writer | 自动查找最新生成的 .md 文件(见集成指导) |
| 用户只说"美化文章" | 询问用户:文件路径或粘贴内容 |
自动检测最新文章(与 wechat-tech-writer 集成):
# 查找当前目录最新的 .md 文件
latest_md=$(ls -t *.md 2>/dev/null | head -1)
if [ -n "$latest_md" ]; then
echo "检测到最新文章:$latest_md"
fi
⚠️ 重要规则:
检查命令:
cd /root/.claude/skills/wechat-article-formatter
ls -lh examples/
可用模板:
| 模板文件 | 风格特色 | 适用场景 |
|---|---|---|
| VSCode 蓝色科技风.html | 导语块、序号章节标题、功能卡片、操作步骤 | 技术文章、产品介绍、教程 |
| 红蓝对决·深度测评模板.html | 渐变标题、对比卡片、数据表格、引用金句 | 对比评测、深度分析 |
| 极客暗黑风.html | 深色背景、极客风格 | 技术深度文章、黑客风格 |
| 现代极简风.html | 简约清爽 | 通用文章、简洁风格 |
选择逻辑:
文章分析:
├─ 技术/产品介绍类 → VSCode 蓝色科技风 ✅
├─ 对比/评测类 → 红蓝对决模板 ✅
├─ 深度技术文章 → 极客暗黑风
└─ 通用内容 → 现代极简风
执行方式:
<!-- ⚠️ 标题请在微信公众号编辑器中单独填写 -->scripts/convert-code-blocks.py 将生成的 HTML 中的代码块转换为微信兼容格式python scripts/convert-code-blocks.py input.html output.html<pre><code> 转换为 <div> + <br> + 格式(微信唯一支持的代码块格式)如果没有合适的模板,才使用步骤3的基础 CSS 主题转换。
决策树(自动选择 OR 询问用户):
文章内容分析:
├─ 包含代码块(```)或技术词汇多 → tech(科技风)
├─ 包含数据表格、商业术语 → business(商务风)
└─ 纯文字、通用内容 → minimal(简约风)
主题对照表:
| 主题 | 适用场景 | 配色 | 何时使用 |
|---|---|---|---|
| tech | 技术文章、AI、编程教程 | 蓝紫渐变 | 默认选择,来自 wechat-tech-writer 的文章 |
| minimal | 生活随笔、读书笔记 | 黑白灰 | 纯文字内容,无代码 |
| business | 商业报告、数据分析 | 深蓝金 | 包含表格、数据、图表 |
如何询问用户:
检测到文章包含代码块,建议使用 tech 主题。
需要切换主题吗?(tech / minimal / business)
标准转换命令:
cd /root/.claude/skills/wechat-article-formatter
python scripts/markdown_to_html.py \
--input "{文件路径}" \
--theme {主题名} \
--output "{输出路径}" \
--preview
参数说明:
--input:Markdown 文件路径(必需)--theme:tech / minimal / business(默认 tech)--output:HTML 输出路径(可选,默认同名 .html)--preview:转换后自动在浏览器打开预览(推荐)示例:
# 最常用:使用 tech 主题转换并预览
python scripts/markdown_to_html.py \
--input "Claude_Sonnet_4介绍.md" \
--theme tech \
--preview
转换完成后,必须检查:
使用 Read 工具读取生成的 HTML 文件(前 50 行),检查:
| 检查项 | 如何验证 | 常见问题 |
|---|---|---|
| 标题样式 | 查看 <h1>, <h2> 标签的 style 属性 | 样式丢失 → 重新转换 |
| 代码高亮 | 查看 <pre><code> 是否有语言标识 | 无高亮 → 检查 Markdown 是否指定语言 |
| 图片路径 | 查看 <img src=""> 的路径 | 本地路径 → 提醒用户需上传到微信 |
| 表格格式 | 查看 <table> 是否有内联样式 | 格式混乱 → 简化表格列数 |
快速检查命令:
# 查看 HTML 文件前 50 行
head -50 output.html
询问用户:
✅ 转换成功!已生成:{输出文件路径}
预览效果:
- 已在浏览器打开预览
- 或访问:file://{绝对路径}
请检查效果,满意吗?
- 满意 → 进入步骤6(发布指导)
- 需要调整 → 可以切换主题或手动修复
如果用户不满意:
| 问题 | 解决方案 |
|---|---|
| "颜色不喜欢" | 切换主题重新生成(tech/minimal/business) |
| "代码块没高亮" | 检查 Markdown 代码块是否指定语言(```python) |
| "图片显示不正常" | 提醒:本地图片需上传到微信编辑器 |
| "表格太宽" | 建议简化表格(≤4列)或接受横向滚动 |
输出给用户的完整指导:
📋 发布到微信公众号步骤:
1. 打开微信公众号编辑器
2. ✅ 在标题栏填写文章标题:{从 Markdown 提取的标题}
3. 打开生成的 HTML 文件:{文件路径}
4. 在浏览器中按 Ctrl+A(全选)→ Ctrl+C(复制)
5. 粘贴到编辑器正文区(Ctrl+V)
6. 处理图片:
- 删除无法显示的本地图片引用
- 重新上传图片到微信编辑器
6. 最后检查:标题层级、段落间距、代码块
7. 使用微信编辑器的"预览"功能在手机查看
8. 确认无误后发布
⚠️ 注意事项:
- 样式已内联,可直接粘贴
- 本地图片需重新上传
- 粘贴后微信编辑器可能微调部分样式(正常)
详细发布指南:references/publishing-guide.md
识别标志:
自动化流程:
# 1. 查找最新文章
latest_article=$(ls -t *.md 2>/dev/null | head -1)
# 2. 确认是否是目标文章
echo "检测到最新文章:$latest_article"
echo "是否要转换这篇文章?(y/n)"
# 3. 自动选择 tech 主题(wechat-tech-writer 主要生成技术文章)
python scripts/markdown_to_html.py \
--input "$latest_article" \
--theme tech \
--preview
无缝衔接话术:
检测到你刚用 wechat-tech-writer 生成了文章:{文件名}
现在为你美化格式,使用 tech 主题...
| 错误信息 | 原因 | Claude 应该做什么 |
|---|---|---|
FileNotFoundError: Input file not found | 文件路径错误 | 询问用户正确的文件路径 |
Unknown theme: xxx | 主题名错误 | 提示可用主题:tech/minimal/business |
Theme CSS file not found | 主题文件缺失 | 使用默认 tech 主题重试 |
| 转换成功但代码无高亮 | Markdown 未指定语言 | 提醒用户修改代码块(```python) |
| 图片无法显示 | 本地路径或外链失效 | 提醒用户在微信编辑器重新上传 |
| 表格格式混乱 | 表格过宽 | 建议简化表格或转为图片 |
1. 标准转换(最常用):
python scripts/markdown_to_html.py --input article.md --theme tech --preview
2. 批量转换(多篇文章):
python scripts/batch_convert.py --input articles/ --theme minimal --workers 8
3. 实时预览(边写边看):
python scripts/preview_generator.py --input article.md --theme business
Q: 粘贴到微信后样式丢失? A: 使用"粘贴"而非"粘贴并匹配样式",或清空编辑器后重新粘贴。
Q: 代码块没有高亮? A: 确保 Markdown 中指定了语言:```python(不是 ```)
Q: 如何自定义主题颜色?
A: 复制 templates/tech-theme.css → 修改颜色变量 → 使用 --theme my-theme
本文档(SKILL.md):Claude 执行指南(精简版)
其他文档(用户手册):
如何使用文档:
记住:这个 skill 的核心是自动化 + 专业化,让用户 2 分钟完成原本 30 分钟的工作!