智能图片压缩：体积小到肉眼看不出来

🎯 学什么：这是所有 150+ 个 Skill 中结构最简单、最纯粹的工具型 Skill。89 行代码，一个脚本，零依赖以外的复杂度。 💡 难易度：⭐ | ⏱️ 预计时间：50 分钟

1. 课程概览

💡 白话小课堂： 你手机拍的照片，一张可能要 5MB。这个 Skill 能把它压到 500KB——体积小了 10 倍，但你用肉眼看几乎没区别。 💡 白话小课堂： YAML（YAML：一种人类易读的数据格式，用缩进表示层级，Skill 头部信息用它书写） 头就像Skill的"身份证"——写了它叫什么名字(name)、什么时候用(description/描述字段：Skill 的"自我介绍"，写在 YAML 头部，AI 据此判断是否加载——写得不好 AI 永不加载正文)、需要什么工具(requires)。AI 看这个头部判断"这个Skill能不能帮我处理当前任务"。 翻译：使用外部图片压缩API（API/应用程序接口：让不同软件之间互相通信的"插座"，调用它就能使用外部服务功能）（tinify、wsrv.nl）将图片压缩为 WebP（WebP：Google 开发的现代图片格式，比 JPEG 和 PNG 体积更小但画质相当）/JPEG（JPEG：有损压缩图片格式，适合照片，文件小但会有压缩痕迹）/PNG（PNG：无损图片格式，支持透明背景，适合图标和截图） 格式。当用户说"压缩"、"优化"、"缩小"图片、照片或截图时使用。

设计决策分析：

2.2 正文结构（四大板块）

Image Compressor ← 板块 1：一句话说明

Script Directory ← 板块 2：脚本路径 + 运行时

| scripts/main.ts | Image compression CLI |

Preferences (EXTEND.md) ← 板块 3：用户偏好（可选）

Usage ← 板块 4：用法 + 参数 + 示例

这种结构叫「脚本说明书」模式：

[一句话功能] → [脚本在哪] → [怎么配置] → [怎么用]

2.3 参数表的标准写法

🔑 核心秘诀： 参数表里最重要的一列是 Default（默认值）。AI 知道了默认值，就不会每个参数都问你要不要填——只在你明确要改的时候才问。 💡 白话小课堂： 你在公司项目里团队规定图片必须转 WebP，但个人项目里你更喜欢 PNG。这个系统让两个设置自动共存——在哪个目录干活，就自动用那个目录的规则。 想象一条贪吃蛇，从项目目录出发，沿着「项目 → 系统 → 用户」的方向爬。碰到第一个 EXTEND.md 就一口吞掉，后面再有也不吃了。

为什么设计三级？

• 团队项目强制统一 WebP → 写在项目里的 .baoyu-skills/ 下，任何人 checkout 代码自动生效
• 你的个人偏好是 PNG → 写在 ~/.baoyu-skills/ 下，只影响你自己的项目
• 两者不冲突：在公司项目里自动用 WebP（项目级覆盖了用户级），在自己项目里自动用 PNG（项目级没有，用户级兜底）

📝 补充：.baoyu-skills/ 这个目录名是宝玉(baoyu)生态的约定——就像 .github/ 是 GitHub 的约定、.vscode/ 是 VS Code 的约定一样。不同的 Skill 生态可能用不同的目录名（如 .agents/skills/），但三级查找的机制是通用的。

🔧 原始代码长什么样（点击展开）

原始 SKILL.md 中的写法（含 Shell 变量路径）：

其中 ${XDG_CONFIG_HOME:-$HOME/.config} 是 Shell 语法：如果系统设置了 XDG_CONFIG_HOME 就用它，否则默认用 ~/.config。

XDG 全称 X Desktop Group，是 Linux 桌面的配置标准组织——简单理解为「Linux 系统的标准配置目录规范」即可。Windows/Mac 用户无需关心。

3. 结构拆解：工具型 Skill 的标准模板

从这个 Skill 中提取通用模板：

💡 白话小课堂：下面这个模板就像"填空题"——你只要把 [ ] 里的内容换成你自己的，就能生成一个新Skill。比如把"压缩图片"改成"加水印"，把相关参数换成水印的参数，一个全新Skill就诞生了。

模板中的两个特殊占位符（不要被它们吓到）：

• ${BUN_X} → 系统的「运行时选择器」，会自动挑 bun 或 npx 来执行脚本
• {baseDir} → 指「当前 SKILL.md 文件所在的目录」，保证 Skill 装到哪里都能跑

name: [your-skill-name] description: [做什么 + 触发词]，Use when user asks to "[触发词1]", "[触发词2]", "[触发词3]". metadata: requires: anyBins: - [依赖1] - [依赖2]

[功能名称，一句话]

[功能的一句话描述]。

Script Directory

Scripts in scripts/ subdirectory. {baseDir} = SKILL.md 所在目录的路径。

Usage

${BUN_X} {baseDir}/scripts/main.ts <input> [options]
#        ↑  ↑

#        │  └─ SKILL.md 所在目录（会自动替换为实际路径）

#        └─ 运行时选择器（bun 或 npx，系统自动决定）

Options

Examples

# 常用场景 1

${BUN_X} {baseDir}/scripts/main.ts input --option

# 常用场景 2

${BUN_X} {baseDir}/scripts/main.ts input --option value
# 动手时把 ${BUN_X} {baseDir} 当成「执行这个脚本」来理解即可

Output:

input → output (size_before → size_after, reduction%)

这个模板覆盖的场景

4. 手写模仿

不看源码，凭理解写一个「视频压缩」Skill 的 SKILL.md。

要求：

• name: video-compressor
• 参数：输入文件、输出格式(mp4/webm)、质量(0-100)、保持原文件、分辨率缩放
• 脚本路径：scripts/compress.ts
• 运行时：bun

点击查看参考写法

name: video-compressor description: Compresses videos to MP4 (default) or WebM with configurable resolution and quality. Use when user asks to "compress video", "optimize video", "reduce video size", "视频压缩". metadata: requires: anyBins: - bun

Video Compressor

Compresses videos using FFmpeg with configurable quality and resolution settings.

Script Directory

Scripts in scripts/ subdirectory. {baseDir} = SKILL.md 所在目录的路径。

Usage

${BUN_X} {baseDir}/scripts/compress.ts <input> [options]
# ${BUN_X} = 运行时选择器  |  {baseDir} = Skill 所在目录

Options

Examples

# ${BUN_X} {baseDir}/scripts/ = 「执行 compress.ts 这个脚本」，后面跟参数即可

# Single file → MP4 (keeps original)

${BUN_X} {baseDir}/scripts/compress.ts video.mov --keep

# WebM with lower quality

${BUN_X} {baseDir}/scripts/compress.ts video.mov -f webm -q 60

# Resize to 720p

${BUN_X} {baseDir}/scripts/compress.ts video.mov -r 1280x720

Output:

video.mov → video.mp4 (156MB → 34MB, 78% reduction)

5. 深度思考

5.1 为什么 description 里写了 "automatic tool selection"？

这不只是描述功能，这是在告诉 AI 这个 Skill 的价值。

如果 description 只写 "compress images"：

• AI 会想「哦，又一个压缩工具」
• 跟其他压缩 Skill 无法区分

写上 "automatic tool selection"：

• AI 知道这个 Skill 会智能选择最优工具
• 在多个压缩 Skill 中，这个 Skill 有独特优势

教训：description 里不只写功能，还要写独特卖点。

5.2 为什么脚本放在 scripts/ 而不是直接写在 SKILL.md 里？

两个原因：

1. 上下文成本：AI 读 SKILL.md 正文才 ~100 tokens，但脚本几百行。如果放在正文里，每次触发都加载。
2. 执行隔离：脚本是独立可运行的，不依赖 AI 的上下文。用户也可以直接 bun run scripts/main.ts 而不经过 AI。

6. 电商案例：商品主图批量压缩——从3.2秒到1.1秒

🛒 实战案例：某服装店铺在淘宝有3000个SKU，商品主图（白底图）每张2-5MB，直接从供货商网盘下载后上传。移动端平均加载时间3.2秒，跳出率47%。店铺运营算了一笔账：加载每慢1秒，转化率掉7%——3.2秒意味着每天流失约120个潜在下单用户。

用 baoyu-compress-image 批量压缩主图：

• 对 product-images/ 目录下3000张白底图批量处理：转为WebP格式，质量80
• 淘宝主图标准展示尺寸800×800，供货商原图却是4000×4000（相机直出），先统一尺寸再压缩
• 使用参数 --recursive --quality 80 --format webp --width 800 --height 800
• 保留原图备份到 originals/，压缩版上传淘宝图片空间
• 配合项目级 EXTEND.md 固定 WebP 格式偏好，全团队统一标准

效果：

• 主图平均大小从2.8MB → 85KB（缩小97%）
• 移动端页面平均加载时间从3.2秒 → 1.1秒（提速66%）
• 跳出率从47% → 35%（下降12个百分点）
• 7天转化率从1.9% → 2.6%（提升37%）
• CDN带宽月费从¥2,400降到¥380

🔑 启示：淘宝店铺的主图不是拍得越大越好——平台会自动压缩到800×800展示，你的4000×4000原图只是在浪费用户的流量和等待时间。图片压缩不是"技术优化"，是"转化率优化"——加载快一秒，下单多一成。

7. 常见错误

8. 掌握检验

Q1：baoyu-compress-image 的 YAML 头部中，requires.anyBins 字段的作用是什么？

• A) 声明 Skill 的作者和许可证
• B) 声明运行时的依赖工具，任一可用即可
• C) 声明该 Skill 兼容的所有操作系统
• D) 声明可接受的输入文件格式

Q2：以下哪个选项正确描述了「脚本说明书」模式的结构顺序？

• A) 怎么配置 → 脚本在哪 → 怎么用 → 一句话功能
• B) 脚本在哪 → 怎么配置 → 一句话功能 → 怎么用
• C) 一句话功能 → 脚本在哪 → 怎么配置 → 怎么用
• D) 怎么用 → 一句话功能 → 脚本在哪 → 怎么配置

Q3：参数表中"Default（默认值）"这一列为什么被认为是关键的一列？请结合 AI 交互体验来解释。

Q4：EXTEND.md 偏好系统按什么优先级顺序生效？为什么要在 description 中写上 "automatic tool selection" 这样的差异化描述？

Q5：以下哪项是 Section 3 中提取的「工具型 Skill 模板」可以覆盖的场景？

• A) 图片加水印、视频转 GIF、PDF 合并、CSV 转 JSON
• B) 聊天机器人、情感分析、语音合成、图像识别
• C) 用户认证、权限管理、数据库迁移、日志收集
• D) 网页爬虫、邮件发送、消息队列、缓存管理

Q6：某电商网站首页轮播图从 4.2MB 压缩到 380KB，加载时间从 4.8 秒降至 2.1 秒。如果要批量压缩整个 public/images/ 目录下的 3000 张商品图，应该使用什么命令参数？参数的设计说明了什么设计原则？

Q7：一个同事把脚本的执行逻辑（几百行代码）直接写在 SKILL.md 正文里，你会给他指出哪两个问题？（每个问题用一句话回答）

9. 答案

点击查看答案

Q1：B — requires.anyBins 声明运行时所需的二进制工具（如 bun、npx），anyBins 表示任一可用即可。A 不对（没有声明作者和许可证的字段），C 不对（不是操作系统兼容性声明），D 不对（不是文件格式声明）。

Q2：C — 正确的结构顺序是：一句话功能 → 脚本在哪（Script Directory）→ 怎么配置（Preferences/EXTEND.md）→ 怎么用（Usage + Options + Examples）。

Q3：AI 需要知道不传参数时的默认行为，才能判断该参数是否需要主动询问用户。没有 Default 列，AI 在每次交互中都会追问"要不要保留原文件？""质量设为多少？"，导致交互次数暴增，体验极差。有 Default 列后，AI 只在用户明确要改变默认行为时才询问。

Q4：三级优先级为：项目级（.baoyu-skills/）→ 系统配置级（~/.config/baoyu-skills/）→ 用户级（~/.baoyu-skills/）。Skill 启动时从高到低逐级查找 EXTEND.md，找到第一个就停止，后面全忽略。这类似于 CSS 的级联覆盖或 Git 的三级 config。设计目的是让团队可以在项目里强制统一输出格式（如 WebP），同时个人的其他项目不受影响（仍用 PNG）。description 写上 "automatic tool selection" 是为了让 AI 知道这个 Skill 在同类中有什么独特优势，从而在多个压缩 Skill 中优先匹配。

Q5：A — 模板覆盖的都是"输入 → 处理 → 输出"型的工具类场景，如加水印、转 GIF、合并 PDF、格式转换。B/C/D 分别属于 AI 对话、后端系统、基础设施类，不适用此模板。

Q6：应使用 --recursive --quality 80 --format webp 对 public/images/ 目录进行递归批量处理。这说明了「用参数组合解决批量问题」的设计原则——单个参数各司其职（递归处理目录、指定质量、指定格式），组合起来产生 1+1>2 的效果，体现了良好的 API 设计。

Q7：1) 上下文成本问题——AI 每次触发 Skill 都会加载 SKILL.md 全文，几百行脚本代码会严重浪费 token 预算；2) 执行隔离问题——脚本独立存在可以脱离 AI 直接运行（bun run），放在 SKILL.md 里就只能走 AI 调用这一条路。

（6/7 通过）

10. 延伸阅读

• [[L1-02-网页转Markdown|下一课：网页转Markdown]] — 更复杂的工具型 Skill，含用户交互和偏好系统
• [[../../Level0-先修课/L0-01-Skill的本质与工作原理|先修课：Skill到底是什么]] — 复习三级加载系统
• [[Skill写作教程-从零开始#模式 6「工具调用」型|Skill写作：工具调用型完整指南]]

做出来了，下一步：登记

项目能跑只是前半程。源码文档整理、申报材料生成这类重复劳动，可以交给软著通——AI 软件著作权申请工具，材料备齐再提交；登记结果以中国版权保护中心审核为准。

软著通下载入口