scroll-craft — навык для кодовых ИИ-агентов, которые собирают сайты с анимацией при прокрутке. Он задаёт агенту порядок работы: продумать структуру страницы, подготовить взаимодействия, собрать сайт и проверить его в браузере. Если вы устали получать от агента одинаковые лендинги с эффектами ради эффектов, здесь полезны не готовые шаблоны, а правила проектирования и проверки.
Как scroll-craft меняет работу агента над страницей
Навык для агента — это набор инструкций и сопутствующих файлов, которые агент читает перед задачей. В scroll-craft входят правила дизайна, справочные материалы, движок анимации, скрипты и средства проверки. Репозиторий рассчитан на Codex, Claude Code и других агентов, способных читать файлы, менять код, запускать команды и осматривать страницу в браузере. Это не MCP-сервер и не конструктор, где вы выбираете оформление одной кнопкой.
Основа подхода — прокрутка как временная шкала. По мере движения страницы видео может переходить от кадра к кадру, секция — оставаться на экране, пока меняется её содержание, а горизонтальная лента — двигаться в сторону. Навык также описывает появление строк заголовка, смену фона и реакции элементов на указатель. Не каждая страница обязана использовать все эти приёмы: агент должен подобрать их под задачу.
Чтобы сайты не получались одинаковыми, автор выделил восемь несовместимых «грамматик страницы». Под грамматикой здесь понимается способ выстроить рассказ: например, цельная кинематографичная сцена, редакционные главы, галерея или череда коротких эпизодов. Для каждого нового сайта навык требует придумать собственное взаимодействие и сравнить результат с предыдущими работами по шести признакам, включая навигацию, первый экран и завершение. Если совпадений слишком много, меняют план страницы.
Есть и правила для менее заметных вещей. Навык ограничивает число семейств шрифтов двумя, задаёт подход к длине строк, отступам, цветовым ролям и глубине изображения. Перед сборкой он предлагает описать эмоциональный ход страницы: что посетитель должен почувствовать в каждом эпизоде и какой элемент экрана это создаёт. В README также перечислены шаблонные решения, которых навык старается избегать, — от одинаковых сеток карточек до выдуманных статистических показателей.
Кому пригодится scroll-craft, а кому хватит обычного лендинга
Первый сценарий — вы делаете промостраницу через ИИ-агента и хотите, чтобы прокрутка помогала раскрывать продукт, а не только двигала картинки. Вместо общего поручения «сделай красиво» вы даёте агенту процесс: выбрать композицию, распределить акценты и проверить, что посетитель действительно увидит нужный текст и видео.
Второй сценарий — вы выпускаете несколько сайтов и замечаете, что агент повторяет одну структуру. Реестр предыдущих работ позволяет сравнивать новые страницы со старыми; у первого проекта этот реестр пуст. Третий — у вас уже есть фирменный стиль, фотографии или видео: README требует считать правила бренда исходными ограничениями, а собственные материалы допускает использовать без ключа для генерации.
Если вам нужна обычная статичная страница без сложной прокрутки, этот навык, скорее всего, лишний. Он также не подойдёт, если вы хотите оставить типовую сетку карточек и привычное оформление: автор прямо заложил отказ от ряда таких решений. Для задачи, где важнее быстро получить рабочую заготовку, чем выстраивать последовательность сцен, объём подготовки может оказаться неоправданным.
Установка для Claude Code и других кодовых агентов
Для Codex и других агентов сначала клонируйте или скачайте репозиторий scroll-craft. Полный навык лежит в plugins/nateherk-design/skills/scroll-craft/: переносите папку целиком, вместе со справочниками, скриптами, шаблонами и движком. Для Codex README предлагает скопировать папку scroll-craft в .agents/skills/ проекта и попросить Codex применить навык. У других агентов с поддержкой навыков путь зависит от их собственной документации.
Если агент умеет читать файлы, но не устанавливает навыки автоматически, оставьте репозиторий в рабочей папке и передайте ему инструкцию из README:
Read plugins/nateherk-design/skills/scroll-craft/SKILL.md and use it to build
my website. Follow the referenced design and verification workflow.Если репозиторий лежит во вложенной папке, путь в запросе придётся скорректировать. Для Claude Code предусмотрен отдельный плагин. Команды установки в README такие:
/plugin marketplace add nateherkai/scroll-craft/plugin install nateherk-designПосле установки можно описать агенту нужный сайт или вызвать навык напрямую:
/nateherk-design:scroll-craftЕсли при установке появится сообщение Run /reload-plugins to activate., выполните указанную в нём команду. Для работы над навыком без установки README даёт ещё один вариант:
claude --plugin-dir ./plugins/nateherk-designПеред первым запуском из корня репозитория автор просит выполнить проверку окружения и подготовку рабочей папки:
node plugins/nateherk-design/skills/scroll-craft/scripts/doctor.mjs
node plugins/nateherk-design/skills/scroll-craft/scripts/workspace.mjs --ensureЕсли вы перенесли навык в другое место, используйте путь к его папке scripts/. Скрипт doctor лучше запускать первым: по README он выявляет проблемы с ffmpeg и разрешением зависимости playwright-core, которые иначе проявятся позже как непонятные ошибки. Сами проекты сохраняются в <workspace>/builds/<name>/, а список признаков прошлых страниц — в <workspace>/FINGERPRINTS.md.
Что именно поручить агенту и какие результаты показаны в README
Самый конкретный пример ввода в README — приведённая выше просьба прочитать SKILL.md и построить сайт по инструкции. Агент получает не макет, а последовательность действий: собрать требования, выбрать устройство страницы, написать её код и провести проверку. Второй способ начать задачу в Claude Code — команда /nateherk-design:scroll-craft, после которой вы описываете желаемый сайт. Готовых текстов таких описаний README не приводит, поэтому выдавать выдуманный запрос за пример автора было бы неверно.
Зато README показывает, насколько разными могут быть результаты. Для AI Automation Society автор описывает тёмную страницу сообщества: главный числовой показатель, поверхность продукта в первом экране и доказательства ниже по прокрутке. Для портфолио Nate Herk выбран противоположный подход — светлая композиция с портретом, числами и двумя следующими шагами. PERKFORM, страница протеинового кофе, построена как кинематографичный эпизод с резкой сменой оформления посередине. Это примеры автора, а не обещание, что агент воспроизведёт их по короткой команде.
После сборки инструмент проверяет страницу через браузер без видимого окна. Он ищет участки прокрутки без изменений на экране, текст, который так и не проявился полностью, проблемы контраста на фоне движущегося изображения и видео, застрявшее на одном кадре. Затем создаёт лист кадров для просмотра человеком: автоматическая проверка помогает найти технические сбои, но не решает за вас, убедительна ли сама страница.
Зависимости, ограничения и состояние проекта
Для скриптов нужен Node 18+. Для подготовки видео, управляемого прокруткой, README требует полную сборку ffmpeg; для браузерной проверки — Chrome и playwright-core. Последний автор предлагает ставить в папке собираемого сайта:
npm i playwright-coreКлюч KIE_AI_API_KEY нужен только при генерации материалов. Если вы используете собственные фото и видео, по README он не требуется; это не отменяет требований к инструментам сборки и проверки. Скрипты также получают доступ к файлам проекта, запускают команды и открывают сайт в браузере — учитывайте это, прежде чем давать агенту рабочую папку с лишними данными.
Автор сообщает, что сборки выполнялись только на Windows. Скрипты ищут ffmpeg и Chrome также в расположениях macOS и Linux, но README не подтверждает собранный проект на Mac. Генерация видео может потребовать расходов; конкретную сумму источник не называет. Код распространяется по лицензии MIT, основной язык репозитория — JavaScript.
На момент обзора репозиторий создан 22 августа 2026 года, последний коммит датирован 30 сентября 2026 года; у проекта 3748 звёзд и 559 форков. Это молодой инструмент, а число звёзд не заменяет проверку на вашем сайте. Если вы уже ведёте фронтенд-проект в кодовом агенте и готовы просматривать результат по кадрам, scroll-craft даёт конкретный процесс. Если нужна страница без постановки сцен и браузерной проверки, начинать с него необязательно.