/ 目录 / 演练场 / baoyu-skills
● 社区 JimLiu ⚡ 即开即用

baoyu-skills

作者 JimLiu · JimLiu/baoyu-skills

将想法变成可分享的视觉内容——小红书卡片、信息图、SVG 图表、幻灯片——全部通过自然语言指令生成。

baoyu-skills 为 Claude Code 捆绑了 20+ 项视觉内容技能。在中文互联网格式(小红书卡片、微信适配)上表现突出,但 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 张小红书卡片

👤 小红书内容创作者 ⏱ ~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 分钟即可生成可发布的卡片系列。

注意事项
  • 中文长句导致卡片文字溢出 — 要求技能将每张卡片文字压缩至 ≤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 种风格 = 选择困难 — 让技能根据数据形态推荐;只有在有强烈偏好时才手动覆盖
搭配使用: 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 分钟内完成有来源的文章草稿。

注意事项
  • 自动字幕识别技术术语有误 — 让技能标记低置信度词汇;对照视频进行抽查
搭配使用: 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 小红书 / RED 的卡片系列 Image gen API for any rendered images
make_infographic data, layout, style, palette? 单图数据可视化 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 干净地引用一篇网络文章 0

成本与限制

运行它的成本

API 配额
图片生成技能取决于所选提供商的配额
每次调用 Token 数
SVG/模板技能:低。图片生成:因模型而异
费用
技能免费;使用图片生成时需付费
提示
优先使用 SVG 模板技能(卡片、信息图、图表)——不调用付费模型

安全

权限、密钥、影响范围

最小权限: filesystem-write (for output)
凭据存储: 图片生成 API key 通过环境变量传入;技能从环境读取,不提交到代码库
数据出站: 仅在使用图片生成子技能时;SVG/模板技能为本地执行

故障排查

常见错误与修复

中文字符显示为方块

安装支持 CJK 的字体;技能内置回退列表,但本地系统可能缺少匹配字体

验证: 检查可用字体;安装 Noto Sans CJK
图片生成子技能失败

检查提供商的环境变量;提供商可能宕机或额度耗尽

卡片文字溢出

为每张卡片提供更短的文字(标题 ≤24 字),或传入 auto_shrink=true

SVG 在 GitHub README 中无法渲染

转换为 PNG 用于 GitHub(它会过滤部分 SVG 标签);SVG 在大多数博客中可正常显示

替代方案

baoyu-skills 对比其他方案

替代方案何时用它替代权衡
skyll-skill你想要专注的图片卡片工作室,而非 20 项技能的集合覆盖面更小,但更专注
AntV mcp-server-chart你只需要数据图表,而非视觉卡片/插画使用方式不同——以图表为核心

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills