NanoBanano Pro отдаёт PNG по 6-8 MB. На сайт нужен WebP до 200 KB. Раньше каждый раз ресайзил руками. Сделал скилл для Claude Code - теперь одна команда.
Генерирую картинки для блога через NanoBanano Pro. Результат красивый, но неподъёмный: PNG 1024x1024, от 6 до 8 мегабайт. Для блога на prodfeat.ai страница грузится дольше, Core Web Vitals проседают. На LinkedIn тоже перебор.
Что такое Claude Code skill
Skill - это Markdown-файл в папке .claude/skills/, который учит Claude новому навыку. Внутри - инструкции и опционально скрипты. Упоминаешь “process images” в разговоре - Claude подхватывает.
В SKILL.md - YAML-фронтматтер с name и description (по ним Claude решает, когда активировать скилл), плюс пошаговый workflow.
Что сделал
Начал с meta-скилла skill-creator - встроенный помощник в Claude Code для проектирования новых скиллов. Сказал: “нужен скилл для обработки изображений из NanoBanano, конвертация в web-ready формат”.
Skill-creator задал три вопроса: что на входе, что на выходе, какой workflow. Сгенерировал структуру и базовый SKILL.md.
Пайплайн обработки:
- Кидаю PNG в
content/posts/images/new/ - Говорю Claude “process images”
- Claude спрашивает, в какую папку сохранить (привязка к посту)
- Скрипт ресайзит до max-width 1600px, конвертирует в WebP с quality 85
- Оригинал перемещается в подпапку
in progress/, рядом ложится WebP-версия
Скрипт на Python с Pillow. 90 строк. Обрабатывает и отдельные файлы, и целые папки.
Почему WebP, а не JPEG? По данным Google, WebP lossless на 26% меньше PNG. WebP lossy - на 25-34% меньше JPEG при сопоставимом качестве. Все современные браузеры поддерживают.
Думал про Sharp (Node.js, libvips). Стандарт для JS-проектов, быстрее на больших батчах. Но у меня Python-стек для скриптов, Pillow уже стоит. Выбрал Pillow - для 3-5 картинок за раз разница не чувствуется.
Почему 1600px, а не 1200? LinkedIn рекомендует 1200px для постов. Блог отображает на ту же ширину. Но retina-экранам нужен запас - 1600px покрывает 2x на мобильных без лишнего веса.
Результат
Первый тест: PNG от NanoBanano, 6.5 MB, 1024x1024.
На выходе: WebP, 89 KB (ресайз не потребовался - исходник меньше 1600px). Сжатие в 73 раза.
Для картинок после upscale (2048x2048) - ресайз до 1600px + WebP даёт 120-180 KB. Было 12 MB - стало 150 KB.
Весь процесс: 5 секунд вместо 2 минут ручной работы в Preview + ImageOptim. На 10 картинках для поста - экономия 20 минут. При 2-3 постах в неделю это примерно 3 часа в месяц.
Что понял
Скиллы Claude Code - способ закрепить повторяющийся workflow так, чтобы Claude воспроизводил его точно. Скрипт можно написать и без Claude, но обёртка в скилл добавляет контекст: Claude сам предлагает папку, спрашивает привязку к посту, двигает оригиналы.
Отдельная папка completed/ для обработанных изображений - пока не уверен, нужна ли. Сейчас всё лежит в in progress/ рядом с оригиналами. Посмотрю через месяц, когда накопится 30-40 файлов. Может, хватит текущей структуры.
Skill-creator сгенерировал структуру и базовый SKILL.md за 5 минут. Допилить под свой workflow - ещё 10. Всего 15 минут от идеи до рабочего скилла.