С чего начать в соцсетях→
Дизайн и визуал

Кинематографичный сайт на Claude и Higgsfield: мастер-промпт

Кинематографичный сайт, который раньше заказывали у студии, теперь собирает связка Claude и Higgsfield. Claude проектирует и верстает страницу, Higgsfield генерирует для неё видео и картинки. Ниже настройка связки и мастер-промпт, который ведёт Claude от идеи до готового сайта.

Внутри: какой Claude нужен, как подключить Higgsfield в приложении и в Claude Code, мастер-промпт на пять шагов, порядок работы и проверки перед публикацией.

Что понадобится

Три вещи. Без любой из них связка не соберётся.

  1. Claude с доступом к модели Fable. Она сильнее всего в дизайне и длинных задачах, а сайт это длинная задача: концепция, визуалы, вёрстка и проверка в одном заходе.
  2. Аккаунт Higgsfield с подпиской или кредитами. Генерация видео и картинок идёт за его счёт, у Claude своих генераций видео нет.
  3. Полчаса на первый сайт. Дальше этот же промпт собирает следующий сайт за один вечер.
Видео на Seedance 2.5 тратит кредиты Higgsfield заметно быстрее картинок. Поэтому в промпте одно видео на первый экран, а остальные экраны на изображениях.

Подключи Higgsfield к Claude

Выбери один из двух путей. Первый проще, второй удобнее, если ты уже работаешь в Claude Code.

Путь 1. Приложение Claude на сайте или на компьютере

  1. Открой Settings, дальше Connectors, нажми Add custom connector.
  2. Вставь адрес сервера Higgsfield (он ниже) и сохрани.
  3. Войди в свой аккаунт Higgsfield в открывшемся окне. Ключ API не нужен, вход обычный.
  4. Проверь в новом чате: попроси Claude сгенерировать в Higgsfield одну картинку. Если картинка пришла, связка работает.
Промпт
https://mcp.higgsfield.ai/mcp

Путь 2. Claude Code

  1. Поставь CLI Higgsfield первой командой ниже.
  2. Войди в аккаунт второй командой, откроется браузер.
  3. Добавь навыки Higgsfield третьей командой. После этого Claude Code сам вызывает генерацию, когда промпт её просит.
  4. В Claude Code выбери модель Fable через /model и подними уровень рассуждений до максимума.
Промпт
npm i -g @higgsfield/cli
Промпт
higgsfield auth login
Промпт
npx skills add higgsfield-ai/skills

Мастер-промпт

Заполни скобки и вставь целиком в новый чат. Промпт ведёт Claude по пяти шагам и дважды останавливается, чтобы ты выбрал направление до того, как уйдут кредиты.

Промпт
Ты арт-директор и фронтенд-разработчик студии, которая делает кинематографичные сайты для брендов. Собери одностраничный сайт для [бренд или идея: например, «кофейня у моря в Сочи»]. О проекте: - Кто покупает: [аудитория в одной фразе] - Что должен сделать посетитель: [главное действие: записаться, купить, написать в Телеграм] - Настроение: [три слова, например «тёплый, дорогой, спокойный»] - Что обязательно показать: [товары, услуги, цены, адрес] Работай по шагам и после шагов 1 и 2 жди моего «ок». Шаг 1. Концепция. Предложи три направления сайта. Для каждого: название, одна фраза про идею, палитра из пяти цветов с кодами, пара шрифтов из Google Fonts, как ведёт себя страница при прокрутке. Шаг 2. Раскадровка. Для выбранного направления распиши сайт по экранам сверху вниз: первый экран, 3-5 смысловых блоков, финальный экран с действием. Для каждого экрана: заголовок, текст до 25 слов, какой визуал нужен (фото или видео), что происходит при прокрутке. Шаг 3. Визуалы. Сгенерируй все визуалы в Higgsfield. Фоновое видео первого экрана сделай на Seedance 2.5: 5-8 секунд, 16:9, плавная камера, без текста в кадре, начало и конец похожи, чтобы видео зациклилось. Для остальных экранов сгенерируй изображения в одном стиле: один свет, одна палитра, одна оптика. В кадрах не должно быть надписей и логотипов. Сохрани все файлы в папку assets и перечисли, какой файл к какому экрану. Шаг 4. Сборка. Собери сайт в одном файле index.html с папкой assets. HTML, CSS и чистый JS, анимации прокрутки на GSAP ScrollTrigger из CDN. Требования: - первый экран с фоновым видео (muted, autoplay, loop, playsinline) и картинкой-заглушкой, пока видео грузится; - у каждого блока своя анимация появления, без дёрганий и без сдвига вёрстки; - на телефоне сайт выглядит так же хорошо: видео заменяется картинкой, тяжёлые эффекты отключаются; - картинки в WebP с lazy loading, видео сжато до 4 МБ; - кнопка главного действия видна на каждом экране. Шаг 5. Самопроверка. Открой сайт, пролистай его на ширине 390 и 1440 пикселей и перечисли всё, что сломано или смотрится дёшево. Исправь и покажи итог.
Стоп после первых двух шагов важен. Если сразу дать Claude всё сделать, он потратит кредиты на визуалы для концепции, которая тебе не нравится.
С чего начать в соцсетях

Как довести до уровня студии

Первый вариант обычно хороший, но видно, что его собрала нейросеть. Четыре правки делают из него сайт, который хочется листать.

  1. Попроси убрать всё, что не работает на главное действие. Нейросеть любит добавлять лишние блоки, и страница теряет темп.
  2. Если визуалы разного стиля, скажи: «перегенерируй экраны 3 и 4 в свете и палитре первого экрана». Единый стиль и отличает студийный сайт.
  3. Проверь тексты глазами. Claude пишет гладко. Людям же нужна конкретика: цены, сроки, адрес, фото живых людей, если они есть.
  4. Открой сайт на своём телефоне. Если первый экран грузится дольше трёх секунд, попроси сжать видео сильнее или поставить вместо него картинку.

Что связка делает хорошо

Концепцию, палитру, раскадровку, фоновые видео, картинки в одном стиле, вёрстку с анимациями прокрутки.

Где нужен ты

Выбор направления, живые фото и тексты про твой бизнес, проверка на телефоне, домен и публикация.

Опубликуй сайт

Сайт получился одним файлом с папкой картинок, поэтому публикуется за минуту без хостинга и программиста.

  1. Попроси Claude упаковать index.html и папку assets в один zip.
  2. Зайди на app.netlify.com/drop и перетащи туда распакованную папку. Сайт получит ссылку сразу.
  3. Свой домен подключается там же в настройках сайта, когда захочешь.
Следующий шаг
Хочешь так же, но под свой блог и продукт?

Я собрал систему, по которой обычный человек запускает блог с нуля и набирает аудиторию без съёмок, монтажа и команды. Внутри разбор, с которого стартовал сам.

Открыть разбор: с чего начать→