mcpField
W
wechat-article

wechat-article

github.com/freeany文档处理0116 次安装40 周前更新
代码仓库

关于 wechat-article

wechat-article 是用于将 Markdown 文章转换为微信公众号 HTML 的技能，面向需要公众号排版的内容创作者。它提供多种主题、内联样式和浏览器预览。

主要功能

  1. 01Markdown 转微信公众号 HTML
  2. 02三种文章主题
  3. 03支持主题颜色选择
  4. 04代码语法高亮
  5. 05浏览器预览与复制 HTML

适用场景

  1. 01将教程排版为公众号文章
  2. 02为文章选择主题样式
  3. 03预览并复制生成的 HTML

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/freeany/wechat-article --skill wechat-article

安装后在 Claude Code 中输入/wechat-article确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

.DS_Store
assets/examples/
sample.md
references/
themes.md
scripts/
requirements.txt
md_to_wechat.py

详细介绍

微信公众号文章转换器

概述

将 Markdown 文章转换为兼容微信公众号的 HTML 格式，并应用主题样式和内联 CSS。此技能使用 md_to_wechat.py 脚本自动完成整个转换流程。

核心功能： 将标准 Markdown 转换为带有专业样式的兼容微信 HTML。

工作流

第 1 步：识别用户请求

当用户提出以下请求时，触发此技能：

  • 将 Markdown 转换为微信格式
  • “转换为微信公众号格式”
  • “生成微信文章”
  • “公众号排版”
  • 为文章应用微信样式
第 2 步：收集所需信息

必需信息：

  • 输入 Markdown 文件路径（来自用户请求或当前目录）

始终向用户询问主题选择： 使用 AskUserQuestion 工具向用户交互式展示主题选项。

展示以下 3 个主题选项：

选项主题名称适用场景
default专业蓝色技术文章、教程、通用内容
orange活力橙运动、美食、娱乐、促销活动
grid格子主题带序号徽章、动画效果，支持清新绿/大气蓝配色

例外： 如果用户在请求中明确指定了主题，则跳过主题选择。

重要： 如果用户选择“grid”主题，请询问颜色偏好：

  • 清新绿（green）- #52c41a，适合生活方式、健康、环保
  • 大气蓝（blue）- #007AFF，适合科技、商务、专业内容

其他选项（按需询问）：

  • 微信文章标题（用于页眉，默认：无）
  • 是否包含微信页眉/页脚（默认：是）
第 3 步：执行转换

重要： 始终使用技能脚本的绝对路径：

python3 ~/.claude/skills/wechat-article/scripts/md_to_wechat.py <input.md> [output.html] [options]

始终使用 --preview 标志，以打开带有复制按钮的浏览器页面：

  1. 在浏览器中预览并进行基础转换（推荐）：

    python3 ~/.claude/skills/wechat-article/scripts/md_to_wechat.py input.md --theme <selected-theme> --preview

  2. 添加标题并在浏览器中预览：

    python3 ~/.claude/skills/wechat-article/scripts/md_to_wechat.py input.md --theme <theme> --title "<article-title>" --preview

  3. 仅转换内容（不包含微信元素）并进行预览：

    python3 ~/.claude/skills/wechat-article/scripts/md_to_wechat.py input.md --theme <theme> --no-header-footer --preview

注意： --preview 标志会自动打开一个浏览器页面，其中包含：

  • 文章预览
  • 用于复制 HTML 的“复制 HTML 代码”按钮
  • 将内容粘贴到微信编辑器中的说明
  • 样式化文章的可视化预览
第 4 步：向用户展示结果

始终执行以下操作：

  1. 确认转换已成功完成
  2. 显示使用的主题
  3. 显示输出文件位置
  4. 展示生成的 HTML 预览（前约 30 行）
  5. 提醒用户可以将 HTML 复制并粘贴到微信编辑器中

交互示例

示例 1：先选择主题，再在浏览器中预览的标准工作流

User: "把 article.md 转成微信公众号格式"

Claude: [Uses AskUserQuestion]
"请选择文章主题风格：
• default - 专业蓝色（技术文章、教程、通用内容）
• orange - 活力橙（运动、美食、娱乐、促销活动）
• grid - 格子主题（带序号徽章、动画效果，支持清新绿/大气蓝配色）"

User: [Selects] "grid"

Claude: [Uses AskUserQuestion]
"请选择格子主题配色：
• green - 清新绿 (#52c41a) - 生活方式、健康、环保
• blue - 大气蓝 (#007AFF) - 科技、商务、专业内容"

User: [Selects] "blue"

Claude: [Executes] python3 ~/.claude/skills/wechat-article/scripts/md_to_wechat.py article.md --theme grid --grid-color blue --preview
Claude: ✅ 使用格子主题（大气蓝）转换成功！浏览器已打开预览页面，点击"复制 HTML 代码"按钮即可复制到微信公众号编辑器。

示例 2：用户直接指定主题

User: "转换成微信公众号文章，用默认主题"

Claude: [Skips theme selection, user already specified]
Claude: [Executes] python3 ~/.claude/skills/wechat-article/scripts/md_to_wechat.py article.md --theme default --preview
Claude: ✅ 使用专业蓝色主题转换成功！浏览器已打开预览页面。

实现说明

可用主题

此技能目前包含 3 种主题：

  1. default（专业蓝色） - 专业蓝色主题

    • 主色：#1e6bb8
    • 适用场景：技术文章、教程、通用内容

  2. orange（活力橙） - 活力橙色主题

    • 主色：#e67e22
    • 适用场景：运动、美食、娱乐、促销活动

  3. grid（格子主题） - 带有序号徽章和动画的格子主题

    • 默认颜色：#52c41a（清新绿）
    • 备选颜色：#007AFF（大气蓝）
    • 功能：带序号的标题徽章、旋转动画、自动嵌套列表
    • 适用场景：所有内容类型，可根据主题选择颜色
      • 绿色：生活方式、健康、环保主题
      • 蓝色：科技、商务、专业内容
依赖项

脚本需要以下依赖项：

  • markdown>=3.5.0 - Markdown 解析
  • beautifulsoup4>=4.12.0 - HTML 处理
  • pygments>=2.16.0 - 代码语法高亮

运行前检查是否已安装依赖项。如果尚未安装，请执行：

pip3 install markdown beautifulsoup4 pygments
故障排除

问题： 未找到依赖项
解决方案： 使用 pip3 install markdown beautifulsoup4 pygments 安装

问题： 未找到脚本
解决方案： 使用绝对路径：~/.claude/skills/wechat-article/scripts/md_to_wechat.py

问题： 微信样式未显示
解决方案： 确保用户复制了完整的 HTML 内容，包括内联样式

资源

scripts/md_to_wechat.py

主要转换脚本。根据用户请求使用相应参数执行。

references/themes.md

详细的主题规范。帮助用户了解主题差异时，请参阅此文件。

assets/examples/sample.md

展示所有受支持功能的示例文章。可用于测试或向用户展示功能。

评论

支持 Markdown