# baoyu-skills
[English](./README.md) | 中文
宝玉分享的 AI Agent 技能集（适用于 Claude Code、Codex 等），提升日常工作效率。
## 作者的图书
作者的图书《图解 Skill —— AI 提效实战指南》系统讲解如何设计、编写、安装和迭代 Skill，并配有完整示例、提示词、插图生成工作流和章节配套资源。
- 官方配套仓库：[JimLiu/Illustrated-Agent-Skills](https://github.com/JimLiu/Illustrated-Agent-Skills)
- 购买链接：[京东购买](https://u.jd.com/RDY9YwC)
- 电子书购买链接：https://www.ituring.com.cn/book/3616
## 前置要求
- 已安装 Node.js 环境
- 能够运行 `npx bun` 命令
## 安装
> **提示**：本仓库已收录 20+ 个 skill，请按需安装你真正会用到的那几个，不要一次性全装 —— 每个加载的 skill 都会在 Agent 每次运行时占用额外上下文。
### 快速安装（推荐）
```bash
npx skills add jimliu/baoyu-skills
```
### Codex 项目级安装
如果只在某个项目中使用部分技能，不需要安装整个插件。Codex 会扫描项目里的 `.agents/skills`，可以只把需要的 skill 按整个目录复制或软链接到当前项目：
```text
/.agents/skills/baoyu-cover-image/SKILL.md
/.agents/skills/baoyu-article-illustrator/SKILL.md
/.agents/skills/baoyu-post-to-wechat/SKILL.md
```
公众号文章发布的最小组合通常是：
- `baoyu-cover-image`
- `baoyu-article-illustrator`
- `baoyu-post-to-wechat`
不需要单独安装 `baoyu-markdown-to-html`，`baoyu-post-to-wechat` 已内置 Markdown 到公众号可用 HTML 的转换流程。只有需要先把原始文本或草稿整理成 Markdown 文章结构（标题、摘要、层级标题、加粗、列表等）时，再额外安装 `baoyu-format-markdown`。
公众号 API 凭证按作用范围放置：
- 全局：`~/.baoyu-skills/.env`
- 项目：`/.baoyu-skills/.env`
项目级 `.env` 适合只给当前项目使用，注意不要提交到 Git。
### 发布到 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-image-gen
clawhub install baoyu-markdown-to-html
```
根据 ClawHub 的 registry 规则，发布到 ClawHub 的 skill 会以 `MIT-0` 许可分发。
### 注册插件市场
在 Agent 中运行：
```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**
直接告诉 Agent：
> 请帮我安装 github.com/JimLiu/baoyu-skills 中的 Skills
### 可用插件
现在 marketplace 只暴露一个插件，这样每个 skill 只会注册一次。
| 插件 | 说明 | 包含内容 |
|------|------|----------|
| **baoyu-skills** | 提供内容生成、AI 后端和日常效率工具技能 | 仓库中的全部 skills，仍按下方的内容技能、AI 生成技能、工具技能三个分类展示 |
## 更新技能
更新技能到最新版本：
1. 在 Agent 中运行 `/plugin`
2. 切换到 **Marketplaces** 标签页（使用方向键或 Tab）
3. 选择 **baoyu-skills**
4. 选择 **Update marketplace**
也可以选择 **Enable auto-update** 启用自动更新，每次启动时自动获取最新版本。
## 可用技能
技能分为三大类：
### 设计技能推荐：baoyu-design
如果你想让本地 Agent 直接做设计，可以试试 [JimLiu/baoyu-design](https://github.com/JimLiu/baoyu-design)。这是一个独立项目，它把 Claude Design 打包成可移植的 Agent Skill，可在 Cursor、Claude Code、Codex、Claude Desktop 或其他能读写文件的编码 Agent 中运行，用来生成精致 UI 稿、可交互原型、线框图、落地页、仪表盘、移动 App 和幻灯片，产物都是自包含 HTML，留在你自己的仓库里。
```bash
npx skills add JimLiu/baoyu-design
```
### 内容技能 (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 | fresh | warm |
|  |  |  |
| bold | minimal | retro |
|  |  |  |
| pop | notion | chalkboard |
**布局**（信息密度）：
| 布局 | 密度 | 适用场景 |
|------|------|----------|
| `sparse` | 1-2 点 | 封面、金句 |
| `balanced` | 3-4 点 | 常规内容 |
| `dense` | 5-8 点 | 知识卡片、干货总结 |
| `list` | 4-7 项 | 清单、排行 |
| `comparison` | 双栏 | 对比、优劣 |
| `flow` | 3-6 步 | 流程、时间线 |
**布局预览**：
| | | |
|:---:|:---:|:---:|
|  |  |  |
| sparse | balanced | dense |
|  |  |  |
| 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 | circular-flow | comparison-table |
|  |  |  |
| do-dont | equation | feature-list |
|  |  |  |
| fishbone | funnel | grid-cards |
|  |  |  |
| iceberg | journey-path | layers-stack |
|  |  |  |
| mind-map | nested-circles | priority-quadrants |
|  |  |  |
| pyramid | scale-balance | timeline-horizontal |
|  |  | |
| 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 | claymation | kawaii |
|  |  |  |
| storybook-watercolor | chalkboard | cyberpunk-neon |
|  |  |  |
| bold-graphic | aged-academia | corporate-memphis |
|  |  |  |
| technical-schematic | origami | pixel-art |
|  |  |  |
| ui-wireframe | subway-map | ikea-manual |
|  |  | |
| knolling | lego-brick | |
#### baoyu-diagram
从源素材生成可直接发布的 SVG 图表 —— 包括流程图、时序/协议图、架构/结构图、示意图（直觉图解）。分析输入素材，推荐图表类型和拆分策略，一次确认后批量生成。Claude 直接输出符合统一设计规范的真实 SVG 代码，产物是自包含的 `.svg` 文件，内嵌样式并自动支持深色模式。
```bash
# 主题描述 —— 技能分析并提出方案
/baoyu-diagram "JWT 认证流程是怎么工作的"
/baoyu-diagram "Kubernetes 架构" --type structural
/baoyu-diagram "OAuth 2.0 流程" --type sequence
# 文件路径 —— 技能读取、分析并提出方案
/baoyu-diagram path/to/article.md
# 语言和输出路径
/baoyu-diagram "微服务架构" --lang zh
/baoyu-diagram "build pipeline" --out docs/build-pipeline.svg
```
**参数**：
| 参数 | 说明 |
|------|------|
| `--type ` | `flowchart`、`sequence`、`structural`、`illustrative`、`class`、`auto`（默认）。跳过类型推荐直接生成。 |
| `--lang ` | 输出语言（en、zh、ja 等） |
| `--out ` | 输出文件路径。生成聚焦于最重要内容的单张图表。 |
**五种图表类型**：
| 类型 | 适用场景 | 触发动词 |
|------|----------|----------|
| `flowchart` | 按顺序走一遍流程 | 流程、步骤、工作流、生命周期、状态机 |
| `sequence` | 谁和谁通信、按什么顺序 | 协议、握手、认证流程、OAuth、TCP、请求/响应 |
| `structural` | 展示什么包含什么、如何组织 | 架构、组件、拓扑、布局、什么在什么里面 |
| `illustrative` | 建立直觉 —— 画出机制本身 | 怎么工作、原理、为什么、直观解释 |
| `class` | 类型是什么、它们如何关联 | 类图、UML、继承、接口、数据模型 |
本技能不调用任何图像生成模型 —— Claude 通过手算坐标直接写 SVG 代码，确保每个图表都遵守设计规范。内嵌的 `