mcpField
P
pw-post-to-wechat

pw-post-to-wechat

github.com/plugins-worldマーケティング・グロース2246 回インストール40 週間前に更新
リポジトリ

pw-post-to-wechat について

pw-post-to-wechatは、WeChat公式アカウント向けに画像付き投稿や記事を作成・投稿するスキルです。Markdown変換、画像処理、テーマ選択に対応し、下書き保存前のプレビューも行えます。

主な機能

  1. 01画像付き投稿や記事の投稿
  2. 02Markdownからタイトルと本文を抽出
  3. 03記事画像のアップロードと処理
  4. 04記事レイアウトテーマの選択
  5. 05プレビューまたは下書き保存

活用シーン

  1. 01Markdownと画像からWeChat投稿を作成
  2. 02Markdown記事全体をWeChat向けに整形
  3. 03手動公開用の下書きをプレビューして保存

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/plugins-world/pw-skills --skill pw-post-to-wechat

インストール後、Claude Code で/pw-post-to-wechatを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
article-posting.md
image-text-posting.md
scripts/
cdp.ts
copy-to-clipboard.ts
md-to-wechat.ts
paste-from-clipboard.ts
wechat-agent-browser.ts
wechat-article.ts
wechat-browser.ts
scripts/md/
LICENSE
render.ts
scripts/md/extensions/
alert.ts
footnotes.ts
index.ts
infographic.ts
katex.ts
markup.ts
plantuml.ts
ruby.ts
slider.ts
toc.ts
scripts/md/themes/
base.css
default.css
grace.css
simple.css
scripts/md/utils/
languages.ts

詳細

WeChat公式アカウント投稿ツール

WeChat公式アカウントへのコンテンツ投稿を自動化します。画像付き投稿と記事の2つのモードに対応しています。

使用方法

画像付き投稿(複数の画像と説明文)
# 从 markdown 文件和图片目录生成
npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --markdown article.md --images ./images/

# 使用明确的参数
npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --title "标题" --content "内容" --image img1.png --image img2.png --submit

# 仅预览不保存
npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --markdown article.md --images ./images/
記事投稿(完全な Markdown)
# 发布 markdown 文章 (默认主题)
npx -y bun ${SKILL_DIR}/scripts/wechat-article.ts --markdown article.md

# 指定主题
npx -y bun ${SKILL_DIR}/scripts/wechat-article.ts --markdown article.md --theme grace
npx -y bun ${SKILL_DIR}/scripts/wechat-article.ts --markdown article.md --theme simple

# 覆盖标题和作者
npx -y bun ${SKILL_DIR}/scripts/wechat-article.ts --markdown article.md --title "自定义标题" --author "作者名"

説明: ${SKILL_DIR} は本スキルのインストールディレクトリを表します。Agent が実行時に実際のパスに置き換えます。

パラメーターの説明

画像付き投稿のパラメーター
--markdown

Markdown ファイルのパスを指定し、タイトルと内容を自動的に抽出します。

パラメーターの種類: ファイルパス(任意)

機能の説明:

  • frontmatter を解析してタイトルと作者を取得します
  • frontmatter がない場合は、最初の H1 見出しを使用します
  • 最初の段落を内容として抽出します(最大 1000 字)
  • タイトルが 20 字を超える場合は自動的に短縮します

使用例:

npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --markdown ./article.md --images ./pics/

Markdown 形式:

---
title: 文章标题
author: 作者名
---

# 这是标题 (如果没有 frontmatter)

这是首段内容, 会被提取为图文内容...

ベストプラクティス:

  • frontmatter を使ってタイトルと作者を明示します
  • 最初の段落は簡潔で力強く、読者を引きつける内容にします
  • 短縮を避けるため、タイトルは 20 字以内にします
--images

画像ディレクトリを指定し、ディレクトリ内のすべての画像をアップロードします。

パラメーターの種類: ディレクトリパス(任意)

機能の説明:

  • ディレクトリ内のすべての PNG/JPG ファイルをアップロードします
  • ファイル名のアルファベット順に並べ替えます
  • 最大 9 枚の画像に対応します(WeChat の制限)

使用例:

npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --markdown article.md --images ./images/

ベストプラクティス:

  • 01-cover.png、02-content.png のように数字の接頭辞を付けます
  • モバイル端末での表示に適した鮮明な画像を使用します
  • 画像は 9 枚以内にします
--title

記事のタイトルを直接指定します。

パラメーターの種類: 文字列(任意)

制限: 最大 20 字。超過した場合は自動的に短縮します

使用例:

npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --title "如何提升效率" --content "内容..." --image cover.png

短縮ルール:

  • 元のタイトル: 「1日で人生を根本から再構築する方法」
  • 短縮後: 「1日で人生を再構築」

ベストプラクティス:

  • タイトルは簡潔で力強くし、中心的な価値を強調します
  • 冗長な言葉(方法、やり方など)は避けます
  • 数字や動詞を使って魅力を高めます
--content

記事の内容を直接指定します。

パラメーターの種類: 文字列(任意)

制限: 最大 1000 字。超過した場合は自動的に短縮します

使用例:

npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --title "标题" --content "这是内容..." --image img.png

ベストプラクティス:

  • 内容は簡潔で分かりやすくし、読者をクリックして続きを読むよう促します
  • 記事の中心的な価値や見どころを強調します
  • 短縮を避けるため、1000 字以内にします
--image

画像ファイルを1つ指定します。繰り返し使用して複数の画像を追加できます。

パラメーターの種類: ファイルパス(任意、繰り返し使用可)

制限: 最大 9 枚の画像

使用例:

npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --title "标题" --content "内容" --image img1.png --image img2.png --image img3.png

ベストプラクティス:

  • 1枚目の画像はカバーとして使用するため、最も魅力的なものを選びます
  • 画像の順序は表示結果に影響します
  • 画像形式が PNG または JPG であることを確認します
--submit

下書きとして保存します。デフォルトではプレビューのみで、保存しません。

パラメーターの種類: ブール値フラグ(任意)

デフォルトの動作: 保存せず、プレビューのみ

使用する場面:

  • 内容に問題がないことを確認してから、このパラメーターを追加して保存します
  • 一括投稿時に使用します

使用例:

# 仅预览
npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --markdown article.md --images ./pics/

# 保存为草稿
npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --markdown article.md --images ./pics/ --submit

注意事項:

  • 保存後は、WeChat公式アカウントの管理画面で手動で投稿する必要があります
  • 保存する前に、まずプレビューで問題がないことを確認してください
--profile

Chrome プロファイルディレクトリを指定し、ログイン状態を維持します。

パラメーターの種類: ディレクトリパス(任意)

デフォルトの動作: 一時プロファイルを使用します

使用する場面:

  • 毎回 QR コードをスキャンしてログインする手間を省きます
  • 複数アカウントを管理します

使用例:

npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --markdown article.md --images ./pics/ --profile ~/.chrome-wechat

ベストプラクティス:

  • WeChat公式アカウントごとに異なるプロファイルディレクトリを作成します
  • プロファイルが容量を圧迫しないよう、定期的に整理します
記事投稿のパラメーター
--markdown

変換して投稿する Markdown ファイルを指定します。

パラメーターの種類: ファイルパス(必須)

機能の説明:

  • Markdown 形式全体を解析します
  • 見出し、リスト、引用、コードブロックなどのスタイルを保持します
  • 画像プレースホルダーの処理と置換を自動で行います

使用例:

npx -y bun ${SKILL_DIR}/scripts/wechat-article.ts --markdown article.md

対応する Markdown 構文:

  • 見出し: #、##、###
  • 太字: **text**
  • 斜体: *text*
  • リスト: -、1.
  • 引用: >
  • コードブロック: ```
  • リンク: [text](url)
  • 画像: ![alt](path)

ベストプラクティス:

  • 標準的な Markdown 構文を使用します
  • 画像には相対パスを使用します
  • 複雑すぎる入れ子構造は避けます
--theme

記事のテーマスタイルを指定します。

パラメーターの種類: 文字列(任意)

選択可能な値:

  • default - デフォルトのテーマ。シンプルで洗練されたスタイル
  • grace - 優雅なテーマ。正式な内容に適しています
  • simple - ミニマルなテーマ。コンテンツそのものを引き立てます

デフォルト値: default

使用例:

npx -y bun ${SKILL_DIR}/scripts/wechat-article.ts --markdown article.md --theme grace

テーマの特徴:

テーマ適した用途特徴
default一般的なコンテンツ美しさと読みやすさのバランスが取れています
grace正式な記事、専門的なコンテンツ優雅なレイアウトで、階層を強調します
simple技術文書、チュートリアルミニマルなスタイルで、内容を引き立てます

ベストプラクティス:

  • 技術記事には simple がおすすめです
  • ブランドコンテンツには grace がおすすめです
  • 日常的なコンテンツには default を使用します
--title

Markdown から抽出したタイトルを上書きします。

パラメーターの種類: 文字列(任意)

デフォルトの動作: Markdown の frontmatter または H1 から抽出します

使用例:

npx -y bun ${SKILL_DIR}/scripts/wechat-article.ts --markdown article.md --title "自定义标题"

使用する場面:

  • Markdown ファイルにタイトルがない場合
  • ファイル内のタイトルとは異なるタイトルを使用する場合
  • プラットフォームごとに異なるタイトルを使用する場合
--author

記事の作者名を指定します。

パラメーターの種類: 文字列(任意)

デフォルト値: 宝玉

使用例:

npx -y bun ${SKILL_DIR}/scripts/wechat-article.ts --markdown article.md --author "张三"

ベストプラクティス:

  • 信頼性を高めるため、実際の作者名を使用します
  • チームアカウントでは、チーム名を使用できます
--summary

記事の概要を指定します。

パラメーターの種類: 文字列(任意)

使用例:

npx -y bun ${SKILL_DIR}/scripts/wechat-article.ts --markdown article.md --summary "这是一篇关于..."

ベストプラクティス:

  • 概要は簡潔で分かりやすくし、記事の要点をまとめます
  • 100 字以内にします
  • 記事の価値や見どころを強調します
--html

Markdown の代わりに、事前にレンダリングされた HTML ファイルを使用します。

パラメーターの種類: ファイルパス(任意)

使用する場面:

  • レンダリング済みの HTML コンテンツがある場合
  • カスタムスタイルを使用する場合
  • 複雑なレイアウトが必要な場合

使用例:

npx -y bun ${SKILL_DIR}/scripts/wechat-article.ts --html article.html

注意事項:

  • HTML は WeChat公式アカウントのエディター要件を満たす必要があります
  • 画像には引き続きプレースホルダーを使用して処理する必要があります
--profile

Chrome プロファイルディレクトリを指定します。

パラメーターの種類: ディレクトリパス(任意)

機能: 画像付き投稿の --profile パラメーターと同じです

機能の比較

機能画像付き投稿記事投稿
複数画像への対応対応(最大 9 枚)対応(インライン画像)
Markdown への対応タイトルと内容を抽出完全にフォーマット
タイトルの自動短縮対応(20 字に短縮)非対応
内容の短縮対応(1000 字に短縮)非対応
テーマへの対応非対応対応(default、grace、simple)
適した用途複数画像を使った簡単な投稿長文記事、技術文書

ワークフロー

画像付き投稿の手順
  1. 内容を解析:

    • Markdown ファイルからタイトルと内容を抽出します
    • または --title と --content を使って直接指定します
  2. 画像を処理:

    • --images ディレクトリからすべての画像を読み込みます
    • または複数の --image パラメーターを使って画像を指定します
    • ファイル名順に並べ替えます
  3. 投稿を自動化:

    • Chrome ブラウザーを開きます
    • WeChat公式アカウントの画像付き投稿エディターに移動します
    • すべての画像をアップロードします
    • タイトルと内容を入力します
    • --submit パラメーターに応じて、保存するかどうかを決定します
  4. 結果を出力:

    • 投稿状況を報告します
    • 画像の枚数を表示します
    • 次の操作を案内します
文章发表流程
  1. 解析 Markdown:

    • 读取 Markdown 文件
    • 提取标题、作者等元数据
    • 识别所有图片引用
  2. 生成 HTML:

    • 将 Markdown 转换为 HTML
    • 应用选定的主题样式
    • 图片替换为占位符 [[IMAGE_PLACEHOLDER_N]]
  3. 自动化发布:

    • 打开 Chrome 浏览器
    • 导航到微信公众号文章编辑器
    • 粘贴 HTML 内容到编辑器
  4. 替换图片:

    • 对每个占位符:
      • 查找并选中占位符文本
      • 滚动到可见区域
      • 按 Backspace 删除占位符
      • 从剪贴板粘贴图片
  5. 输出结果:

    • 报告发布状态
    • 显示图片数量
    • 提示后续操作

前置要求

  • 已安装 Google Chrome
  • bun 运行时 (通过 npx -y bun 自动安装)
  • 首次运行需要在打开的浏览器窗口中登录微信公众号

常见问题

登录相关

问题: 每次运行都需要扫码登录

解决方案: 使用 --profile 参数指定配置文件目录

npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --markdown article.md --images ./pics/ --profile ~/.chrome-wechat

问题: 登录后立即退出

解决方案:

  • 检查网络连接
  • 确保微信公众号账号状态正常
  • 尝试清除配置文件重新登录
图片相关

问题: 图片上传失败

解决方案:

  • 检查图片格式 (仅支持 PNG/JPG)
  • 检查图片大小 (建议小于 5MB)
  • 确保图片路径正确

问题: 图片顺序错误

解决方案:

  • 使用数字前缀命名: 01-, 02-, 03-
  • 或使用多个 --image 参数按顺序指定
内容相关

问题: 标题被压缩

解决方案:

  • 标题控制在 20 字以内
  • 或手动编辑压缩后的标题

问题: 内容被压缩

解决方案:

  • 内容控制在 1000 字以内
  • 或使用文章发表模式发布完整内容
浏览器相关

问题: 找不到 Chrome

解决方案: 设置环境变量

export WECHAT_BROWSER_CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"

问题: 粘贴失败

解决方案:

  • 检查系统剪贴板权限
  • 确保 Chrome 有权限访问剪贴板
  • macOS 需要在系统设置中授予权限

脚本参考

所有脚本位于本技能的 scripts/ 子目录中。

Agent 执行说明:

  1. 确定此 SKILL.md 文件的目录路径为 SKILL_DIR
  2. 脚本路径 = ${SKILL_DIR}/scripts/<script-name>.ts
  3. 将文档中所有 ${SKILL_DIR} 替换为实际路径

可用脚本:

脚本用途说明
wechat-browser.ts图文发表多图配文模式
wechat-article.ts文章发表完整 Markdown 格式
md-to-wechat.tsMarkdown 转换转换为微信 HTML
copy-to-clipboard.ts剪贴板操作复制内容到剪贴板
paste-from-clipboard.ts粘贴操作发送真实粘贴按键

使用示例

示例 1: 快速发布图文
# 场景: 有一篇 markdown 文章和一个图片目录
npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --markdown ./article.md --images ./xhs-images/

# 执行流程:
# 1. 解析 markdown 元数据:
#    - 标题: "如何在一天内彻底重塑你的人生" → "一天内重塑你的人生"
#    - 作者: 从 frontmatter 或使用默认值
# 2. 从首段提取内容
# 3. 在 xhs-images/ 中找到 7 张图片
# 4. 打开 Chrome, 导航到微信"图文"编辑器
# 5. 上传所有图片
# 6. 填充标题和内容
# 7. 报告: "图文已发布, 包含 7 张图片。"
示例 2: 发布完整文章
# 场景: 发布一篇技术文章, 使用 simple 主题
npx -y bun ${SKILL_DIR}/scripts/wechat-article.ts --markdown ./tech-article.md --theme simple

# 执行流程:
# 1. 解析 markdown, 找到 5 张图片
# 2. 生成带占位符的 HTML
# 3. 打开 Chrome, 导航到微信编辑器
# 4. 粘贴 HTML 内容
# 5. 对每张图片:
#    - 选中 [[IMAGE_PLACEHOLDER_1]]
#    - 滚动到可见区域
#    - 按 Backspace 删除
#    - 粘贴图片
# 6. 报告: "文章已编排, 包含 5 张图片。"
示例 3: 批量发布
# 场景: 批量发布多篇文章
for file in articles/*.md; do
  npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts \
    --markdown "$file" \
    --images "images/$(basename $file .md)/" \
    --submit \
    --profile ~/.chrome-wechat
done
示例 4: 自定义参数发布
# 场景: 完全自定义标题、内容和图片
npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts \
  --title "2024 年度总结" \
  --content "回顾这一年的成长与收获..." \
  --image cover.png \
  --image chart1.png \
  --image chart2.png \
  --submit

扩展支持

通过 EXTEND.md 自定义配置。

检查路径 (优先级顺序):

  1. .pw-skills/pw-post-to-wechat/EXTEND.md (项目级)
  2. ~/.pw-skills/pw-post-to-wechat/EXTEND.md (用户级)

如果找到, 在工作流之前加载。扩展内容会覆盖默认值。

参考文档

  • 图文发表: 查看 references/image-text-posting.md 了解详细的图文发表指南
  • 文章发表: 查看 references/article-posting.md 了解详细的文章发表指南

注意事项

  • 图文发表标题最多 20 字, 内容最多 1000 字
  • 图片最多 9 张 (微信限制)
  • 首次运行需要扫码登录
  • 使用 --profile 参数可以保持登录状态
  • 建议先预览确认无误再使用 --submit 保存
  • 文章发表支持完整 Markdown 格式
  • 图片处理需要系统剪贴板权限
  • macOS 需要在系统设置中授予 Chrome 剪贴板权限

コメント