Русскоязычный проект: документация, интерфейс и подписи на готовой странице — на русском.
Плагин для Claude Code. Он делает странице героя, который листается скроллом: страница не проигрывает видео, а промотывает его кадры под колесо мыши — как на страницах Apple. Камера идёт по одному помещению и останавливается у каждой вещи, которую бизнес продаёт, а рядом всплывают его собственные настоящие фотографии.
Внутри два сценария:
- roomwalk — проход по помещению с остановками. Для бизнеса, у которого есть место и несколько категорий: мастерская, клиника, ресторан, зал, ателье, шоурум.
- exploded — один предмет на чёрном, который на прокрутке разлетается на части. Для бизнеса, у которого весь товар — одна вещь: часы, флакон, кроссовок, очки, инструмент.
Плагин делает страницу-героя, а не магазин целиком: каталог, карточки и корзина — отдельная работа.
После установки запускается /roomwalk:start. Начать можно двумя способами:
- Со ссылки на действующий сайт. Плагин читает его сам — категории, цены, сколько фотографий стоит за каждой, фразу, которую бизнес о себе повторяет.
- С описания словами. Тогда нужны две вещи: чем занимается бизнес, в одну фразу, и его фотографии реальных работ. Без фотографий страница не строится — на остановках нечего будет показать.
Дальше приходит план с ценой и три варианта, как может выглядеть помещение. Выбор одного из трёх — единственное решение, которое требуется от человека; всё остальное считается с сайта.
Claude Code, Python 3 и аккаунт Higgsfield с кредитами. Генерация платная — черновик обходится примерно в 25–80 кредитов.
На Windows Python ставится с python.org, и при установке нужна галочка «Add Python to
PATH». Команда там называется python или py, а не python3 — плагин это учитывает.
claude plugin marketplace add Aironzak/instagram
claude plugin install roomwalk@roomwalkДальше /roomwalk:connect — напечатает ссылку для входа в Higgsfield, — перезапуск
Claude Code, и /roomwalk:start.
Плагин для Claude Code, который делает сайту героя, листающегося скроллом: страница не проигрывает видео, а промотывает его кадры под колесо мыши — как на страницах Apple. Видео генерится через Higgsfield, режется на кадры локально и скрабится на канвасе.
Внутри два разных героя. Выбор между ними — не вопрос вкуса, а вопрос того, что именно вы продаёте.
roomwalk |
exploded |
|
|---|---|---|
| Предложение — это | ассортимент, в помещении | один предмет |
| Кому | столярка, клиника, ресторан, зал, ателье, детейлинг, цветы | часы, флакон, кроссовок, стул, инструмент, банка, лампа |
| Сегментов видео | 4–6, склеенных | один, вперёд и обратно |
| Швы | есть, и это самое трудное | нет вообще |
| Фон | освещённый интерьер | чистый чёрный, поэтому у героя нет края |
| Черновик | 60–80 кредитов | 25 кредитов (финал 1080p — 65) |
Чисто цифровому бизнесу (приложение, SaaS, инфопродукт) не подходит ни то, ни другое — скиллы об этом честно говорят и предлагают не делать.
Скопируйте это в Claude Code целиком, одним сообщением:
Поставь плагин roomwalk:
claude plugin marketplace add Aironzak/instagram, потомclaude plugin install roomwalk@roomwalk. Затем подключи Higgsfield — запусти в фонеconnect_higgsfield.pyиз плагина и дай мне ссылку для входа. После этого начни roomwalk и спроси у меня ссылку на сайт.
Он поставит себя сам, выдаст ссылку для входа в Higgsfield и задаст один вопрос. После входа Claude Code нужно один раз перезапустить, чтобы подтянулись инструменты Higgsfield.
Руками, если так привычнее:
/plugin marketplace add Aironzak/instagram
/plugin install roomwalk@roomwalk
/roomwalk:connect
/roomwalk:start
claude mcp login higgsfield не работает и работать не будет: в метаданных
Higgsfield заявлен issuer: https://mcp.higgsfield.ai, а редирект приносит
iss=https://clerk.higgsfield.ai от их же Clerk. Claude Code это справедливо
отвергает по RFC 9207, и флага отключить проверку нет. Их device-code сервер
fnf-device-auth.higgsfield.ai отдаёт 404 на всех адресах, так что и этот путь мёртв.
/roomwalk:connect обходит это: тот же authorization-code + PKCE, та же проверка
state, пропускается только сравнение iss — защита от подмены, которая имеет смысл,
когда клиент разговаривает с несколькими серверами, а здесь он ровно один и взят из
метаданных самого Higgsfield. Токен пишется в конфиг MCP статическим заголовком,
поэтому со временем протухает: --refresh обновляет без нового входа, --status
показывает, что настроено.
Альтернатива без скрипта — добавить https://mcp.higgsfield.ai/mcp через интерфейс
коннекторов на claude.ai. Работает так же.
| Higgsfield | аккаунт с кредитами и подключённый коннектор |
| Python 3 | python3 -m pip install --user pillow numpy imageio-ffmpeg. Работает на macOS, Windows и Linux; imageio-ffmpeg приносит свой ffmpeg, в систему ставить нечего |
| Свои фотографии | настоящие снимки работ. Без них слоя доказательства нет, и скилл откажется собирать |
| Кредиты | черновик прохода на пять остановок — 60–80, разборка — около 10 |
Вы даёте ссылку на сайт. Он его читает — категории, сколько фотографий за каждой, цены, фразу, которую про себя повторяют, — и возвращается с планом и ценой:
Посмотрел сайт. Мастерская делает столешницы (155 фото), подоконники (118), столы (55), шкафы (32) — всего 618 работ. Есть калькулятор с настоящими ценами: от 14 300 ₽/м².
Предлагаю проход по одной комнате: столешница → подоконник → откос → стол → шкаф, в конце шкаф открывается. На каждой остановке всплывают ваши настоящие фотографии.
Черновик 480p — около 70 кредитов, минут двадцать. Делаем так?
Вы говорите «да» — он собирает. Если сайт прочитать не удалось, он так и скажет и попросит два предмета взамен: что мастерская делает и несколько фотографий готовых работ. Гадать бизнес по доменному имени он не станет и без фотографий строить не будет.
Запирайте оба конца. У каждого перехода должны быть и start_image, и end_image.
Без якоря на выходе модель придумывает прибытие сама, и вылезают две классические беды:
в кадр вырастает предмет, которого не было, и камера разворачивается назад искать объект.
Цепляйтесь за настоящий хвост. Модель почти никогда не приходит ровно в якорь.
Следующий сегмент надо начинать с фактического последнего кадра предыдущего, а не с
чистенького якоря — тогда стык непрерывен по построению, а end_image всё так же
управляет прибытием.
Одна комната. Замерено на живой сборке: переходы внутри комнаты дают на стыке 1,07–1,86× от обычной покадровой разницы — не видно. Три перехода, уходившие в дверь во вторую комнату, порвались на 6,3×, 11,4× и 8,4×. Если категорий больше, чем помещается в одну комнату, лишние идут в каталог под героем, а не в проход.
Выравнивайте экспозицию. Модель по ходу переосвещает сцену — замеренный дрейф по
пяти сегментам был +15, +15, +1, −11, −37. На скорости воспроизведения незаметно, а под
медленным скроллом читается как «солнце появилось и ушло». stabilise_exposure приводит
это к +1,7, +0,8, +1,6, −0,7, −5,4, причём ограничитель оставляет по-настоящему тёмные
места тёмными.
Давайте движению больше скролла, чем остановкам. Интуиция здесь врёт наоборот. Задержка 1 против движения 3 — это 30 % скролла на остановки и 70 % на ход. Сделанное ровно наоборот заказчик первым делом назвал «залипающим».
Грузите прогрессивно и параллельно. Сначала каждый восьмой кадр по всей длине, потом плотнее, восемь запросов в полёте — и рисуйте ближайший загруженный кадр вместо пустоты. Последовательный загрузчик означает, что первую минуту скролл попадает в неприехавшие кадры и страница выглядит сломанной.
Не считайте нулевую ширину телефоном. Пока страница не разложена, innerWidth равен
нулю, и matchMedia('(max-width: 768px)') отвечает «да» — на десктопе движок брал каждый
второй кадр, а секция выходила вдвое короче. Ждать раскладку через requestAnimationFrame
нельзя: в скрытой вкладке он не вызывается вообще, и ожидание повисает навсегда. Правильно —
считать неизвестную ширину неизвестностью и по умолчанию идти полным набором.
Не прячьте текст ради появлялки без страховки. Если наблюдатель не отработает — вкладку свернули, браузер придушил таймеры, скрипт споткнулся, — читатель останется перед пустым экраном. Через две с половиной секунды показывайте всё, что ещё скрыто, чем бы это ни было вызвано.
120 кадров на 8-секундный сегмент. Шестьдесят — это 7,5 к/с, и при скрабе видно ступеньки.
9–10 пикселей скролла на кадр. Высота секции в экранах ≈ (кадров × 10 / высота окна) + 1.
Шестьсот кадров при окне 833 px — примерно 8 экранов. Те же кадры, растянутые на 15 экранов,
дают 28 px на кадр и заметно дёргаются.
Ритм не снимается камерой — он живёт в опции timeline. Генерите ровный проезд, а темп
задаёте пятью числами. Задержка 3 против хода 2 даёт примерно четырёхкратную разницу
скорости, и перенастройка не стоит новой генерации.
Предмет висит собранным на чёрном. Вы скроллите — он разбирается по своим осям и повисает деталями в пустоте.
Это одна-единственная генерация, у которой заперты оба конца: первый кадр — собрано, последний — разобрано. Мерить и чинить нечего, потому что сегмент один. Отсюда и цена в двадцать пять кредитов за черновик вместо семидесяти.
Чёрный фон — не стилистическое решение. У героя из-за него нет края: проход упирается в жёсткую линию, где кончается съёмка и начинается страница, и эта линия читается как стена. Здесь кадры растворяются в фоне, потому что фон тот же. Плюс большие плоские чёрные поля почти ничего не стоят в JPEG.
Проход идёт вперёд и обратно: pingpong подставляет тот же набор кадров задом наперёд,
предмет собирается обратно, сценарий удлиняется вдвое даром, и шва на развороте не бывает
по построению. Заканчивать страницу горкой деталей — странная нота, собранный предмет лучше.
Три вещи, которые решают результат:
Перечисляйте детали поимённо. «Разбери предмет» даёт осколки. «Безель, стекло, циферблат, платина механизма, задняя крышка» даёт взрыв-чертёж. Для столешницы — ламели, клеевые швы, шпонки, профиль кромки, слой покрытия.
Одна остановка — на пике. С обратным ходом timeline как раз нужен: одна задержка на
полностью разобранном состоянии и больше нигде. Ход 9 против паузы 2,5; перевес в сторону
паузы заказчик первым делом называет залипанием.
Текст живёт внутри разборки, а не под ней. Каждый абзац привязан к кадрам, на которых его деталь отделяется, и набран крупно: имя 44–48 px, текст 19–21 px. Тот же текст списком под героем превращает страницу в ролик с титрами — это первое, что было сказано про первую версию. Место под колонку добывается сдвигом кадра: замерьте, до какой доли ширины доходит предмет на всех кадрах, и сдвиньте кадр так, чтобы колонка осталась свободной. На чёрном сдвиг ничего не стоит — едет пустота.
Один слом подложки после героя. Одна светлая секция делает то, чего не делает ни одна рамка: читателю становится очевидно, что это сайт, а не фильм.
Помещение сгенерировано. Ваши фотографии — слой доказательства, и в подвале прямо написано, что интерьер это оформление, а не снимок вашего цеха.
Генерится обстановка, но никогда не результат. Комната, полка, стойка, стул, свет на поверхности — да. То, что вы продаёте, — нет:
- Ни лиц, ни тел, ни кожи. Для косметологии, медицины, стоматологии, фитнеса и эстетики это абсолютно. Сгенерированное «после» — сфабрикованное клиническое утверждение, и его реклама незаконна в большинстве юрисдикций независимо от дисклеймера.
- Никаких «до и после» в любом виде.
- Никакой сгенерированной еды под видом вашего меню.
- Никаких сгенерированных товаров с вашим брендом.
- Никаких сертификатов, дипломов, лицензий и наград в кадре.
Для exploded риск в самом предмете: если товар реальный и его можно купить, базовый
снимок должен быть вашим. Сгенерировать похожий и взорвать его — искажение: пропорции,
отделка, количество деталей окажутся не теми, а страница делает утверждение о существующей
вещи. Чужие бренды не генерятся вообще, даже для демо. Характеристики в таблице — только
из ваших данных.
Для регулируемого бизнеса герой показывает помещение и ничего больше, а все заявления и результаты на странице берутся из ваших собственных материалов. Посетитель, записавшийся на процедуру из-за отрисованного лица, — исход хуже, чем отсутствие героя.
Шестьсот кадров JPEG шириной 864 px — примерно 32 МБ. Для прототипа нормально, для
продакшена тяжело. WebP или AVIF снимают 30–50 %, более узкие кадры, растянутые
средствами CSS, — ещё больше, спрайт-атлас схлопывает количество запросов. Либо скрабьте
настоящий <video>: 30 секунд 1080p H.264 — около 4 МБ, вшестеро легче, ценой точности
перемотки в Safari.
MIT. Делайте что хотите, ссылка на источник приветствуется.