Идеи

Скилл дизайнера из канала Charles Postiaux

Скачать все 97 роликов канала, нарезать скрины по сценам, прогнать субтитры и кадры через Claude и выжать из этого Claude-скилл продуктового дизайнера с правилами, чеклистами и парами «было/стало»

идеясегодня
подробности
0/4 пунктов сделано4 связи
designskillsclaude-codepipelineyoutubelearning

создано 31 окт 2026 · обновлено 31 окт 2026

Сейчас

Прогнать пайплайн на 3 роликах «Watch Me Fix a SaaS Design» и посмотреть, что реально вытаскивается из кадров

  • Завести репо design-skill/ со скриптами скачивания и нарезки
  • Прогнать 3 ролика «Watch Me Fix a SaaS Design», посмотреть кадры и заметки
  • Посчитать токены на ролик и решить, Sonnet или Haiku для заметок
  • Собрать первую версию SKILL.md и проверить на своём экране

Суть

Превратить канал в Claude-скилл дизайнера: не пересказ видео, а дистиллят правил («в SaaS-навигации не больше 7 пунктов, вторичные в футер сайдбара»), чеклистов по типам экранов (signup, onboarding, dashboard, pricing, лендинг) и библиотеки пар «было/стало» со скринами и объяснением, что именно изменилось и почему. Скилл потом подключается в Claude Code и применяется к своим проектам: ревью макета, ревью готового фронта по скриншоту, генерация экрана по правилам.

Решение

Пайплайн в отдельном репо design-skill/, без LLM на этапах скачивания и нарезки, LLM только на анализе и дистилляции:

  1. yt-dlp качает список роликов, автосубтитры (vtt) и видео в 720p. Бизнес-ролики (цены, клиенты, FAQ) отсекаются по названию.
  2. ffmpeg режет кадры по смене сцены, дедуп по перцептивному хэшу, кладёт в raw/<video-id>/frames/.
  3. Claude (Sonnet, батчами) на ролик пишет notes/<video-id>.md: тип экрана, список решений «проблема → что сделал → почему», ссылки на кадры до/после, цитаты из субтитров с таймкодом.
  4. Claude (Opus, один раз) по всем заметкам собирает скилл: SKILL.md с принципами и порядком ревью, references/<тип экрана>.md с чеклистами, examples/ с парами кадров и разбором.
  5. Проверка: скилл применяется к экрану из ai-saas-product и к одному из вариантов solutions-arena, сравниваем ревью с интуицией.

Начать с 3 роликов серии «Watch Me Fix», оценить качество и стоимость токенов, потом масштабировать на остальные ~60 дизайнерских.

Контекст

Канал: https://www.youtube.com/@CharlesPostiaux/videos. Автор продуктовый дизайнер, работал с компаниями на $200B+, 97 роликов. Половина канала это серия «Watch Me Fix a SaaS Design»: берёт реальный SaaS и за 1-2 часа переделывает экран, объясняя каждое решение. Остальное: процесс дизайна с ИИ (Paper + Claude), дизайн-системы с ИИ, онбординги, навигация, signup-экраны, кейс-стади, плюс бизнес дизайнера (цены, клиенты), это нам не нужно.

На машине уже стоят yt-dlp (2026.08) и ffmpeg (9.0), качать и резать есть чем.

Проблема

Я фронтендер, а не дизайнер. Вкус есть, системы нет: не могу объяснить, почему экран плохой и что менять первым. Смотреть 97 роликов по часу (это ~45 часов) нереально, а конспект от руки теряет визуальную часть, которая в дизайне главная. Существующие дизайн-скиллы для Claude общие и без «было/стало» на реальных продуктах.

Почему сейчас

Инструменты сошлись: yt-dlp тянет видео и автосубтитры, ffmpeg режет по смене сцены, Claude читает картинки и может по паре кадров описать разницу. Скилл нужен прямо сейчас для ai-saas-product и как эталон оценки UI в solutions-arena.

Варианты

  1. Только субтитры, без кадров. Дёшево (97 транскриптов, копейки токенов), но дизайн визуальный: «вот здесь я убрал это» без картинки бесполезно. Отвергнуто как единственный источник, оставлено как первый слой.
  2. Субтитры + кадры по смене сцены + vision. ffmpeg вырезает кадр на каждой смене сцены (порог ~0.3), получается 100-300 кадров на ролик; Claude получает транскрипт с таймкодами и кадры и пишет структурированную заметку: принципы, before/after, тип экрана. Дороже, но это единственный способ сохранить визуальную часть. Выбрано.
  3. Смотреть самому и конспектировать. 45 часов. Нет.
  4. Готовый ИИ-суммаризатор YouTube. Даёт пересказ, не даёт правил и скринов. Нет.

Не делаем

  • Не публикуем скрины, транскрипты и сам скилл наружу: это личный конспект чужого контента. На сайте идей только эта страница и выводы.

  • Не делаем из этого продукт и не повторяем бизнес-часть канала.

  • Не переносим ролики про деньги и клиентов, только дизайн.

  • Завести репо design-skill/ со скриптами скачивания и нарезки

  • Прогнать 3 ролика «Watch Me Fix a SaaS Design», посмотреть кадры и заметки

  • Посчитать токены на ролик и решить, Sonnet или Haiku для заметок

  • Собрать первую версию SKILL.md и проверить на своём экране