wechat-article-formatter

WeChat公式アカウント記事フォーマットツール（Claude 実行ガイド）

目標: Markdown 記事を WeChat公式アカウントに適した美しい HTML に変換し、ワンクリックで公開できるようにします。

主な価値: 効率を 15 倍向上（30 分 → 2 分）させ、書式を統一してプロフェッショナルな仕上がりにします。

大幅アップグレード: AI テクノロジーテーマを採用し、AI 分野のコンテンツ向けに設計されています。豊富なビジュアルコンポーネントとカスタム構文に対応しています。

---

テーマについて

このツールでは、AI テクノロジーテーマ（ai-tech-theme）を使用します。AI 分野のコンテンツ向けに設計されています。

• 紫・青・緑へと段階的に広がる配色（元の紫色を残し、シアンや緑などの補助色を追加）
• 豊富なビジュアルコンポーネント（情報カード、バッジ、表、コードブロックなど）
• AI 分野専用コンポーネント（モデル比較、プロンプト例、API 呼び出し、パフォーマンス指標）
• Atom One Dark のコードハイライト
• レスポンシブデザインで、モバイルに対応

---

追加コンポーネントの使い方

情報カード

::: 構文を使用して、種類別の情報ボックスを作成します。

::: info
这是一条信息提示
:::

::: success
操作成功！模型训练完成。
:::

::: warning
注意：此操作会消耗大量 tokens
:::

::: danger
错误：API key 无效
:::

::: tech
技术提示：使用 --temperature 参数控制输出随机性
:::

バッジラベル

[!TEXT] 構文を使用して、バッジを追加します。

GPT-4 [!NEW] 支持多模态输入 [!AI]

Claude Opus [!推荐] 具有最强推理能力

対応しているバッジの種類：

• [!NEW] - 紫・青のグラデーションバッジ（新機能）
• [!AI] - シアンのバッジ（AI 関連）
• [!推荐] - 紫のバッジ（おすすめコンテンツ）
• [!成功] - 緑のバッジ（成功状態）
• [!警告] - 黄色のバッジ（警告）

---

⚡ 実行手順（厳守してください）

ステップ1：入力ファイルの取得

状況の判断：

状況	対応方法
ユーザーがファイルパスを指定した	そのパスをそのまま使用します
ユーザーが 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

---

ステップ2：変換の実行

標準変換コマンド：

cd /root/.claude/skills/wechat-article-formatter

python3 scripts/markdown_to_html.py \
  --input "{文件路径}" \
  --output "{输出路径}" \
  --preview

パラメーターの説明：

• --input：Markdown ファイルのパス（必須）
• --output：HTML の出力パス（任意。既定値は同名の .html）
• --theme：テーマの選択（現在は ai-tech のみのため、省略可能）
• --preview：変換後、自動的にブラウザーでプレビューを開きます（推奨）

例：

# 最常用：转换并预览
python3 scripts/markdown_to_html.py \
  --input "Claude_Sonnet_4介绍.md" \
  --preview

重要な注意事項：

• WeChat公式アカウントには専用のタイトル入力欄があり、HTML から H1 タイトルは自動的に削除されます
• 変換後の HTML にはコメントが含まれます：``

---

ステップ3：品質チェック

変換後、必ず以下を確認してください：

Read ツールを使用して生成された HTML ファイルの先頭 50 行を読み込み、次の項目を確認します。

チェック項目	確認方法	よくある問題
見出しのスタイル	<h2>、<h3> タグの style 属性を確認します	スタイルが失われている → 再変換します
コードハイライト	<pre><code> に構文ハイライトのスタイルがあるか確認します	ハイライトがない → Markdown で言語が指定されているか確認します
情報カード	class="alert alert-info" などが含まれているか確認します	変換されていない → ::: 構文の書式を確認します
バッジ	class="badge badge-new" などが含まれているか確認します	変換されていない → [!] 構文の書式を確認します
画像のパス	<img src=""> のパスを確認します	ローカルパス → WeChat にアップロードする必要があることをユーザーに伝えます
表の書式	<table> にインラインスタイルがあるか確認します	書式が乱れている → 表の列数を減らします

簡易チェックコマンド：

# 查看 HTML 文件前 50 行
head -50 output.html

# 检查是否包含信息卡片
grep -o 'class="alert alert-[^"]*"' output.html

# 检查是否包含徽章
grep -o 'class="badge [^"]*"' output.html

---

ステップ4：プレビューとフィードバック

ユーザーに確認します：

✅ 转换成功！已生成：{输出文件路径}

预览效果：
- 已在浏览器打开预览
- 或访问：file://{绝对路径}

请检查效果，满意吗？
- 满意 → 进入步骤5（发布指导）
- 需要调整 → 可以修改 Markdown 后重新转换

ユーザーが満足していない場合：

問題	解決策
「情報ボックスが表示されない」	正しい ::: 構文を使用しているか確認します
「バッジが表示されない」	正しい [!] 構文を使用しているか確認します
「コードブロックがハイライトされない」	Markdown のコードブロックで言語が指定されているか確認します（```python）
「画像が正しく表示されない」	ローカル画像は WeChat エディターにアップロードする必要があることを伝えます
「表の幅が広すぎる」	表を簡略化（4 列以下）するか、横スクロールを許容することを提案します

---

ステップ5：公開ガイド

ユーザーに以下のガイドをすべて提示します：

📋 发布到微信公众号步骤：

1. 打开微信公众号编辑器
2. ✅ 在标题栏填写文章标题：{从 Markdown 提取的标题}
3. 打开生成的 HTML 文件：{文件路径}
4. 在浏览器中按 Ctrl+A（全选）→ Ctrl+C（复制）
5. 粘贴到编辑器正文区（Ctrl+V）
6. 处理图片：
   - 删除无法显示的本地图片引用
   - 重新上传图片到微信编辑器
7. 最后检查：标题层级、段落间距、代码块、信息卡片、徽章
8. 使用微信编辑器的"预览"功能在手机查看
9. 确认无误后发布

⚠️ 注意事项：
- 样式已内联，可直接粘贴
- 本地图片需重新上传
- 粘贴后微信编辑器可能微调部分样式（正常）
- 信息卡片和徽章的颜色背景会保留

---

🔄 wechat-tech-writer との連携

状況：wechat-tech-writer で記事を作成した直後

識別の目印：

• ユーザーが直前に「XXX に関する記事を書いて」と言った
• 現在のディレクトリに新しく生成された .md ファイルがある

自動化の手順：

# 1. 查找最新文章
latest_article=$(ls -t *.md 2>/dev/null | head -1)

# 2. 确认是否是目标文章
echo "检测到最新文章：$latest_article"
echo "是否要转换这篇文章？(y/n)"

# 3. 自动转换（AI 科技主题）
python3 scripts/markdown_to_html.py \
  --input "$latest_article" \
  --preview

スムーズに案内するためのメッセージ：

检测到你刚用 wechat-tech-writer 生成了文章：{文件名}
现在为你美化格式，使用 AI 科技主题...

---

❌ エラー対応表

エラーメッセージ	原因	Claude が行うこと
FileNotFoundError: Input file not found	ファイルパスが間違っています	正しいファイルパスをユーザーに尋ねます
Unknown theme: xxx	テーマ名が間違っています	現在は ai-tech テーマのみであることを伝えます
Theme CSS file not found	テーマファイルがありません	ファイルが存在するか確認し、再インストールします
変換に成功したがコードがハイライトされない	Markdown で言語が指定されていません	コードブロックを修正するようユーザーに伝えます（```python）
情報ボックスが変換されない	::: 構文の書式が間違っています	開始と終了のマーカーが正しいか確認します
バッジが変換されない	[!] 構文の書式が間違っています	対応しているバッジの種類を使用しているか確認します
画像が表示されない	ローカルパス、または外部リンクが無効です	WeChat エディターで再アップロードするようユーザーに伝えます
表の書式が乱れている	表の幅が広すぎます	表を簡略化するか、画像に変換することを提案します

---

📚 クイックリファレンス

最もよく使うコマンド

標準変換（最もよく使います）：

python3 scripts/markdown_to_html.py --input article.md --preview

出力パスの指定：

python3 scripts/markdown_to_html.py --input article.md --output output.html --preview

よくある質問への簡単な回答

Q: WeChat に貼り付けるとスタイルが失われるのはなぜですか？
A: 「貼り付け」を使用し、「書式を合わせて貼り付け」は使用しないでください。または、エディターの内容を消去してから貼り付け直してください。

Q: コードブロックがハイライトされないのはなぜですか？
A: Markdown で言語を指定してください。```python のように記述します（``` だけではありません）。

Q: 情報カードが表示されないのはなぜですか？
A: ::: 構文の書式を確認し、開始と終了のマーカーがあり、種類（info/success/warning/danger/tech）が正しいことを確認してください。

Q: バッジが表示されないのはなぜですか？
A: [!] 構文の書式を確認し、対応しているバッジの種類（NEW/AI/推荐/成功/警告）を使用していることを確認してください。

Q: 色をカスタマイズするにはどうすればよいですか？
A: templates/ai-tech-theme.css の CSS 変数（:root の部分）を変更します。

---

✅ 実行チェックリスト（実行のたびに完了を確認してください）

• 入力ファイルを取得しました（パスまたは内容）
• 変換コマンドを実行しました
• 生成された HTML ファイルを確認しました（見出し、コード、情報カード、バッジ、画像）
• プレビュー結果に満足しているかユーザーに確認しました
• 公開に必要なガイドをすべて提示しました
• 発生する可能性のあるエラーに対応しました

---

覚えておいてください：このスキルの要点は自動化 + プロフェッショナルな仕上がりです。ユーザーが本来 30 分かかる作業を 2 分で完了できるようにします。