ui-redline-walkthrough — скилл
Скилл собирает из двух скриншотов UI ролик с красными пометками и переходом к исправленному виду, экспорт в MP4.
- 59 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Скилл запускает локальные скрипты на Python, Chromium и `ffmpeg` и пишет файлы ролика в рабочую папку.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/ui-redline-walkthroughОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл запускает локальные скрипты на Python, Chromium и `ffmpeg` и пишет файлы ролика в рабочую папку.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
ui-redline-walkthrough — скилл для Claude, который по двум скриншотам одного экрана, до и после, собирает ролик в духе дизайнерской правки на распечатке. Красные круги, стрелки и рукописные заметки отмечают проблемы на настоящем интерфейсе, затем экран по шагам превращается в исправленный вид. Скилл сначала спрашивает список улучшений, потом измеряет элементы скриншотов, перерисовывает интерфейс в HTML и анимирует его как функцию времени. Результат — самодостаточный HTML-файл и MP4, который `scripts/export_mp4.py` рендерит покадрово через Chromium. Справочники в `references/` описывают опрос, измерения, хореографию и чек-лист проверки.
Для кого. Дизайнерам и продуктовым командам, которым нужно показать правки интерфейса в ролике для ревью, журнала изменений или анонса без ручного монтажа.
Подходит, если
- Нужно объяснить заказчику, что изменилось на экране и почему, в 20-секундном видео.
- К релизу готовится журнал изменений, и каждое улучшение интерфейса хочется показать наглядно.
- Есть два скриншота редизайна, и из них надо быстро собрать ролик для соцсетей.
- Ревью дизайна идет письменно, а замечания проще понять, когда они нарисованы поверх экрана.
Не подходит, если
- Нужен ролик с реальной записью работы приложения: скилл собирает анимацию по картинкам.
- Есть только один скриншот без состояния «после».
- Нужна монтажная студия с озвучкой и переходами между сценами.
Пример запроса к агенту
Сделай ролик redline по этим двум скриншотам чата. Покажи три улучшения: заголовок, ширину строки и кнопку отправки.Ограничения
Для работы нужны Python 3.9 с `numpy`, `pillow` и `scipy`, `playwright` с Chromium и `ffmpeg` в `PATH`. Скиллу требуются оба скриншота одного экрана при одинаковом масштабе, а список правок желательно дать заранее: без него агент задаст вопросы. Установка ручная: папку копируют в `~/.claude/skills/` либо загружают упакованный файл `.skill` в настройках Claude. Пример в репозитории ограничен одним роликом о редизайне чата.
Как отключить. Удалите папку `ui-redline-walkthrough` из `~/.claude/skills/` или уберите скилл в настройках Claude. Библиотеки Python и Chromium остаются в системе.
Частые вопросы
Что получится на выходе?
Один HTML-файл с анимацией и MP4, собранный из него покадрово. Пример в репозитории длится 19 секунд при 3200 на 1800 и 60 кадрах в секунду.
Что нужно дать скиллу?
Два скриншота одного экрана при одинаковом масштабе и нумерованный список улучшений, лучше с причиной у каждого пункта.
Как проверить результат до экспорта?
Откройте `assets/template.html` в браузере: пробел ставит на паузу, стрелки перематывают. Так же смотрят и готовый HTML.
Нужен ли браузер?
Нужен Chromium из `playwright`: он рендерит кадры для MP4. Установите его командой `playwright install chromium`.
Подойдет ли не Claude?
Файл `SKILL.md` написан под Claude, но формат скилла понимают и другие агенты. Установка в README расписана только для Claude Code и Claude.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл собирает моушн-графику кодом: 21 готовый стиль, пять вопросов, три кадра на утверждение и рендер в MP4.
Бесплатный скилл для Claude: пишет ТЗ, подбирает видео и 3D, собирает кинематографичный лендинг и проверяет его скриншотами
Скилл Claude Code: корейский моушн-ролик по одному запросу, от сценария до озвучки ElevenLabs, музыки и проверки
Скилл для Claude Code: снимает продукт в браузере, собирает ролик с главами и титрами и мастерит MP4 локально
Скилл превращает закадровый текст в 20-секундный пиксельный ролик 1920×1080 с озвучкой и проектом для правок.
Скилл Video by Reference учится стилю у ролика-образца и собирает из кода анимированный короткий фильм с оригинальным саундтреком
Коротко о README
Показывает пример ролика, установку, требования к окружению, состав репозитория и запуск демонстрации через шаблон.