Как сделать анимированный сайт в Claude Code за вечер

Каждый день в Telegram-канале - что нового в вайб-кодинге: инструменты, приёмы, ошибки. Подпишись, чтобы быть в курсе.

Почему сайт от ИИ видно с первого экрана?

Ты просишь агента собрать посадочную страницу. Через сорок минут получаешь работающий сайт: секции на месте, адаптивная вёрстка есть, кнопки нажимаются. И почти сразу ловишь ощущение, что где-то это уже видел.

Причина механическая. Модель училась на огромном массиве готовых страниц, а в этом массиве был сильный перекос. Создатель Tailwind CSS Адам Уотан извинился за него публично.

Тысячи руководств и стартовых шаблонов скопировали этот цвет, выборку перекосило, и модель выучила, что кнопка бывает фиолетовой. Тот же механизм работает со шрифтом, скруглениями и тенями.

Мода на «ИИ-шный» вид при этом успела смениться. В документации навыка frontend-design Anthropic описывает уже другие облики.

В обсуждении на Hacker News про «слоп» в вёрстке корень проблемы сформулировали одной фразой: слоп получается, когда копировать нечего конкретного, и модель просто усредняет все веб-стили разом. Qt выглядит цельно ровно потому, что выглядеть иначе он не умеет.

«Слоп» тут - усреднённая машинная генерация без выраженного стиля.

Отсюда следует рабочий вывод: агенту нужна узкая грамматика вместо открытого задания. Если ты говоришь «сделай красиво», он берёт среднее. Если ты даёшь конкретную палитру, пару гарнитур и один опорный приём, он строит по ним.

Движение в этой картине - самый заметный признак. Статичная страница с идеальной типографикой всё равно читается как заготовка, потому что живые сайты дышат: элементы появляются по прокрутке, курсор что-то меняет, переходы между экранами не рвутся.

Что нужно, чтобы собрать анимированный сайт в Claude Code?

Разберу набор по частям, потому что вокруг цен тут много путаницы.

GSAP - библиотека анимаций, на которой построена заметная часть сайтов с наградами. Её купил Webflow в октябре 2024, и почти сразу пошли слухи, что всё стало бесплатным. Это неточность: тогда Webflow подтвердила сохранение действующих тарифов. Бесплатной библиотека стала в конце апреля 2025 с версией 3.13.

В релизе 3.13 отдельно указано, что бесплатными стали и раньше платные плагины вроде SplitText и MorphSVG, включая коммерческое использование. Актуальная версия на июль 2026 - gsap@3.15.0.

Бесплатно - ещё не открытый исходный код. Лицензия остаётся проприетарной, и в ней есть запрет - нельзя строить на GSAP визуальный редактор анимаций, конкурирующий с Webflow. Для сайтов, клиентских проектов и коммерции ограничений нет.

Навык frontend-design от Anthropic - это набор указаний, который меняет способ работы агента над интерфейсом. Описание из репозитория:

Внутри - метод в два прохода. Сначала агент собирает систему токенов: от четырёх до шести именованных цветов, гарнитуры минимум на две роли, схему вёрстки текстовыми набросками и один опорный визуальный приём страницы. Потом критикует собственный план против задачи. И только после этого пишет код.

Библиотека Meng To - github.com/MengTo/Skills, лицензия MIT, около 2 400 звёзд. Автор открыл её 7 июля 2026 постом в X.

В посте сказано про 75 навыков, в описании репозитория значится 78, а в самом дереве файлов на сегодня лежит 91. Автор об этом честно предупреждает: сверяться надо командой поиска по репозиторию, описание отстаёт.

Как заставить Claude Code перестать выдавать шаблон?

Начну с файла правил, потому что он работает при каждом запросе и ничего не стоит.

Автор разбора на Хабре под ником ab429 собрал блок, который называет ограждениями против шаблона. Логика простая: перечислить именно те решения, к которым модель сползает по инерции, и запретить их поимённо.

## Anti-Generic Guardrails

- Colors: Never use default Tailwind palette (indigo-500, blue-600).
  Pick a custom brand color and derive from it.
- Shadows: Never use flat shadow-md. Use layered, color-tinted shadows with low opacity.
- Typography: Never use the same font for headings and body. Pair a display/serif
  with a clean sans. Apply tight tracking (-0.03em) on large headings,
  generous line-height (1.7) on body.
- Gradients: Layer multiple radial gradients. Add grain/texture via SVG noise filter for depth.
- Animations: Only animate transform and opacity. Never transition-all.
  Use spring-style easing.
- Interactive states: Every clickable element needs hover, focus-visible,
  and active states. No exceptions.
- Spacing: Use intentional, consistent spacing tokens - not random Tailwind steps.
- Depth: Surfaces should have a layering system (base -> elevated -> floating).

Блок написан по-английски намеренно: модель точнее держит короткие технические указания на языке документации.

Строка про анимации стоит в списке запретов рядом с цветами и тенями, и это не случайность. Прозрачность на первом экране напрямую портит показатель скорости, к этому вернусь ниже.

Дальше навык. Официальные навыки Anthropic я ставлю через плагин:

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

Одна деталь: поштучно дизайн-навыки не ставятся, плагин example-skills приносит сразу все двенадцать. Если хочется только один, копируй папку руками - Claude Code подхватит её без перезапуска сессии:

git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/

Что ещё лежит в этом наборе и может пригодиться: theme-factory с десятью готовыми темами и обязательным подтверждением от человека перед применением, web-artifacts-builder для сборки на React с готовыми компонентами, algorithmic-art для генеративной графики. Про выбор навыков под задачу я подробно разбирал в отдельном материале - как выбрать skills для Claude Code.

Правила и навык работают в паре: правила запрещают плохое, навык навязывает процесс - сначала система, потом критика, потом код.

Всё существенное здесь происходит до запроса. Ты заранее кладёшь агенту в контекст рамки, по которым он будет строить, и формулировка самого промпта уже почти ничего не решает. Такой подход называется контекст-инжиниринг, а файл CLAUDE.md - его первый кирпич. На практикуме за три эфира ты собираешь всю связку целиком: ИИ-клон + Второй мозг + Контекст-инжиниринг. Она и превращает Claude из генератора среднего в инструмент, который держит твой стиль.

Практикум по вайб-кодингу

+Твой второй мозг

3 вечера - стек, метод, первый проект

Набор открыт

Записаться →

Где брать готовые визуальные направления и промпты под анимацию?

Категории «движение» в библиотеке Meng To нет, хотя в анонсе она упоминается. Анимационные навыки лежат внутри web-design вперемешку с остальными.

Приёмы движения, которые там есть: animation-on-scroll, gsap, gsap-scrolltrigger-storytelling, cinematic-gsap-lenis-motion-system, cinematic-scroll-storytelling, marquee-loop, masked-reveal, staggered-word-reveal, reveal-hover-effect, scroll-progress-timeline, scroll-scrubbed-visual-sequence, scroll-scrubbed-word-reveal, scroll-world-storytelling.

Тебе как непрограммисту ценнее другое - готовые визуальные направления. Вместо расплывчатого «сделай современно» ты берёшь одно из них и получаешь ту самую узкую грамматику, которой не хватало модели:

• clean-minimal-beige-light-mode - светлый бежевый минимализм
• dark-glass-clean-layout - тёмное стекло
• documentary-brutalist-agency - брутальный документальный стиль
• editorial-portfolio-chapters - портфолио главами, как в журнале
• orange-clean-paper-saas - бумажный сервисный сайт с оранжевым акцентом
• solar-duotone-bold - жёсткая двухцветка
• tech-green-dark-mode-modern - тёмная техно-схема с зелёным
• light-mode-paper-technical - светлая техническая бумага

Отдельно лежат технические навыки под объёмную графику и эффекты: threejs, matterjs, globe-gl, vantajs, unicorn-studio, progressive-blur, beautiful-shadows, css-border-gradient.

Команды установки в репозитории нет - автор честно пишет в разделе планов, что добавит её, когда устоится способ подключения. Единственное указание про Claude Code звучит так:

Практически я делаю так. В репозитории такой команды нет, это моя рекомендация:

git clone https://github.com/MengTo/Skills.git
cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/

Про платные библиотеки промптов скажу коротко, потому что вопрос всплывает. Сервис motionsites.ai продаёт набор готовых промптов под секции: на июль 2026 это 239 долларов в год либо 349 разово по акции вместо 759, помесячной оплаты нет. Автор не указан, страницы «о проекте» нет. Плюс рядом живёт сайт с почти таким же именем в единственном числе, и упоминание совместимости с Claude Code есть только на нём. На фоне бесплатной MIT-библиотеки Meng To я бы такую покупку не советовал, но про вариант знай.

Как отдать агенту свежую документацию GSAP одной строкой?

Обычная беда с анимационными библиотеками: агент помнит устаревший способ подключения. Пишет импорт по старому пути, регистрирует плагин так, как это делалось два года назад, и код не запускается.

Лечится это тем, что документацию кладёшь в контекст сам. GSAP отдаёт её в машинно-удобном виде:

https://gsap.com/llms.txt

Файл на сегодня весит около 25 килобайт. Каждая страница документации дополнительно доступна в markdown-версии - достаточно дописать .md к адресу.

В работе это выглядит так:

Прочитай https://gsap.com/llms.txt и https://gsap.com/docs/v3/Plugins/ScrollTrigger.md

Дальше собери на главной одну сцену: заголовок появляется по мере
прокрутки первого экрана, картинка справа сдвигается медленнее текста.
Используй только transform и opacity. Никакого transition-all.

У библиотеки Motion (бывшая Framer Motion) такой же файл есть и он ещё объёмнее. Motion распространяется по MIT и остаётся настоящим открытым исходным кодом, актуальная версия - motion@12.42.2. Если проект на React и нужны простые появления, я чаще беру Motion; если нужны сложные сцены по прокрутке, беру GSAP с плагином ScrollTrigger.

Есть и чисто браузерные варианты без библиотек. Переходы между состояниями страницы через View Transitions API вошли в базовую поддержку 14 октября 2025 - но только внутри одной страницы; версия для переходов между страницами в Firefox не поддерживается вовсе. Анимации по прокрутке средствами CSS в базовую поддержку пока не входят: Chrome умеет, Safari научился недавно, а в Firefox их надо включать вручную в настройках - то есть у обычного читателя они просто не сработают. Поэтому я прошу агента сначала проверить, умеет ли браузер это вообще, и если нет - оставить обычный переход.

Как превратить понравившийся чужой сайт в промпт?

Самый частый способ объяснить, чего ты хочешь, - показать пример. С агентом это не работает напрямую: он не видит сайт, он видит текст.

Навык video-to-superprompt закрывает разрыв. Описание из репозитория: превратить видеообразец в подробный промпт для воссоздания или вдохновения. Внутри - разбор записи по слоям: сюжет, вёрстка, движение, типографика, объёмная графика. На выходе один готовый промпт.

Главное правило там сформулировано жёстко:

Второй навык, html-to-interaction-prompts, работает с исходным кодом: ищет в нём всё, что двигается - реакцию на курсор, объёмную графику, эффекты по прокрутке, слои, которые едут с разной скоростью, - и раскладывает страницу на отдельные промпты - по одному на секцию, кнопку, наведение, эффект. Его принцип: считать поведение исходника истиной и не додумывать эффекты по скриншоту, когда доступен код.

Третий, stitched-full-page-capture, чинит бытовую боль. Обычный снимок всей страницы на сайтах с ленивой загрузкой и объёмной графикой выходит серым и пустым, потому что съёмка происходит раньше отрисовки. Навык прокручивает страницу по экранам, ждёт, пока всё осядет, и сшивает результат.

Есть и путь без записи экрана - подключить к агенту библиотеку живых образцов интерфейсов через MCP. Официальный сервер Mobbin ставится одной командой:

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

После этого нужно открыть новую сессию, выбрать сервер в списке и пройти авторизацию в браузере. Агент получает доступ к скриншотам реальных работающих приложений: заявлено более 621 500 экранов. Это именно снимки готовых продуктов, не компоненты и не код. Важная оговорка: на бесплатном тарифе Mobbin этот сервер не работает, он доступен на платных планах (проверено в июле 2026). Про подключение внешних сервисов к агенту у меня есть отдельный разбор про Google Stitch, где дизайн-система приезжает в Claude Code тем же способом.

Пошагово: анимированный сайт за вечер

1. Заведи проект

   Если проекта ещё нет, начни с пустой папки. Создай её, открой в терминале и запусти там claude. Первым запросом попроси каркас: «собери каркас одностраничного сайта для моего бизнеса (опиши какого), чистый HTML и CSS, без библиотек». Появится набор файлов - это и есть корень проекта, дальше всё происходит в нём.

2. Положи правила в CLAUDE.md

   Скопируй блок Anti-Generic Guardrails в файл CLAUDE.md в корне проекта. Если файла нет, попроси агента его создать. Правила написаны под Tailwind: если каркас у тебя на чистом CSS, скажи агенту «примени эти принципы к обычному CSS» - смысл правил от этого не меняется. Про то, как устроен сам файл и что ещё в него класть, у меня есть разбор четырёх правил Карпатого.

3. Поставь навык frontend-design

   Через плагин example-skills или копированием папки frontend-design - оба способа выше. Проверить, что навык подхватился, можно командой /doctor.

4. Выбери одно визуальное направление

   Из библиотеки Meng To. Не два и не три - одно. Смешивание брутального документального стиля с бежевым минимализмом даёт ровно то усреднение, от которого ты уходишь. Названия папок описательные, но глазами их не посмотреть: открой SKILL.md внутри понравившейся и прочитай описание палитры и гарнитур - там всё словами.

5. Собери статичную страницу

   Без единой анимации. Сначала должны встать типографика, отступы и сетка. Попроси агента запустить локальный просмотр и открой адрес, который он выдаст. Чтобы посмотреть с телефона, скажи «запусти так, чтобы открывалось с других устройств в моей сети», и агент подскажет адрес.

6. Добавь одну сцену движения

   Одну. Обычно это первый экран: заголовок проявляется, фоновый слой сдвигается медленнее переднего. Отдай агенту llms.txt библиотеки и опиши сцену конкретно - что, куда, за сколько миллисекунд. Первый экран прозрачностью не трогай, про это ниже отдельный раздел.

7. Добавь правило для уменьшенного движения

   Три строки стилей из раздела про доступность. Делается до публикации, потому что потом про это забывают все.

8. Опубликуй и проверь скорость

   Публикуй на любой бесплатный хостинг статики - Vercel, Netlify или GitHub Pages. Попроси агента: «опубликуй этот проект на Vercel и дай ссылку». Только после публикации прогони полученный адрес через PageSpeed Insights: сервис работает с публичными адресами и локальную страницу не увидит. Смотри на «Largest Contentful Paint» - это и есть время отрисовки крупнейшего элемента, зелёная зона до 2,5 секунды.

Шестой шаг - тот, на котором проще всего испортить работу предыдущих пяти.

Почему лишние анимации выдают ИИ ещё сильнее?

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

Это написано в том самом навыке frontend-design, который ты поставил, чтобы дизайн стал лучше. Anthropic предупреждает о переборе в инструменте, который агент использует для украшения.

Там же перечислены другие приёмы-заготовки: крупное число с мелкой подписью и градиентным акцентом как стандартный ответ на любую задачу; нумерация блоков вида 01 / 02 / 03, уместная только если это действительно последовательность.

Как выглядит перебор на практике. Агент получает задачу «добавь анимации» и вешает появление по прокрутке на каждую секцию: заголовок выезжает, три карточки всплывают по очереди, отзывы выплывают сбоку, подвал проявляется. Каждый эффект по отдельности нормальный. Вместе они дают страницу, которая непрерывно шевелится и ничего не подчёркивает.

Живой сайт устроен иначе: одна поставленная сцена, обычно на первом экране, и дальше сдержанность. Движение работает как ударение - оно имеет смысл, пока падает на одно слово.

Отсюда правило для промпта. Формулируй так: «сделай одну сцену на первом экране, остальное оставь статичным». От «добавь анимации» это отличается несколькими словами, а по результату - на порядок.

Как анимации убивают скорость сайта?

Три показателя, по которым Google оценивает страницу: время отрисовки крупнейшего элемента - не больше 2,5 секунды, отзывчивость на действие - не больше 200 миллисекунд, смещение вёрстки - не больше 0,1. Измеряются они по семьдесят пятому проценту реальных посещений.

Браузер при выборе крупнейшего элемента исключает из кандидатов элементы с нулевой прозрачностью - невидимые пользователю. Специалист по скорости из DebugBear Мэтт Зойнерт формулирует так:

Разверну, почему это важно именно здесь. Агент по умолчанию собирает появление так: вешает нулевую прозрачность на секцию и снимает её, когда секция попадает в поле зрения. Если такое появление досталось первому экрану, картинка может быть полностью загружена и распакована, а показатель всё равно не засчитается, пока не начнётся отрисовка. Хуже, если прозрачность снимается скриптом после загрузки - тогда показатель ждёт весь скрипт целиком.

Я лечу это двумя способами. Либо начинаю проявление не с нуля, а с небольшой ненулевой прозрачности, чтобы первая отрисовка засчиталась. Либо вообще не трогаю прозрачность на первом экране и анимирую только сдвиг.

Второй пласт - что дёшево анимировать, а что дорого.

По-человечески: браузер собирает картинку слоями, и сдвиг со сменой прозрачности делает на последнем, самом дешёвом шаге. Всё остальное заставляет его пересчитывать страницу заново. Замеры из той же документации: анимация через смещение сверху и слева даёт 37 миллисекунд на вёрстку и 79 на отрисовку, тот же визуальный эффект через трансформацию - нули по обоим.

И тут вылезает противоречие, которое я держу в голове: прозрачность дёшева для композиции, но дисквалифицирует элемент из показателя скорости. Так что дешёвая для браузера анимация и безопасная для скорости - это про разное.

Отдельно про свойство will-change, которое агенты обожают расставлять «для оптимизации». Документация MDN говорит обратное:

Там же сказано: свойство задумано как последнее средство против уже существующих проблем со скоростью. Профилактикой оно не работает. Строка вида will-change: transform, opacity на полусотне элементов - типичный след генерации.

Со смещением вёрстки история спокойнее. Документация Google не винит анимации, наоборот: аккуратные переходы помогают обновлять содержимое, не пугая читателя. Рецепт тот же - менять масштаб через трансформацию вместо ширины и высоты, двигать через сдвиг вместо координат.

Что делать с теми, кому движение физически вредит?

Этот раздел я держу не из вежливости. Аудитория, которая покупает у предпринимателя, - как раз люди сорока лет и старше.

По данным организации vestibular.org, которые приводит проект A11Y, до 35% взрослых в возрасте от сорока лет в США сталкивались с той или иной формой вестибулярной дисфункции. Консорциум W3C описывает последствия без смягчений: тошнота, мигрень, вплоть до необходимости отлежаться.

Я закрываю это тремя строками стилей:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Три момента, на которых я сам спотыкался.

Анимацию пиши как поведение по умолчанию и отключай внутри этого правила - так страница деградирует безопаснее, чем если строить наоборот.

Спецификация говорит про «убирает, уменьшает или заменяет» - полное отключение там даже не первый вариант. Замена резкого выезда коротким проявлением работает лучше, чем полный обрыв: тотальное отключение анимаций ломает индикаторы загрузки и полосы прогресса.

То же правило я дублирую в коде: таймлайны GSAP и Motion про CSS-медиазапрос не знают.

const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches

У GSAP для этого есть встроенный механизм gsap.matchMedia().

Есть и формальный критерий доступности, я про него помню отдельно. Правило WCAG 2.2.2 базового уровня требует: если что-то движется, мигает или прокручивается автоматически, длится дольше пяти секунд и показывается рядом с другим содержимым - у человека должна быть возможность это остановить. Под это попадают автокарусели и бесконечные бегущие строки, которые агент вставляет охотно.

Семь мест, где это разваливается

1. Первый экран спрятан за проявлением. Элемент с нулевой прозрачностью не считается кандидатом на показатель отрисовки. Самая дорогая ошибка, потому что бьёт по показателю, который влияет на позиции в поиске.

2. Анимировано всё подряд. Каждая секция въезжает, каждая карточка всплывает. Anthropic прямо пишет, что это усиливает ощущение генерации.

3. Перехват прокрутки. Когда сайт подменяет обычное поведение колеса мыши на свою «кинематографичную» логику. Исследование Nielsen Norman Group высказывается однозначно:

В том же исследовании большинство участников испытали как минимум лёгкую дезориентацию.

4. Анимируются свойства вёрстки. Координаты и размеры вместо трансформаций. 37 и 79 миллисекунд против нулей.

5. Слишком длинные анимации. Исследователь той же группы Пейдж Лаубхаймер:

Рабочий диапазон по его данным - от 100 до 400 миллисекунд, причём 400 уже очень медленно и годится только для крупных движений. Агент по умолчанию любит ставить секунду.

6. Нет правила для уменьшенного движения. Агент не добавит его сам.

7. Сайт с каждым действием тормозит всё сильнее. Специфично для React: анимация, созданная без привязки к элементу и без очистки, множится при каждом обновлении компонента. Страница постепенно начинает тормозить без видимой причины.

Есть и восьмая ловушка, про которую предупреждает автор разбора на Хабре. Приём «агент делает снимок экрана и правит по нему» отлично работает на статике, а на анимированных элементах загоняет агента в бесконечный цикл правок: он видит промежуточный кадр, считает это ошибкой, чинит, снова видит промежуточный кадр. Плюс каждый снимок экрана съедает контекст.

Сколько это стоит и как не сжечь месячный лимит за один сайт

Типичная история из англоязычных сообществ вайб-кодеров: человек собирает эффектную страницу с прокруткой сквозь космос, выкладывает результат, и в обсуждении выясняется, что на один этот сайт ушла вся месячная квота.

Это закономерно. Анимации дороже обычной вёрстки по нескольким причинам сразу. Результат нельзя проверить чтением кода, нужны итерации. Каждая правка тянет за собой перечитывание файлов. А цикл со снимками экрана на движущихся элементах добавляет заходов на пустом месте.

Что помогает.

Собирать по одной сцене и фиксировать результат. Запрос «добавь анимации по всему сайту» одним заходом - гарантированный перерасход. Проверку снимками экрана на анимированных блоках я выключаю и смотрю глазами. CLAUDE.md держу коротким, чтобы правила не съедали контекст в каждом запросе. И заранее отдаю агенту llms.txt библиотеки, иначе он сочинит устаревший способ подключения и потом будет отлаживать собственную выдумку.

Отдельно про то, куда вообще уходят токены при работе с проектом, я разбирал в материале почему Claude Code перечитывает весь проект, а способы удержать расход - в разборе как не сжечь лимиты Claude Code.

Что дальше

Собери первую страницу по восьми шагам сборки. Возьми одно визуальное направление, сделай одну сцену на первом экране, прогони через проверку скорости.

Полная схема по вайб-кодингу за вечер: ИИ-клон + Второй мозг + Контекст-инжиниринг. 3 эфира, записи остаются у тебя.

Практикум по вайб-кодингу

+Твой второй мозг

3 вечера - стек, метод, первый проект

Набор открыт

Записаться →

Новые материалы - дайджестом, без спама

Гайды выходят регулярно. Подпишись, чтобы не пропускать: пришлю подборку в Telegram или на email. Раз в неделю или каждый день - выбираешь сам.

Подписаться в Telegramили на email