🎯 О чём этот конспект:
Разбор кастомного скилла ScrollCraft для Claude Code, который превращает скучные шаблонные веб-страницы в интерактивные премиальные лендинги со скролл-анимациями. Автор показывает архитектуру скилла: пошаговое интервьюирование пользователя, генерацию медиа-ассетов через Key.ai, автономную проверку визуала скриншотами и тонкую настройку микро-взаимодействий.
👤 Кому будет полезно:
Вайбкодерам, фронтенд-разработчикам, дизайнерам и владельцам digital-продуктов, которые создают сайты с помощью Claude Code и хотят уйти от типичного «AI-slop» дизайна к уровню премиальных веб-студий.
✨ Что получите:
Готовый пайплайн создания интерактивного сайта: структуру скилла ScrollCraft, сценарий брифования нейросети, связку с генератором ассетов Key.ai и методы итеративной доработки скролл-эффектов.
1. Концепция ScrollCraft: отказ от шаблонного «AI-Slop» в пользу скролл-сторителлинга
Контекст: Большинство сайтов, сгенерированных современными нейросетями (Claude, ChatGPT, v0), выглядят как типичные шаблоны: статичные колонки, предсказуемые карточки и безликая типографика. Пользователь теряет интерес в первые 3 секунды, если сайт не вовлекает его в динамическое повествование. Подход ScrollCraft построен на идее «scroll-driven interface», где каждое движение колеса мыши управляет происходящим на экране: масштабирует 3D-сцены, раскрывает списки, меняет данные или запускает видеоряды. Пользователь не просто читает текст, а физически управляет ходом истории компании или продукта. В отличие от жестких шаблонов, этот метод адаптирует механику анимаций под конкретный тип бизнеса — от физических товаров до консалтинга и образовательных платформ.
Тайминг: , ,
Выгода: Резкое увеличение глубины просмотра и конверсии страницы за счёт удержания внимания, сопоставимого с механикой коротких видео (reels/shorts), без ручного написания сложных CSS/JS анимаций.
Как применить:
- Шаг 1: Подготовка окружения — Запустите Claude Code Desktop на рабочей машине и настройте рабочую директорию проекта лендинга.
- Шаг 2: Установка скилла ScrollCraft — Поместите файлы конфигурации скилла в локальную папку проекта или установите его как плагин Claude Code.
- Шаг 3: Активация навыка — Вызовите скилл прямой командой в терминале или интерфейсе Claude Desktop:
claude
/skill scrollcraft- Шаг 4: Формулировка дизайн-намерения — Задайте Claude базовый контекст: редизайн текущего URL, создание сайта с нуля или перенос готового контента в интерактивный скролл-формат.
Результат: Claude Code инициализирует дизайн-систему, нацеленную на синхронизацию скролла с UI-элементами (Scroll-Driven Animations API / Framer Motion / GSAP), а не на генерацию плоской верстки.
2. Архитектура брифа: проектирование пути пользователя через структурированное интервью
Контекст: Нейросеть выдает банальный результат, если получает размытый промпт вроде «сделай красивый современный сайт». ScrollCraft заставляет Claude Code работать в роли арт-директора и UX-исследователя: процесс начинается с обязательного структурированного интервью. Скилл задает вопросы не о сетке или кнопках, а об эмоциях, контрольных точках убеждения и контрасте темпа страницы. Важнейшая концепция — определение «signature move» (фирменной фишки, которой нет у конкурентов) и баланса между спокойными информационными блоками и визуально плотными интерактивными кульминациями. Это позволяет нейросети собрать контекст до написания первой строчки кода.
Тайминг: , ,
Выгода: Полное исключение галлюцинаций по структуре страницы; лендинг закрывает реальные бизнес-цели и ведёт посетителя к целевому действию по выверенной психологической траектории.
Как применить:
- Шаг 1: Ответ на вопросы о пользовательском пути (Scroll Journey) — Определите, с чего начинается знакомство с продуктом: статистика, личная история основателя или демонстрация продукта.
- Шаг 2: Фиксация ключевого убеждения (Core Belief) — Сформулируйте в одном предложении, в чем посетитель должен быть уверен к моменту скролла до футера.
- Шаг 3: Выбор «Signature Move» — Задайте уникальное интерактивное действие, например: «Каждое утверждение на странице открывает верифицированное доказательство по мере скролла».
- Шаг 4: Разметка эмоционального ритма — Укажите Claude, где страница должна быть спокойной (editorial/reading), а где интенсивной (interactive dynamic).
# Пример входных параметров для интервью ScrollCraft:
- Journey Order: Hero (Live Data) -> Proof Receipts (Numbers) -> Community (Live Zoom) -> Cohorts -> Founder Story -> CTA
- Core Belief: "AIS — это единственный практический хаб, готовящий специалистов к новой эре автономной работы на реальных кейсах"
- Assets: Реальные скриншоты звонков, фото фаундера, логотипы. Недостающие — сгенерировать в стиле low-poly minimalism.
- Signature Move: Интерактивный счетчик пруфов (0/9 sources unlocked) по ходу вертикального скролла.
- Pacing: Спокойный журнал (editorial) в тексте, интерактивный взрыв в блоке карты глобального охвата.Результат: Сформированное техническое задание с детальной раскадровкой скролл-триггеров, привязанное к фирменному стилю и маркетинговым целям.
3. Автономная генерация медиа-ассетов через Key.ai
Контекст: Качественному интерактивному лендингу требуются десятки уникальных ассетов: фоновые 3D-сцены, продуктовые рендеры, видео-петли и тематические иллюстрации. Ручной подбор стоков или ручная генерация в Midjourney ломает темп вайбкодинга. ScrollCraft интегрирует платформу Key.ai (агрегатор генеративных моделей изображений и видео по аналогии с OpenRouter для LLM). Скилл самостоятельно определяет, каких ассетов не хватает в проекте, пишет промпты для генерации картинок, при необходимости анимирует их в короткие видео-лупы, сшивает фрагменты между собой и скачивает в папку проекта без участия разработчика.
Тайминг: , ,
Выгода: Полная автономия подготовки медиа-контента, экономия десятков часов на рутинной графике и идеальное стилистическое попадание под палитру бренда.
Как применить:
- Шаг 1: Регистрация и получение ключа — Создайте аккаунт на
key.aiи сгенерируйте API-токен с доступом к моделям генерации картинок и видео. - Шаг 2: Настройка переменных окружения — Добавьте ключ в конфиг проекта или глобальный
.envдля Claude Code:
export KEY_AI_API_KEY="your_api_key_here"- Шаг 3: Передача инструкций по стилю — Укажите Claude правила генерации: цветовую гамму, стиль графики (например, минималистичный low-poly, изометрия или 3D-рендеры банок/упаковки) и соотношение сторон.
"Для недостающих секций сгенерируй ассеты через Key.ai:
Стиль: Minimalistic geometric low-poly human figures.
Цвета: Строго по гайдлайну AIS (глубокий синий, графитовый, акцентный голубой).
Сюжеты: Обучение, совместная работа, экраны кода.
Формат: Создай статичные изображения и переведи их в короткие зацикленные видео для скролл-контейнеров."Результат: Папка проекта автоматически наполняется релевантными изображениями и MP4-роликами, оптимизированными под веб и готовыми к вызову через теги <video> или canvas.
4. Визуальный QA-контроль: автоматическая верификация кейфреймов скриншотами
Контекст: Главная беда веб-кодинга через ИИ — агент часто пишет код, который компилируется, но визуально выглядит сломанным: текст налезает на картинку, z-index скрывает кнопки, анимация дергается или выходит за границы viewport. ScrollCraft решает это с помощью встроенного проверочного харнесса (Verification Harness). После сборки страницы Claude Code Desktop запускает headless-браузер, прокручивает страницу по ключевым точкам (кейфреймам), делает серию скриншотов каждого экрана и скролл-состояния, а затем отправляет эти изображения себе на вход для визуальной инспекции перед сдачей работы пользователю.
Тайминг: ,
Выгода: Устранение 90% визуальных багов и проблем верстки на первом же прогоне, отсутствие необходимости вручную отлавливать наложения блоков.
Как применить:
- Шаг 1: Активация модуля верификации — Убедитесь, что скилл имеет право выполнять shell-команды для снятия скриншотов (Puppeteer / Playwright).
- Шаг 2: Процесс автономной инспекции — Во время сборки Claude выводит статус:
zooming into key frames: inspecting screenshots. Не прерывайте процесс.
- Шаг 3: Анализ отчета самопроверки — Claude сопоставит полученные рендеры с ТЗ, выявит сломанные отступы или некорректную прозрачность и внесет правки в CSS/JS код до демонстрации результата.
# Внутренний пайплайн харнесса, исполняемый агентом:
npm run build && npm run preview
npx playwright screenshot --full-page output/scroll-flow.png
# Агент анализирует keyframe-1.png, keyframe-2.png и фиксит CSSРезультат: Готовый локальный билд на localhost, где проверены наложения слоев, адаптивность и видимость элементов при скролле.
5. Интеграция живых данных и динамических «пруфов» (Social Proof Receipts)
Контекст: Статичные заявления на лендингах («нас выбирают тысячи», «мы лидеры рынка») больше не вызывают доверия. В демонстрационном примере автор показал, как Claude Code самостоятельно нашел актуальные данные сообщества автора, спарсил точные цифры участников (44 150+ на момент генерации), вытащил скриншоты побед в лидербордах и построил вокруг этого концепцию «Sourced Claims». По мере прокрутки страницы слева отображается интерактивный счетчик источников (0/9 sources unlocked), превращающий чтение сайта в интерактивный аудит фактов.
Тайминг: , ,
Выгода: Резкий рост доверия к бренду; сайт превращается из рекламного буклета в интерактивный верифицированный отчет.
Как применить:
- Шаг 1: Подключение источников данных — Дайте Claude доступ к сайту, документам или открытым страницам вашего проекта для сбора актуальной фактуры.
- Шаг 2: Реализация логики интерактивного счетчика — Поручите агенту связать скролл-триггеры секций с состоянием глобального счетчика доказательств.
// Концептуальная логика отслеживания пруфов через IntersectionObserver
const sources = document.querySelectorAll('[data-source-id]');
const counter = document.getElementById('source-counter');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('unlocked');
updateUnlockedCount();
}
});
}, { threshold: 0.6 });
sources.forEach(el => observer.observe(el));- Шаг 3: Оформление ссылок на первоисточники — Настройте каждый блок так, чтобы по клику открывалось реальное подтверждение (скриншот лидерборда, ссылка на комьюнити, выписка).
Результат: Интерактивный блок пруфов, где пользователь своими глазами видит документальное подтверждение каждого тезиса.
6. Итеративная полировка: калибровка таймингов, темпа и микро-анимаций
Контекст: Первый драфт от нейросети почти всегда требует калибровки скорости и контраста. В видео первоначальная анимация наполнения глобальной карты пролетала слишком быстро при стандартной прокрутке колесом мыши, а первый экран (Hero) выглядел недостаточно кинематографично. Вайбкодинг эффективен тогда, когда обратная связь дается не техническим языком («измени transition-duration на 400ms»), а через описание пользовательского опыта и метафоры («сделай первый экран похожим на обложку глянцевого журнала», «замедли анимацию карты в 3 раза, чтобы успеть рассмотреть точки»).
Тайминг: , , ,
Выгода: Быстрое доведение прототипа до коммерческого уровня за 1-2 текстовые итерации без ручного копания в коде анимаций.
Как применить:
- Шаг 1: Анализ темпа первого билда — Откройте
localhostи проверьте скролл на реальной мыши и тачпаде. Зафиксируйте секции, которые сменяются слишком быстро или затягивают скролл. - Шаг 2: Формирование пачки правок (Batch Feedback) — Соберите все замечания в один емкий запрос:
Внеси следующие правки в интерфейс:
1. Hero Section: Переделай в стиле интерактивной журнальной обложки (Magazine Cover) с плавным входом при загрузке.
2. Карта охвата: Замедли скорость скролл-анимации в 2.5 раза. Пользователь должен четко видеть, как точки и линии связи постепенно заполняют глобус по мере движения колеса мыши.
3. Секция отзывов: Добавь эффект typewriter для заголовка и поочередное плавное появление аватаров участников звонка.
4. Удаление лишнего: Полностью убери блок регистрации (Register), он перегружает страницу.
5. Ссылки: Замени заглушку кнопки сертификации на актуальный URL листа ожидания.- Шаг 3: Проверка обновленной версии — Запустите просмотр, убедитесь, что триггеры скролла не конфликтуют с нативной прокруткой страницы на мобильных устройствах.
Результат: Отполированный лендинг с плавным скролл-темпом, кинематографичным Hero-экраном и микро-анимациями раскрытия контента.
ScrollCraft в Claude Code: ответы на частые вопросы
В: Что такое ScrollCraft и чем он отличается от обычного промпта в Claude? О: ScrollCraft — это комплексный агентный скилл (набор инструкций, дизайн-эвристик и инструментов), который подключается к Claude Code. В отличие от стандартного промпта, скилл проводит структурированное интервью, автоматически генерирует медиа через API, запускает визуальный аудит интерфейса скриншотами и соблюдает строгие правила верстки скролл-анимаций.
В: Обязательно ли использовать Claude Code Desktop или подойдет обычный веб-чат Claude.ai? О: Автор рекомендует использовать Claude Code Desktop или CLI-версию Claude Code. Обычный веб-чат не имеет доступа к вашей локальной файловой системе, терминалу, запуску локального сервера для скриншотов и прямому вызову генеративных API вроде Key.ai.
В: Что делать, если у меня нет готовых фото и видео для продукта? О: Скилл изначально рассчитан на работу в условиях отсутствия ассетов. Благодаря связке с сервисом Key.ai агент сам сформирует промпты, сгенерирует недостающие картинки и смонтирует короткие циклические видеоролики под выбранную стилистику.
В: Сколько времени занимает создание такого лендинга с нуля? О: В видео полный цикл от запуска интервью до получения готовой рабочей первой версии занял около 30 минут автономной работы Claude Code. Итеративная полировка заняла еще 5–10 минут.
В: Не ломают ли такие скролл-анимации юзабилити на мобильных устройствах? О: Хороший скролл-интерфейс использует прогрессивное улучшение: на десктопе он привязан к скроллу и курсору, а на мобильных устройствах трансформируется в свайп-карусели или последовательно появляющиеся блоки, чтобы не блокировать нативный скролл страницы.
В: Какие библиотеки обычно используются внутри для реализации таких эффектов? О: Claude Code под управлением ScrollCraft использует комбинацию современного нативного CSS (Scroll-Driven Animations API), Tailwind CSS и JavaScript-библиотек вроде Framer Motion или GSAP в зависимости от выбранного стека (Next.js, Vite/React или чистый HTML/JS).
В: Можно ли использовать ScrollCraft для интернет-магазинов и физических товаров? О: Да, в видео автор продемонстрировал пример лендинга энергетического напитка Perk, где скролл управляет поочередным 3D-фокусом на банках с разными вкусами и их характеристиками.
ScrollCraft в Claude Code: инструменты и ссылки из видео
- Key.ai — Мультимодельная платформа генерации изображений и видео по API для интеграции в AI-пайплайны — упомянут в видео (
key.ai). - Claude Code Desktop / CLI — Автономный AI-агент для разработки от компании Anthropic — упомянут в видео.
- Skool Community автора (AI Automation Society) — Бесплатное сообщество, где выложены файлы скилла ScrollCraft и дополнительные материалы — ссылка в описании оригинального видео.
Конспект создан на основе видео «I Built The Ultimate Claude Web Design Skill (Scrollcraft)» канала Nathaniel Green. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=QUI6Ug4cHnE
