告别繁琐：我研发的 Claude Code Skill 让图片处理自动化

作为一名小程序开发者，我每天dou要与设计师对接，处理大量的图片。从 Figma 设计稿中导出图片，再进行压缩、上传到 COS，Zui后复制链接粘贴到代码中，这个过程重复多次令人感到十分繁琐。Zui近，我发现了 Claude Code 的 Skill 机制，Ke以自定义流程，让 AI 完成这些重复性工作，大大提高了我的工作效率。

在没有使用 Claude Code Skill 之前，我需要手动处理图片。这个过程包括：

Figma 里一张张切图导出

打开 TinyPNG 网站进行压缩

上传到 COS

复制链接粘贴到代码中

一个页面Ru果有 5 张图，就需要重复这个过程 5 次。这种机械重复的工作不仅耗时还容易出错。

为了解决这个问题，我开发了一个名为 image-auto-upload 的 Claude Code Skill。这个 Skill Ke以自动完成图片的压缩、上传和链接复制等工作。

Skill 本质上是一个文件夹，放在 .claude/skills/ 目录下。我的 image-auto-upload Skill 目录结构如下：

.claude/skills/image-auto-upload/
├── SKILL.md              # 给 Claude kan的操作手册
├── README.md             # 给人kan的使用文档
├── resources/            # 放待上传的图片
│   └── README.md
└── scripts/              # 执行脚本
    ├── upload_images.cjs  # Node.js 上传脚本
    └── compress_png.py    # Python 压缩脚本

SKILL.md 是 Skill 的核心文件，它告诉 Claude 如何完成特定的任务。这个文件的内容包括：任务描述、执行步骤、脚本调用等。

为了让 Skill Neng够正常工作，需要配置一些环境变量，如 COS Bucket、Region、上传前缀和 TinyPNG API Key 等。这些变量存储在项目根目录的 .env.skills 文件中。

COS_BUCKET=your-bucket-name
COS_REGION=ap-nanjing
COS_UPLOAD_PREFIX=applet
TINYPNG_API_KEY=your-tinypng-api-key

upload_images.cjs 和 compress_png.py 是两个关键的脚本。前者负责将图片上传到 COS，后者负责压缩 PNG 图片。

初体验：惊艳的自动化效果<