00:00:00Claude Code — отличная вещь, и наша команда стала использовать его буквально для всего.
00:00:03В Anthropic это заметили и некоторое время назад ввели концепцию «навыков» (skills).
00:00:07Но с выходом Nano Banana Pro люди начали двигаться в совершенно ином направлении,
00:00:12используя продукты Google, такие как anti-gravity, для создания более качественных сайтов.
00:00:15Мы попробовали anti-gravity, но, на наш взгляд, сейчас этот инструмент слишком «сырой».
00:00:19Мы понимаем, что любители anti-gravity будут готовы наброситься на нас за такие слова.
00:00:21Но это тема для отдельного видео, а пока важно то, что изображения там генерируются бесплатно.
00:00:25Поэтому мы подумали: почему бы не оставить Claude код, а anti-gravity поручить только изображения?
00:00:30Но вот в чем загвоздка.
00:00:31Для таких разных сценариев использования не стоит заново давать Claude инструкции каждый раз.
00:00:35Вам следует обучить его и создать специализированный навык.
00:00:37Недавно Claude выпустили руководство о том, как на самом деле нужно создавать такие навыки.
00:00:41И самая важная часть в нем — это тестирование и итерации.
00:00:44Честно говоря, это руководство полностью изменило наше представление о навыках.
00:00:48Возможно, вы уже слышали о Skill Creator.
00:00:50Это официальный навык от Claude Code, который помогает создавать эффективные скиллы.
00:00:55Однако один из участников нашей команды обнаружил, что он уже устарел
00:00:58по сравнению с тем новым руководством, которое было опубликовано.
00:01:00Поэтому мы обновили его, внесли множество изменений
00:01:02в соответствии с новыми правилами и добились действительно классных улучшений.
00:01:05Используя обновленный Skill Creator и пройдя через множество итераций,
00:01:09мы создали новый навык «nano banana UI».
00:01:12Но навык, с которого мы начинали, и тот, что получился в итоге — это две абсолютно разные вещи.
00:01:16Оба этих навыка будут доступны в AI Labs Pro.
00:01:19Для тех, кто не знает: это наше недавно запущенное сообщество,
00:01:22где вы получаете готовые шаблоны, которые можно сразу вставить в свои проекты
00:01:26как из этого видео, так и из всех предыдущих.
00:01:28Если вам нравится то, что мы делаем, и вы хотите поддержать канал,
00:01:31это лучший способ. Ссылка в описании.
00:01:34Мы уже наладили процесс координации между Claude Code и Anti-Gravity.
00:01:38Поэтому мы открыли одну и ту же директорию и в Claude Code, и в Anti-Gravity.
00:01:42Claude инициализировал проект, а Anti-Gravity должна была заботиться только о папке public,
00:01:47в которой будут храниться все изображения.
00:01:49Claude должен был давать нам промпты и имена файлов для картинок,
00:01:53которые нужно было создать в Anti-Gravity. Эти промпты попадали в Anti-Gravity.
00:01:56Она запускала инструмент генерации и, используя параллельную обработку,
00:02:00создавала несколько изображений одновременно.
00:02:03Как видите, она сгенерировала три изображения, и все они были помещены в папку images.
00:02:08Как только они там появились, Claude автоматически это понял и смог с ними работать.
00:02:12Но как только мы начали генерировать изображения, всё начало ломаться.
00:02:17Вы, наверное, слышали это много раз, но проектирование описаний — это одна из
00:02:21важнейших вещей при создании повторяющихся рабочих процессов. Эти описания —
00:02:26YAML-метаданные, которые всегда загружаются в контекст Claude Code при открытии.
00:02:30Именно так Claude решает, нужно ли загружать ваш навык или нет.
00:02:34Однако многие пользователи жалуются, что навыки загружаются, когда они не нужны.
00:02:38Это происходит потому, что большинство описаний просто говорят, что навык делает.
00:02:41Хорошее же описание должно отвечать на два вопроса:
00:02:44Что делает навык? И когда Claude должен его использовать?
00:02:46Здесь на помощь приходят триггерные фразы. Это фразы, вызывающие навык,
00:02:51например, «создай лендинг» или когда мы упоминаем «nano banana». Но дело не только в запуске.
00:02:57В руководстве также упоминаются негативные триггеры, которые говорят Claude, когда навык использовать НЕЛЬЗЯ.
00:03:01Например, мы указываем, что его не нужно загружать для простых исправлений багов или работы с БД.
00:03:05Разница между хорошим и плохим описанием очевидна.
00:03:08У этого навыка из нового конструктора есть несколько триггеров и негативных условий,
00:03:13в то время как версия из старого конструктора просто описывает функции навыка.
00:03:17Есть также чисто количественные инструкции, связанные с синтаксисом,
00:03:21но вам не обязательно в них вникать.
00:03:23Также, если вам нравится наш контент, не забудьте нажать кнопку хайпа,
00:03:27это помогает нам выпускать больше видео и охватывать более широкую аудиторию.
00:03:31Обычно при генерации различных изображений им требовались
00:03:35разные размеры, чтобы они подходили под конкретные нужды.
00:03:39И это было указано в промпте до того, как мы внесли изменения.
00:03:42Но каждый раз случалось следующее: когда мы пытались задать свои размеры,
00:03:46инструмент в anti-gravity всё равно выдавал только квадратные картинки.
00:03:50Обычно это не проблема для простой модели в приложении Gemini или Google AI Studio.
00:03:55Но здесь нам пришлось изменить процесс и соответствующим образом доработать навык.
00:03:58Это было прописано в файле skill.md на нужных этапах,
00:04:02а также в правилах промптинга: при составлении запроса
00:04:06не нужно указывать размеры или соотношение сторон, так как это не имело значения.
00:04:10А если изображение нужно будет обрезать под конкретные цели,
00:04:12это следует сделать позже с помощью инструмента crop image.
00:04:15Вот почему папка со скриптами так важна.
00:04:18В ней хранятся исполняемые инструменты, которые Claude может вызывать с аргументами,
00:04:22и вы подбираете эти инструменты под свои задачи.
00:04:25Хороший скрипт должен поддерживать аргументы командной строки с разными режимами,
00:04:29чтобы Claude мог легко его задействовать.
00:04:31И одна вещь, которую мы обнаружили — это необходимость режимов предварительного просмотра,
00:04:35которые помогают Claude увидеть результат перед выполнением необратимых операций.
00:04:40Давайте прервемся на минуту, чтобы поговорить о спонсоре сегодняшнего выпуска.
00:04:42После этого мы разберем одну структурную ошибку,
00:04:45которую совершает большинство людей при создании своих навыков.
00:04:47CREAM
00:04:47Для разработчиков и основателей SaaS главная головная боль — не сама разработка.
00:04:50Это кошмар с мировыми налогами и соблюдением требований по НДС.
00:04:53CREAM — это платежный посредник (merchant of record), который берет всё это на себя, давая вам кодить.
00:04:58Созданный для новой волны цифрового бизнеса,
00:05:00CREAM предлагает молниеносную настройку для приема платежей в 100+ странах с первого дня.
00:05:05Они убрали всю путаницу со скрытыми комиссиями,
00:05:07предлагая прозрачную фиксированную ставку 3,9% + 40 центов.
00:05:11И это всё.
00:05:11Тариф един для клиентов из Токио или Техаса, для American Express или Google Pay.
00:05:16Вы получаете мощные функции, такие как автоматическое разделение доходов для легкого запуска.
00:05:20Всегда используйте их изолированный тестовый режим и выделенный TypeScript SDK.
00:05:23Кроме того, у CREAM есть официальные навыки для AI-агентов Claude Code, Cursor и WinSurf.
00:05:28Просто скажите своему AI-помощнику интегрировать CREAM,
00:05:30и он мгновенно создаст безопасный код на основе актуальных практик их API.
00:05:36Только помните: никогда не коммитьте свои API-ключи в систему контроля версий.
00:05:39Если вы готовы к приему платежей, переходите по ссылке в закрепленном комментарии.
00:05:42Забудьте о налогах и начните масштабироваться с CREAM.io.
00:05:45Возможно, вы уже слышали от нас о «прогрессивном раскрытии» в предыдущих
00:05:50видео, потому что это касается не только навыков, но и крайне важно для окна контекста.
00:05:55Это означает, что агент должен знать о чем-то только тогда, когда это ему нужно.
00:05:59Вы уже знаете, что описание всегда загружается в контекст Claude Code.
00:06:03И поэтому в навыках используется трехуровневая структура,
00:06:06где первый уровень всегда находится внутри контекста Claude.
00:06:09Второй уровень — это тело файла skill.md, и в нем должны быть ссылки на уровень 3,
00:06:14включая полный рабочий процесс и инструкции по использованию этих ссылок.
00:06:18И в рамках этой структуры официальное руководство выделяет так называемую «критическую секцию».
00:06:23Самую важную информацию нужно указывать прямо в начале,
00:06:26а не прятать ее под ворохом различных инструкций.
00:06:29Здесь хорошо видно, что у этого навыка есть только skill.md и отсутствует структура 3-го уровня.
00:06:34Это потому, что весь рабочий процесс, советы, рекомендации
00:06:38и руководства по устранению неполадок помещены в один единственный файл.
00:06:41Так быть не должно,
00:06:43поскольку эти рекомендации могут не понадобиться в данный момент.
00:06:45Сначала должен загружаться только рабочий процесс,
00:06:47а правила промптинга должны подтягиваться только тогда, когда придет время их применять.
00:06:51С другой стороны, этот навык четко структурирован с использованием ссылок
00:06:54и различных скриптов, которые ему необходимы.
00:06:56Помимо рабочего процесса, в файле четко прописаны триггеры для запуска каждого скрипта
00:07:01и моменты, когда нужно свериться со справочными материалами.
00:07:04Таким образом, в skill.md содержится только алгоритм работы для навыка nano banana.
00:07:08А следом, в разделе ссылок, идут различные руководства,
00:07:12где правила промптинга содержат 13 различных правил тестирования,
00:07:15которые мы выработали в процессе итераций.
00:07:17Но даже с такой структурой Claude Code всё равно находил способы пропускать шаги.
00:07:22После генерации первой партии изображений
00:07:24их неизбежно пришлось переделывать,
00:07:26потому что nano banana не всегда выдает максимально точный результат.
00:07:29Удивительно, но Claude не стал проверять их самостоятельно.
00:07:33Нам пришлось самим спрашивать его, соответствуют ли картинки дизайну, который он задумал.
00:07:37Иначе он бы просто взял и внедрил то, что получилось с первого раза.
00:07:41Опять же, именно поэтому итерации — это самое важное при создании навыков.
00:07:45У нас уже был этап валидации ассетов со скриптом validate images,
00:07:49но он проверял только структурную целостность файлов,
00:07:52а не то, насколько изображения эстетически корректны.
00:07:55К эстетике он не имел никакого отношения.
00:07:57Для оценки эстетики Claude должен был сам проводить визуальный аудит,
00:08:00проходя по списку вопросов и решая, проходит картинка проверку или нет.
00:08:04И если проверка провалена, он должен был указать причину.
00:08:07Это нужно для того, что если изображение не проходит визуальный аудит,
00:08:09его нужно удалить, а затем написать новый, исправленный промпт.
00:08:13И в зависимости от режима, если вы работали через anti-gravity,
00:08:16он выдавал новый промпт с учетом ошибок предыдущего,
00:08:20чтобы anti-gravity могла создать более качественные изображения.
00:08:23Именно поэтому anti-gravity сообщает, что перегенерировала изображение со стеклом
00:08:27и на этот раз оно соответствует всем требованиям.
00:08:29Вот почему при создании рабочего процесса так важно иметь такие «контрольные точки».
00:08:34Контрольные точки (validation gates) — это явные блокировщики, определяющие условия,
00:08:39которые должны быть выполнены перед переходом к следующему этапу.
00:08:41Как вы видели, если оставить это на усмотрение Claude, он радостно построит UI вокруг битых картинок
00:08:46и ничего не проверит, пока вы ему не прикажете.
00:08:48Например, в этом навыке
00:08:50четко видно, что рабочий процесс состоит из нескольких последовательных шагов.
00:08:54Но помимо прочих ошибок,
00:08:55здесь не прописано ни одной контрольной точки перед переходом к следующему шагу.
00:08:59Эти контрольные точки по сути являются промптами.
00:09:01Это не какие-то магические команды Bash.
00:09:04Но если действие повторяется каждый раз без изменений,
00:09:08вам стоит создать инструмент и указать его в качестве контрольной точки.
00:09:11В нашем же случае между этапами расставлены проверки,
00:09:15которые не только не дают перескочить дальше раньше времени,
00:09:19но и формируют мини-процессы внутри каждого этапа работы.
00:09:22Экспериментируя и раз за разом прогоняя свой процесс,
00:09:26вы столкнетесь с множеством ошибок, некоторые из которых мы уже упоминали.
00:09:30Например, отсутствующие или битые файлы, неполные ответы API
00:09:34или аварийное завершение скриптов из-за частичного сбоя.
00:09:36И в ходе доработки навыка
00:09:39хороший разработчик должен фиксировать способы обработки каждой такой ошибки.
00:09:44Потому что если это случилось один раз, это обязательно повторится.
00:09:46И обрабатывать это нужно в таком формате:
00:09:48сначала описание ошибки, затем причина (чтобы Claude понимал суть),
00:09:51и далее конкретные шаги по исправлению проблемы.
00:09:54Опять же, когда мы просим его создать лендинг, он просто загружает навык и читает файлы.
00:09:58Если у вас уже есть проект на Next.js, он это обнаружит и задаст уточняющие вопросы —
00:10:02для чего этот лендинг и нужны ли на нем сгенерированные нейросетью изображения.
00:10:06Если вы откажетесь, он просто использует свои фронтенд-ресурсы для сборки страницы.
00:10:11Это стало возможным потому, что в процессе мы также попросили Claude доработать
00:10:16навык фронтенд-дизайна, в котором заложено множество отличных правил
00:10:19для реализации действительно красивых сайтов.
00:10:22И вот что он выдал нам после завершения всех экспериментов.
00:10:27Как видите, это то самое сгенерированное изображение,
00:10:29и на нем есть легкий эффект анимации.
00:10:32В остальном это очень чистый лендинг, а изображения не перегружают дизайн.
00:10:36Они добавлены только там, где они действительно уместны.
00:10:39Но при первой генерации возникли проблемы с используемым шрифтом.
00:10:43Он просто не смотрелся.
00:10:44Тогда мы взяли конкретный типографский шрифт, с которым экспериментировали ранее,
00:10:48и именно это решило проблемы с типографикой.
00:10:51То есть мы просто подключаем различные ресурсы,
00:10:54которые даже не связаны напрямую с навыком дизайна nano banana,
00:10:57и добавляем их туда, чтобы расширить возможности там, где это необходимо.
00:11:00Говоря о прогрессивном раскрытии, мы уже упоминали файлы со ссылками и скриптами.
00:11:06Теперь мы углубимся в раздел «References» — это специализированные знания.
00:11:09И пока ваш основной навык заточен под одну область,
00:11:12он может содержать небольшие пакеты знаний в виде отдельных компонентов.
00:11:16Например, в этих ссылках мы указали паттерны дизайна,
00:11:19эстетику фронтенда и правила написания промптов.
00:11:21Таким образом можно бесконечно расширять базу знаний навыка, не засоряя окно контекста.
00:11:26До этого момента все советы касались того, как научить Claude лучше выполнять задачи.
00:11:31Но никто не говорил о том, как правильно его использовать.
00:11:33Для этого у нас есть другое видео, где мы показываем 10 самых
00:11:36актуальных способов получить преимущество с помощью Claude Code.
00:11:39Вы увидите это видео на конечном заставке,
00:11:41так что лучше кликнуть по нему сразу, а не искать вручную.
00:11:43На этом мы заканчиваем наше видео.
00:11:45Если вы хотите поддержать канал и помочь нам выпускать подобные ролики,
00:11:49вы можете сделать это с помощью кнопки «Суперспасибо» под видео.
00:11:51Как всегда, спасибо за просмотр, и до встречи в следующем выпуске!