Как генерировать изображения и видео в Claude Code для сайта

Чтобы генерировать изображения и видео в Claude Code, подключите внешний сервис через MCP. Попросите выбрать совместимую модель, рассчитать стоимость конкретного запроса и дождаться вашего согласия. Сначала создайте изображение, передайте ID завершённой генерации как первый кадр видео, затем скачайте оба файла в проект сайта.

Пример — главная страница кофейни: уютный интерьер, плавное движение камеры и читаемый текст рядом. Инструкции можно адаптировать для портфолио или страницы товара. Связывайте изображение, видео и место на странице с помощью явных имён файлов и ID генераций.

Может ли Claude Code генерировать изображения и видео?

Claude Code организует работу и редактирует код сайта. MCP предоставляет доступ к внешним инструментам. FlyAIgh передаёт запрос выбранной модели изображений или видео и возвращает задание и результат. Написание SVG или HTML и понимание загруженного изображения отличаются от генерации фотографии или видео.

Это различие помогает выбрать способ работы. Для простой иконки, диаграммы или CSS-анимации может хватить кода. Для фотографической сцены или сгенерированного движения камеры нужна подходящая медиамодель. Подключение MCP не означает, что все модели поддерживают одинаковые входные данные, длительность и разрешение.

Подключите инструменты генерации

Нужны установленный Claude Code с выполненным входом и действующая подписка FlyAIgh Basic или выше. Одного Starter Pack для MCP недостаточно. Доступ к Claude Code и кредиты генерации FlyAIgh оплачиваются отдельно. В FlyAIgh откройте Инструменты → MCP, создайте API-ключ и при необходимости задайте суточный лимит кредитов.

Выполните команду HTTP-подключения ниже в своём терминале, заменив заполнитель своим ключом. Сохранённую конфигурацию клиента храните как секрет: не добавляйте её в коммит и не помещайте ключ в код сайта. Актуальная настройка описана в руководстве FlyAIgh MCP в конце статьи. В Claude Code откройте /mcp для проверки подключения; claude mcp list также показывает настроенные серверы.

claude mcp add --transport http flyaigh https://www.flyaigh.com/api/mcp \
  --header "Authorization: Bearer YOUR_FLYAIGH_API_KEY"

Перед генерацией попросите вызвать get_balance и list_models. Выберите ID модели и параметры из результата, не угадывая название. Для своей фотографии вызовите upload_file. Если получен подписанный URL загрузки, сначала передайте туда содержимое файла и только потом используйте file_id. Локальный путь или произвольный URL изображения не заменяет этот идентификатор.

Создайте изображение для конкретного места на странице

Начните с компоновки страницы, а не только с описания стиля. Определите место изображения, соотношение сторон, положение объекта и нужное свободное пространство. В примере изображение 16:9 находится в медиаблоке, а заголовок рядом задан в HTML. Так текст можно редактировать отдельно, и его удобнее читать на телефоне.

Запросите доступные модели изображений и стоимость выбранных настроек. Цены в list_models — примеры для параметров по умолчанию; quote рассчитывает конкретный запрос. Подтвердите его перед generate_image. Смена модели, разрешения, качества или референсов может изменить стоимость.

Когда get_job сообщит о завершении, проверьте изображение до анимации. Оцените композицию, лишние надписи, выдуманные предметы и кадрирование на узком экране. Сохраните ID одобренного изображения, промпт и модель. Если вариантов несколько, явно выберите нужный: самый новый результат не обязательно одобрен.

Превратите одобренное изображение в видео

После одобрения изображения выберите видеомодель с поддержкой i2v. Передайте ID завершённой генерации изображения в first_frame. Это связывает видео с выбранной картинкой; текстовый запрос с описанием похожей сцены создаст новую сцену. До генерации рассчитайте стоимость выбранных длительности, разрешения, соотношения сторон и аудио.

Описывайте движение отдельно: медленное приближение камеры, лёгкий пар, неподвижная чашка. Начните с самой короткой поддерживаемой длительности, подходящей странице. Для спокойного оформления главной страницы не нужна полная смена сцены. Первый кадр направляет генерацию, но не фиксирует каждый пиксель объектов и логотипов.

Следите за ходом работы через get_job с полученным ID видеозадания. По завершении просмотрите весь ролик и прослушайте звук, если он есть. Проверьте форму чашки, края, движение камеры и последний кадр. Завершённое задание всё равно может содержать визуальные дефекты. Для циклического воспроизведения проверьте скачок от конца к началу.

Скачайте файлы и добавьте их на сайт

Скачайте одобренное изображение и готовое видео. Ссылки на приватные файлы из get_job истекают через 1 час; при необходимости вызовите get_job снова. Не используйте временный подписанный URL как постоянный адрес материала на сайте. Сохраните соответствие ID изображения, ID видео, промпта, модели и окончательных имён файлов.

В Next.js файлы из public/media доступны по пути /media. В другом фреймворке используйте каталог статических ресурсов или собственную CDN. Пример предполагает настоящий JPEG-постер hero-poster.jpg и воспроизводимый браузером MP4 hero.mp4. При необходимости конвертируйте файлы: переименование PNG в .jpg не меняет формат. Не добавляйте API-ключи и вызовы генерации в публичную страницу.

HTML-пример содержит стандартные элементы управления, постер и запуск воспроизведения пользователем. preload="none" позволяет не запрашивать видео заранее, хотя поведение браузеров может различаться. На узком экране блоки располагаются вертикально, а текст остаётся отдельно. В React JSX используйте className, playsInline и соответствующие имена атрибутов.

<section class="hero">
  <div>
    <h1>Your page heading</h1>
    <p>Your introduction</p>
  </div>
  <video controls playsinline preload="none"
    poster="/media/hero-poster.jpg"
    width="1280" height="720">
    <source src="/media/hero.mp4" type="video/mp4">
    <a href="/media/hero.mp4">Download video</a>
  </video>
</section>
<style>
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
  }
  .hero video {
    display: block;
    width: 100%;
    height: auto;
  }
  @media (max-width: 48rem) {
    .hero { grid-template-columns: minmax(0, 1fr); }
  }
</style>

Контролируйте правки и расходы

Подтверждайте каждую генерацию отдельно, сверяя стоимость с балансом и лимитом ключа. Суточный лимит помогает ограничить расходы, но не делает правки бесплатными. Параметр expected_credits, если доступен в вызове, защищает от изменения расчётной стоимости, но не задаёт общий бюджет проекта.

Если непонятно, отправился ли запрос, сначала проверьте существующее задание. Повторное использование idempotency_key для того же запроса в течение 24 часов предотвращает дубликат; другие параметры с тем же ключом вызывают конфликт. Новая творческая версия — новый запрос, который может расходовать кредиты. Успешно созданный ролик, который вам не понравился, не считается сбоем задания.

• Нет подключения: проверьте /mcp, HTTP-адрес, API-ключ и действующую подходящую подписку.
• Референс отклонён: используйте завершённое изображение своего аккаунта или полностью загруженный file_id. Для i2v передайте его в first_frame.
• Материал исчез: обновите истёкшую ссылку через get_job и разместите скачанный файл по постоянному пути; повторная генерация не нужна.
• Проблемы воспроизведения или кадрирования: проверьте формат, сетевой ответ, размеры на телефоне и CSS. Обрезка cover может скрыть часть объекта.

Источники и связанные руководства

Различие возможностей основано на документации Anthropic; названия инструментов и работа с референсами — на текущей реализации FlyAIgh MCP. Пример страницы использует стандартное поведение HTML-видео. При выполнении проверяйте актуальные параметры моделей и стоимость.

• Claude: возможности генерации изображений
• Claude Code: подключение инструментов через MCP
• FlyAIgh: настройка MCP и справочник инструментов
• MDN: HTML-элемент video
• Оживить изображение в FlyAIgh
• Подготовить полезные референсы
• Создать видео товара из фотографий