/ ディレクトリ / プレイグラウンド / baoyu-skills
● コミュニティ JimLiu ⚡ 即起動

baoyu-skills

作者 JimLiu · JimLiu/baoyu-skills

アイデアをビジュアルに変換する。小紅書カード・インフォグラフィック・SVG ダイアグラム・スライドデッキを自然言語のプロンプトから生成。

baoyu-skills は Claude Code 向けに 20 以上のビジュアルコンテンツスキルをまとめたもの。中国語インターネットのフォーマット(小紅書カード・WeChat 対応)に強いが、SVG・インフォグラフィック・スライドのスキルは言語非依存。マルチプロバイダーの画像生成ルーティング(OpenAI・Google・DashScope・MiniMax)と YouTube 字幕抽出・URL の Markdown 変換などのコンテンツユーティリティも含む。

なぜ使うのか

主な機能

ライブデモ

実際の動作

準備完了

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "baoyu-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/JimLiu/baoyu-skills",
        "~/.claude/skills/baoyu-skills"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "baoyu-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/JimLiu/baoyu-skills",
        "~/.claude/skills/baoyu-skills"
      ],
      "_inferred": true
    }
  }
}

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "baoyu-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/JimLiu/baoyu-skills",
        "~/.claude/skills/baoyu-skills"
      ],
      "_inferred": true
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "baoyu-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/JimLiu/baoyu-skills",
        "~/.claude/skills/baoyu-skills"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "baoyu-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/JimLiu/baoyu-skills",
        "~/.claude/skills/baoyu-skills"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json
{
  "context_servers": {
    "baoyu-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/JimLiu/baoyu-skills",
          "~/.claude/skills/baoyu-skills"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add baoyu-skill -- git clone https://github.com/JimLiu/baoyu-skills ~/.claude/skills/baoyu-skills

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方: baoyu-skills

記事から小紅書の 9 枚カード投稿を生成する

👤 小紅書(RED)のコンテンツクリエイター ⏱ ~15 min beginner

使うタイミング: 長文記事を書き終え、プラットフォーム向けの正方形カードビジュアルが必要なとき。

前提条件
  • スキルのインストール — git clone https://github.com/JimLiu/baoyu-skills ~/.claude/skills/baoyu-skills
フロー
  1. レイアウトとスタイルを選ぶ
    Use baoyu-skills. From article.md, generate a 9-card Xiaohongshu series in 'minimal' style with serif title font.✓ コピーしました
    → 正方形比率の SVG/PNG カードが 9 枚生成される
  2. 表紙を改善する
    Cover (card 1) is too plain — try 'magazine' style with a number badge.✓ コピーしました
    → 新しい表紙バリエーションが表示される。一つ選ぶ
  3. 書き出す
    Export all 9 cards as PNG at 1080×1080, save to /posts/<slug>/.✓ コピーしました
    → アップロード可能な PNG が生成される

結果: 1 投稿あたり 10 分以内で投稿準備済みのカードシリーズが完成する。

注意点
  • 長い中国語文でカードのテキストがはみ出す — 1 カードのテキストを 24 文字以下に要約するよう指示するか、フォント自動縮小を有効にする
組み合わせ: humanizer-skill

小規模なデータセットからインフォグラフィックを作成する

👤 数字を提示したいマーケター・アナリスト ⏱ ~20 min beginner

使うタイミング: 5〜10 件の統計を含む CSV があり、シェア可能な 1 枚のインフォグラフィックが欲しいとき。

フロー
  1. レイアウトを選ぶ
    Use baoyu-skills. From data.csv (5 rows), pick the most appropriate of the 21 infographic layouts.✓ コピーしました
    → 理由付きのレイアウト推奨が表示される
  2. 生成する
    Generate it in 'editorial' style. Use my brand colors #0F172A and #38BDF8.✓ コピーしました
    → SVG 出力がチャット内でプレビューされる
  3. 仕上げる
    Add a 1-line takeaway under each stat. Reduce icon weight by 30%.✓ コピーしました
    → 改善された SVG が生成される

結果: Figma 不要でブログやソーシャル向けのインフォグラフィックが完成する。

注意点
  • 21 レイアウト × 17 スタイルで選択肢が多すぎて迷う — データの形状に基づいてスキルに推奨させる。強い意見がある場合のみ上書きする
組み合わせ: filesystem

説明文から SVG アーキテクチャ図を生成する

👤 ドキュメントを書くエンジニア ⏱ ~12 min beginner

使うタイミング: README 用のシステム図が必要で、描画ツールを開きたくないとき。

フロー
  1. システムを説明する
    Use baoyu-skills. Generate a structural diagram for: web client → API gateway → 3 services (auth, billing, content) → Postgres + Redis. Show external dependencies.✓ コピーしました
    → 名前付きノードを持つ SVG が生成される
  2. 注釈を追加する
    Add HTTP/gRPC labels on edges; mark Postgres as 'primary' and 'replica'.✓ コピーしました
    → 注釈が適用される

結果: リポジトリに追加できる図。任意の Markdown ビューアでレンダリングされる。

注意点
  • ノードが多くなって図が読めなくなる — 2 つの図に分割する(高レベル + サービス詳細)。詰め込みすぎない
組み合わせ: filesystem

YouTube のトークをブログ記事の下書きに変換する

👤 動画コンテンツを再利用したいブロガー ⏱ ~25 min beginner

使うタイミング: 素晴らしいカンファレンストークを見て、投稿できる形にまとめたいとき。

フロー
  1. 字幕を取得する
    Use baoyu-skills YouTube transcript skill on <url>. Translate if non-English.✓ コピーしました
    → チャットに整理された字幕が表示される
  2. 再構成する
    Convert to a 1200-word post: hook, 4 sections matching the talk's arc, takeaways. Cite timestamps.✓ コピーしました
    → タイムスタンプ引用付きの記事下書きが完成する

結果: 15 分で出典付きの記事下書きが完成する。

注意点
  • 自動字幕が技術用語を聞き間違える — 信頼度の低い語句をスキルにフラグを立てさせる。動画と照合してスポットチェックする
組み合わせ: humanizer-skill

組み合わせ

他のMCPと組み合わせて10倍の力を

baoyu-skill + humanizer-skill

カード・投稿を生成してから AI っぽさを除去する

Generate the post draft via baoyu-skills, then run humanizer on it before publishing.✓ コピーしました
baoyu-skill + filesystem

出力をコンテンツリポジトリに保存する

Save all generated cards under /content/<slug>/ with a stable naming convention.✓ コピーしました

ツール

このMCPが提供する機能

ツール入力呼び出すタイミングコスト
make_xhs_cards source_text, layout, style, count 小紅書向けのカードシリーズを生成する Image gen API for any rendered images
make_infographic data, layout, style, palette? 1 枚のデータビジュアライゼーション 0 (SVG is template-rendered)
make_svg_diagram type (flow|seq|struct|illust), description ドキュメント用のダイアグラムを生成する 0
make_slides outline, theme ライトニングトーク用のスライドデッキ 0
yt_transcript url, translate_to? 動画コンテンツを再利用する 0
url_to_md url Web 記事をきれいに引用する 0

コストと制限

運用コスト

APIクォータ
画像生成スキルは選択したプロバイダーのクォータに依存する
呼び出しあたりのトークン
SVG・テンプレートスキルは低い。画像生成はモデルによって変わる
金額
スキル自体は無料。画像生成を使う場合は費用が発生する
ヒント
SVG テンプレートスキル(カード・インフォグラフィック・ダイアグラム)を使うこと。有料モデルを呼び出さない

セキュリティ

権限、シークレット、影響範囲

最小スコープ: filesystem-write (for output)
認証情報の保管: 画像生成の API キーは環境変数で管理。スキルは環境変数から読み取り、コードには含まない
データ送信先: 画像生成サブスキル使用時のみ外部通信が発生。SVG・テンプレートスキルはローカル処理

トラブルシューティング

よくあるエラーと対処法

中国語の文字が四角形で表示される

CJK 対応フォントをインストールする。スキルにはフォールバックリストがあるが OS にフォントがない場合がある

確認: Check fonts available; install Noto Sans CJK
画像生成サブスキルが失敗する

プロバイダーの環境変数を確認する。プロバイダーがダウンしているかクレジット切れの可能性がある

カードのテキストがはみ出す

カードごとのテキストを短くする(見出しは 24 文字以下)か、auto_shrink=true を指定する

SVG が GitHub の README でレンダリングされない

GitHub 向けは PNG に変換する(一部の SVG タグが除去される)。他のブログでは SVG が問題なく動作する

代替案

baoyu-skills 他との比較

代替案代わりに使う場面トレードオフ
skyll-skill20 スキルのバンドルではなく、集中した画像カードスタジオが欲しいとき機能面が絞られている。よりフォーカスされている
AntV mcp-server-chartビジュアルカード・イラストではなくデータチャートだけが必要なとき用途が異なる。チャート中心

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る