scroll-craft — скилл для ИИ-агентов, который делает сайты, управляемые скроллом. При прокрутке видео идёт вперёд кадр за кадром, секции замирают на месте, пока их история продолжается, а заголовки собираются строка за строкой. Помимо движения, он следует строгим правилам шрифтов, отступов, цвета и глубины.
Проект открыт под лицензией MIT. Он работает с Claude Code, Codex и другими агентами, которые умеют читать инструкции, править файлы, запускать команды и смотреть в браузер. Есть и версия в виде плагина для Claude Code. На 24 октября 2026 года у репозитория было почти 4 000 звёзд на GitHub, а его README описывает версию 0.3.0.
Что он строит
- Скролл как таймлайн. Видео движется вместе с колёсиком мыши, секции закрепляются, ряды сдвигаются вбок, а цвет фона меняется по мере того, как вы спускаетесь по странице. Указатель мыши тоже может двигать элементы.
- Восемь стилей страниц: например, фильм одним кадром, журнал по главам, постер, галерея или разделённая сцена. Каждый запрещает то, что требуют другие, чтобы два сайта постепенно не превратились в одну и ту же страницу.
- Один фирменный ход. Каждый сайт получает своё взаимодействие, которого нет ни у одного другого сайта.
- Проверка на повторы. Новый сайт должен отличаться от ваших прежних минимум по четырём пунктам из шести, например по стилю страницы, навигации, началу и концовке.
Правила дизайна
- Перед сборкой он пишет по строке на каждую секцию: какое чувство она должна вызвать и что на экране его вызывает.
- Одна запланированная кульминация. У страницы один пик, и на него приходится больше всего прокрутки и лучшие изображения.
- Правила шрифтов: не больше двух семейств шрифтов и длина строки от 45 до 75 символов.
- Шкала отступов на основе 4 пикселей: над заголовком места больше, чем под ним, а на телефоне отступы меньше.
- Цвета с закреплёнными ролями и один акцентный цвет, без чистого чёрного.
- Ваш брендбук главнее. Если дать ему правила бренда, они важнее его собственного вкуса.
- Список того, что он отказывается делать: одинаковые сетки карточек, градиентный текст, фальшивые дашборды, фиолетовые ИИ-градиенты и выдуманная статистика.
Как он проверяет свою работу
Браузер без окна прокручивает готовую страницу, в каждой позиции ждёт, пока видео остановится, и сообщает о проблемах:
- Прокрутка, при которой на экране ничего не меняется.
- Текст, который так и не становится полностью видимым.
- Текст с недостаточным контрастом — его измеряют построчно по самому яркому кадру, который проходит за ним.
- Видеоклип, который так и не загрузился и показывает только первый кадр.
Затем он делает контактный лист из скриншотов, потому что машина может доказать, что страница работает, но не может сказать, есть ли в ней смысл.
Что стоит знать заранее
По словам авторов, его запускали только на Windows. Скрипты ищут FFmpeg и Chrome и в путях macOS и Linux, но на Mac ещё ни один сайт не собирали. Нужны Node.js 18 или новее, полная сборка FFmpeg и playwright-core с Chrome для проверок. KIE_AI_API_KEY нужен, только если вы хотите, чтобы он генерировал изображения или видео, а это стоит денег. Страница из ваших собственных фото и видео ничего не стоит.
Он намеренно упрям. Он откажется от макетов и цветов, по которым легко узнать ИИ-страницу, и будет спорить с вами о кульминации вашей страницы.
Как установить
В Claude Code добавьте маркетплейс и установите плагин:
/plugin marketplace add nateherkai/scroll-craft
/plugin install nateherk-designЗатем опишите нужный сайт или вызовите его напрямую:
/nateherk-design:scroll-craftЕсли установщик попросит, выполните /reload-plugins. В Codex скопируйте всю папку scroll-craft из plugins/nateherk-design/skills/ в репозитории в папку .agents/skills/ вашего проекта и попросите Codex использовать этот скилл. Перед первой сборкой запустите скрипт doctor, который идёт вместе со скиллом: он находит типичные проблемы настройки.