# baoyu-skills [English](./README.md) | 中文 宝玉分享的 Claude Code 技能集,提升日常工作效率。 ## 前置要求 - 已安装 Node.js 环境 - 能够运行 `npx bun` 命令 ## 安装 ### 快速安装(推荐) ```bash npx skills add jimliu/baoyu-skills ``` ### 发布到 ClawHub / OpenClaw 现在这个仓库支持把每个 `skills/baoyu-*` 目录作为独立 ClawHub skill 发布。 ```bash # 预览将要发布的变更 ./scripts/sync-clawhub.sh --dry-run # 发布 ./skills 下所有已变更的 skill ./scripts/sync-clawhub.sh --all ``` ClawHub 按“单个 skill”安装,不是把整个 marketplace 一次性装进去。发布后,用户可以按需安装: ```bash clawhub install baoyu-imagine clawhub install baoyu-markdown-to-html ``` 根据 ClawHub 的 registry 规则,发布到 ClawHub 的 skill 会以 `MIT-0` 许可分发。 ### 注册插件市场 在 Claude Code 中运行: ```bash /plugin marketplace add JimLiu/baoyu-skills ``` ### 安装技能 **方式一:通过浏览界面** 1. 选择 **Browse and install plugins** 2. 选择 **baoyu-skills** 3. 选择 **baoyu-skills** 插件 4. 选择 **Install now** **方式二:直接安装** ```bash # 安装 marketplace 中唯一的插件 /plugin install baoyu-skills@baoyu-skills ``` **方式三:告诉 Agent** 直接告诉 Claude Code: > 请帮我安装 github.com/JimLiu/baoyu-skills 中的 Skills ### 可用插件 现在 marketplace 只暴露一个插件,这样每个 skill 只会注册一次。 | 插件 | 说明 | 包含内容 | |------|------|----------| | **baoyu-skills** | 提供内容生成、AI 后端和日常效率工具技能 | 仓库中的全部 skills,仍按下方的内容技能、AI 生成技能、工具技能三个分类展示 | ## 更新技能 更新技能到最新版本: 1. 在 Claude Code 中运行 `/plugin` 2. 切换到 **Marketplaces** 标签页(使用方向键或 Tab) 3. 选择 **baoyu-skills** 4. 选择 **Update marketplace** 也可以选择 **Enable auto-update** 启用自动更新,每次启动时自动获取最新版本。 ![更新技能](./screenshots/update-plugins.png) ## 可用技能 技能分为三大类: ### 内容技能 (Content Skills) 内容生成和发布技能。 #### baoyu-xhs-images 小红书图片卡片系列生成器。将内容拆解为 1-10 张卡通风格图片卡片,支持 **风格 × 布局** 系统和可选配色覆盖。 ```bash # 自动选择风格和布局 /baoyu-xhs-images posts/ai-future/article.md # 指定风格 /baoyu-xhs-images posts/ai-future/article.md --style notion # 指定布局 /baoyu-xhs-images posts/ai-future/article.md --layout dense # 组合风格和布局 /baoyu-xhs-images posts/ai-future/article.md --style notion --layout list # 覆盖配色 /baoyu-xhs-images posts/ai-future/article.md --style notion --palette macaron # 直接输入内容 /baoyu-xhs-images 今日星座运势 # 非交互模式(跳过所有确认,适用于定时任务) /baoyu-xhs-images posts/ai-future/article.md --yes /baoyu-xhs-images posts/ai-future/article.md --yes --preset knowledge-card ``` **风格**(视觉美学):`cute`(默认)、`fresh`、`warm`、`bold`、`minimal`、`retro`、`pop`、`notion`、`chalkboard`、`study-notes`、`screen-print`、`sketch-notes` **配色**(可选颜色覆盖):`macaron`、`warm`、`neon` **风格预览**: | | | | |:---:|:---:|:---:| | ![cute](./screenshots/xhs-images-styles/cute.webp) | ![fresh](./screenshots/xhs-images-styles/fresh.webp) | ![warm](./screenshots/xhs-images-styles/warm.webp) | | cute | fresh | warm | | ![bold](./screenshots/xhs-images-styles/bold.webp) | ![minimal](./screenshots/xhs-images-styles/minimal.webp) | ![retro](./screenshots/xhs-images-styles/retro.webp) | | bold | minimal | retro | | ![pop](./screenshots/xhs-images-styles/pop.webp) | ![notion](./screenshots/xhs-images-styles/notion.webp) | ![chalkboard](./screenshots/xhs-images-styles/chalkboard.webp) | | pop | notion | chalkboard | **布局**(信息密度): | 布局 | 密度 | 适用场景 | |------|------|----------| | `sparse` | 1-2 点 | 封面、金句 | | `balanced` | 3-4 点 | 常规内容 | | `dense` | 5-8 点 | 知识卡片、干货总结 | | `list` | 4-7 项 | 清单、排行 | | `comparison` | 双栏 | 对比、优劣 | | `flow` | 3-6 步 | 流程、时间线 | **布局预览**: | | | | |:---:|:---:|:---:| | ![sparse](./screenshots/xhs-images-layouts/sparse.webp) | ![balanced](./screenshots/xhs-images-layouts/balanced.webp) | ![dense](./screenshots/xhs-images-layouts/dense.webp) | | sparse | balanced | dense | | ![list](./screenshots/xhs-images-layouts/list.webp) | ![comparison](./screenshots/xhs-images-layouts/comparison.webp) | ![flow](./screenshots/xhs-images-layouts/flow.webp) | | list | comparison | flow | #### baoyu-infographic 专业信息图生成器,支持 21 种布局和 21 种视觉风格。分析内容后推荐布局×风格组合,生成可发布的信息图。 ```bash # 根据内容自动推荐组合 /baoyu-infographic path/to/content.md # 指定布局 /baoyu-infographic path/to/content.md --layout pyramid # 指定风格(默认:craft-handmade) /baoyu-infographic path/to/content.md --style technical-schematic # 同时指定布局和风格 /baoyu-infographic path/to/content.md --layout funnel --style corporate-memphis # 指定比例(预设名称或自定义 W:H) /baoyu-infographic path/to/content.md --aspect portrait /baoyu-infographic path/to/content.md --aspect 3:4 ``` **选项**: | 选项 | 说明 | |------|------| | `--layout ` | 信息布局(20 种选项) | | `--style ` | 视觉风格(17 种选项,默认:craft-handmade) | | `--aspect ` | 预设:landscape (16:9)、portrait (9:16)、square (1:1)。自定义:任意 W:H 比例(如 3:4、4:3、2.35:1) | | `--lang ` | 输出语言(en、zh、ja 等) | **布局**(信息结构): | 布局 | 适用场景 | |------|----------| | `bridge` | 问题→解决方案、跨越鸿沟 | | `circular-flow` | 循环、周期性流程 | | `comparison-table` | 多因素对比 | | `do-dont` | 正确 vs 错误做法 | | `equation` | 公式分解、输入→输出 | | `feature-list` | 产品功能、要点列表 | | `fishbone` | 根因分析、鱼骨图 | | `funnel` | 转化漏斗、筛选过程 | | `grid-cards` | 多主题概览、卡片网格 | | `iceberg` | 表面 vs 隐藏层面 | | `journey-path` | 用户旅程、里程碑 | | `layers-stack` | 技术栈、分层结构 | | `mind-map` | 头脑风暴、思维导图 | | `nested-circles` | 影响层级、范围圈 | | `priority-quadrants` | 四象限矩阵、优先级 | | `pyramid` | 层级金字塔、马斯洛需求 | | `scale-balance` | 利弊权衡、天平对比 | | `timeline-horizontal` | 历史、时间线事件 | | `tree-hierarchy` | 组织架构、分类树 | | `venn` | 重叠概念、韦恩图 | **布局预览**: | | | | |:---:|:---:|:---:| | ![bridge](./screenshots/infographic-layouts/bridge.webp) | ![circular-flow](./screenshots/infographic-layouts/circular-flow.webp) | ![comparison-table](./screenshots/infographic-layouts/comparison-table.webp) | | bridge | circular-flow | comparison-table | | ![do-dont](./screenshots/infographic-layouts/do-dont.webp) | ![equation](./screenshots/infographic-layouts/equation.webp) | ![feature-list](./screenshots/infographic-layouts/feature-list.webp) | | do-dont | equation | feature-list | | ![fishbone](./screenshots/infographic-layouts/fishbone.webp) | ![funnel](./screenshots/infographic-layouts/funnel.webp) | ![grid-cards](./screenshots/infographic-layouts/grid-cards.webp) | | fishbone | funnel | grid-cards | | ![iceberg](./screenshots/infographic-layouts/iceberg.webp) | ![journey-path](./screenshots/infographic-layouts/journey-path.webp) | ![layers-stack](./screenshots/infographic-layouts/layers-stack.webp) | | iceberg | journey-path | layers-stack | | ![mind-map](./screenshots/infographic-layouts/mind-map.webp) | ![nested-circles](./screenshots/infographic-layouts/nested-circles.webp) | ![priority-quadrants](./screenshots/infographic-layouts/priority-quadrants.webp) | | mind-map | nested-circles | priority-quadrants | | ![pyramid](./screenshots/infographic-layouts/pyramid.webp) | ![scale-balance](./screenshots/infographic-layouts/scale-balance.webp) | ![timeline-horizontal](./screenshots/infographic-layouts/timeline-horizontal.webp) | | pyramid | scale-balance | timeline-horizontal | | ![tree-hierarchy](./screenshots/infographic-layouts/tree-hierarchy.webp) | ![venn](./screenshots/infographic-layouts/venn.webp) | | | tree-hierarchy | venn | | **风格**(视觉美学): | 风格 | 描述 | |------|------| | `craft-handmade`(默认) | 手绘插画、纸艺风格 | | `claymation` | 3D 黏土人物、定格动画感 | | `kawaii` | 日系可爱、大眼睛、粉彩色 | | `storybook-watercolor` | 柔和水彩、童话绘本 | | `chalkboard` | 彩色粉笔、黑板风格 | | `cyberpunk-neon` | 霓虹灯光、暗色未来感 | | `bold-graphic` | 漫画风格、网点、高对比 | | `aged-academia` | 复古科学、泛黄素描 | | `corporate-memphis` | 扁平矢量人物、鲜艳填充 | | `technical-schematic` | 蓝图、等距 3D、工程图 | | `origami` | 折纸形态、几何感 | | `pixel-art` | 复古 8-bit、怀旧游戏 | | `ui-wireframe` | 灰度框图、界面原型 | | `subway-map` | 地铁图、彩色线路 | | `ikea-manual` | 极简线条、组装说明风 | | `knolling` | 整齐平铺、俯视图 | | `lego-brick` | 乐高积木、童趣拼搭 | **风格预览**: | | | | |:---:|:---:|:---:| | ![craft-handmade](./screenshots/infographic-styles/craft-handmade.webp) | ![claymation](./screenshots/infographic-styles/claymation.webp) | ![kawaii](./screenshots/infographic-styles/kawaii.webp) | | craft-handmade | claymation | kawaii | | ![storybook-watercolor](./screenshots/infographic-styles/storybook-watercolor.webp) | ![chalkboard](./screenshots/infographic-styles/chalkboard.webp) | ![cyberpunk-neon](./screenshots/infographic-styles/cyberpunk-neon.webp) | | storybook-watercolor | chalkboard | cyberpunk-neon | | ![bold-graphic](./screenshots/infographic-styles/bold-graphic.webp) | ![aged-academia](./screenshots/infographic-styles/aged-academia.webp) | ![corporate-memphis](./screenshots/infographic-styles/corporate-memphis.webp) | | bold-graphic | aged-academia | corporate-memphis | | ![technical-schematic](./screenshots/infographic-styles/technical-schematic.webp) | ![origami](./screenshots/infographic-styles/origami.webp) | ![pixel-art](./screenshots/infographic-styles/pixel-art.webp) | | technical-schematic | origami | pixel-art | | ![ui-wireframe](./screenshots/infographic-styles/ui-wireframe.webp) | ![subway-map](./screenshots/infographic-styles/subway-map.webp) | ![ikea-manual](./screenshots/infographic-styles/ikea-manual.webp) | | ui-wireframe | subway-map | ikea-manual | | ![knolling](./screenshots/infographic-styles/knolling.webp) | ![lego-brick](./screenshots/infographic-styles/lego-brick.webp) | | | knolling | lego-brick | | #### baoyu-diagram 生成可直接发布的 SVG 图表 —— 包括流程图、架构/结构图、示意图(直觉图解)。Claude 直接输出符合统一设计规范的真实 SVG 代码,产物是单个自包含的 `.svg` 文件,内嵌样式并自动支持深色模式,可直接嵌入文章、微信公众号、幻灯片、Notion 和各类文档中。 ```bash # 自动根据提示词中的动词路由类型 /baoyu-diagram "JWT 认证流程是怎么工作的" # 强制指定类型 /baoyu-diagram "Kubernetes 架构" --type structural /baoyu-diagram "注意力机制原理" --type illustrative /baoyu-diagram "CI/CD 流水线" --type flowchart # 从 Markdown 源文件生成 /baoyu-diagram path/to/content.md # 语言和输出路径 /baoyu-diagram "微服务架构" --lang zh /baoyu-diagram "build pipeline" --out docs/build-pipeline.svg ``` **参数**: | 参数 | 说明 | |------|------| | `--type ` | `flowchart`(流程图)、`structural`(结构/架构图)、`illustrative`(示意图)、`auto`(默认,按动词路由) | | `--lang ` | 输出语言(en、zh、ja 等) | | `--out ` | 输出文件路径(默认:`diagram/{slug}/diagram.svg`) | **三种图表类型**: | 类型 | 适用场景 | 触发动词 | |------|----------|----------| | `flowchart` | 按顺序走一遍流程 | 流程、步骤、工作流、生命周期、状态机 | | `structural` | 展示什么包含什么、如何组织 | 架构、组件、拓扑、布局、什么在什么里面 | | `illustrative` | 建立直觉 —— 画出机制本身 | 怎么工作、原理、为什么、直观解释 | 本技能不调用任何图像生成模型 —— Claude 通过手算坐标直接写 SVG 代码,确保每个图表都遵守设计规范。内嵌的 `