/ 目錄 / 演練場 / baoyu-skills
● 社群 JimLiu ⚡ 即開即用

baoyu-skills

作者 JimLiu · JimLiu/baoyu-skills

將想法轉化為可分享的視覺內容——小紅書卡片、資訊圖表、SVG 圖表、簡報——全憑自然語言描述。

baoyu-skills 為 Claude Code 打包了 20 個以上的視覺內容 skill。在中文網路格式(小紅書卡片、微信適用)上尤為強大,但 SVG/資訊圖表/簡報 skill 與語言無關。包含多供應商圖像生成路由(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 張小紅書圖文卡片

👤 在小紅書平台的內容創作者 ⏱ ~15 min beginner

何時使用: 你寫了一篇長文,需要為平台製作正方形卡片視覺內容。

前置條件
  • Skill 已安裝 — 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.✓ 已複製
    → 9 張 SVG/PNG 卡片已生成,正方形比例
  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 已準備好上傳

結果: 每篇貼文 10 分鐘內完成可直接發布的系列卡片。

注意事項
  • 較長的中文句子導致卡片文字溢出 — 要求 skill 將每張卡片的文字控制在 24 字以內,或傳入 auto_shrink=true
搭配使用: humanizer-skill

從小型資料集建立資訊圖表

👤 行銷人員、分析師、任何需要呈現數字的人 ⏱ ~20 min beginner

何時使用: 你有一個含 5–10 項統計數據的 CSV,需要一張可分享的資訊圖表。

步驟
  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 種風格 = 選擇困難 — 讓 skill 依資料形狀推薦;只在你有強烈主觀意見時才覆蓋
搭配使用: 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 閱覽器中渲染。

注意事項
  • 節點過多導致圖表難以閱讀 — 拆分為兩張圖(高層次架構 + 各服務細節);絕不塞太多
搭配使用: 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 分鐘內完成有出處的文章草稿。

注意事項
  • 自動字幕對技術術語的辨識有誤 — 讓 skill 標記低信心的詞彙;與影片對照抽查
搭配使用: humanizer-skill

組合

與其他 MCP 搭配,撬動十倍槓桿

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 小紅書的系列卡片 若使用渲染圖像需要圖像生成 API 費用
make_infographic data, layout, style, palette? 單張資料視覺化圖表 0(SVG 為範本渲染)
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 乾淨地引用網路文章 0

成本與限制

運行它的成本

API 配額
圖像生成 skill 取決於所選供應商的配額
每次呼叫 Token 數
SVG/範本 skill:低。圖像生成:視模型而定
費用
skill 免費;若使用圖像生成則需付費
提示
使用 SVG 範本 skill(卡片、資訊圖表、圖表)——它們不呼叫付費模型

安全

權限、密鑰、影響範圍

最小權限: filesystem-write(用於輸出)
憑證儲存: 圖像生成 API 金鑰透過環境變數;skill 從環境讀取,不存入程式碼
資料出站: 僅在使用圖像生成子 skill 時對外傳輸;SVG/範本 skill 為本機處理

故障排查

常見錯誤與修復

中文字符顯示為方塊

安裝支援 CJK 的字型;skill 內附備用字型清單,但本機系統可能缺少匹配的字型

驗證: 確認可用字型;安裝 Noto Sans CJK
圖像生成子 skill 失敗

確認供應商環境變數;供應商可能暫時無法使用或點數不足

卡片文字溢出

每張卡片的標題提供較短的文字(≤24 字),或傳入 auto_shrink=true

SVG 在 GitHub README 中無法渲染

轉換為 PNG 用於 GitHub(它會過濾部分 SVG 標籤);SVG 在大多數部落格中可正常顯示

替代方案

baoyu-skills 對比其他方案

替代方案何時用它替代權衡
skyll-skill你需要的是專注的圖像卡片工作室,而非 20 個 skill 的套件功能面較小,更專注
AntV mcp-server-chart你只需要資料圖表,不需要視覺卡片或插圖不同的形式——以圖表為中心

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills