Анимированный лендинг за вечер

Агентства берут за анимированный лендинг десятки тысяч. Ты собираешь такой же за вечер: промпты MotionSites + Claude Code 🔥

Готовое решение: анимированный лендинг с живыми hero-секциями, градиентами и микроанимациями — без дизайнера, без вёрстки руками и без агентского ценника. Библиотека MotionSites даёт готовые промпты под каждую секцию, Claude Code собирает по ним страницу под твой продукт, Vercel/Netlify публикует бесплатно.

Боль по умолчанию: сам Claude Code пишет логику отлично, но «из головы» выдаёт скучный дизайн — плоские блоки, стоковые отступы, ноль движения. А красивый анимированный лендинг у агентства стоит как месячная зарплата. MotionSites закрывает ровно эту дыру: это библиотека выверенных промптов под анимированные секции. Ты не изобретаешь дизайн — ты его копируешь.

Что получишь на выходе

• Одностраничный лендинг с анимированным hero, секциями features / pricing / testimonials / CTA.
• Живые эффекты: движущиеся градиенты, glassmorphism, hover-анимации, плавные появления при скролле.
• Адаптив под мобилку и десктоп.
• Живой https-URL, который не стыдно кинуть клиенту в тот же вечер.
• Основу, к которой потом прикручивается оплата (см. связку landing-payments в базе).

Что понадобится

• MotionSites — библиотека промптов под анимированные секции (hero, pricing, testimonials и т.д.). Есть бесплатный тир: часть шаблонов открыта по кнопке Copy. Совместима с Claude, Cursor, Lovable, Bolt.
• Claude Code — собирает сайт по промптам и описанию продукта. Платный (подписка Claude или API-ключ); у тебя как у пользователя движка он уже есть.
• Vercel (или Netlify) — бесплатный хостинг статики/фронта. Публикация в пару команд, см. гайд deploy-static в базе.

Бесплатный путь: бесплатные Copy-шаблоны MotionSites + Claude Code + бесплатный тир Vercel/Netlify. Итог — 0 рублей на инструменты.

Быстрый путь: платный безлимит MotionSites (Go Unlimited — открывает все премиум-секции) + свой домен. Экономит время на подбор блоков и даёт «взрослый» адрес вместо *.vercel.app.

Пошагово

1. Собери бриф продукта. Инструмент: Claude Code (или блокнот). Действие: за 5 минут сформулируй, о чём лендинг, чтобы промпты секций легли на конкретику, а не на «Lorem ipsum».

   Готовый промт:

   Помоги собрать бриф для лендинга. Задай мне по одному вопросу и запиши ответы:
   1) продукт и одно предложение оффера,
   2) для кого (ЦА),
   3) 3 ключевые выгоды,
   4) тариф/цена и главный CTA,
   5) тон и палитра (например: тёмная, неон, техно).
   В конце собери всё в короткий бриф в формате Markdown.
   

   Как понять, что ок: у тебя есть 5–8 строк брифа с оффером, выгодами и CTA.

2. Выбери секции в MotionSites. Инструмент: MotionSites. Действие: открой разделы Sections / Templates, отбери блоки под свой лендинг (hero, features, pricing, testimonials, CTA), нажми Copy на бесплатных. Копируй промпт каждой секции к себе в заметку по порядку.

   Готовый промт (шаблон-чеклист, чтобы не потерять блоки):

   Секции лендинга сверху вниз:
   - Hero (промпт из MotionSites: <вставь>)
   - Логотипы/соцдоказательство
   - Features (промпт: <вставь>)
   - Pricing (промпт: <вставь>)
   - Testimonials (промпт: <вставь>)
   - CTA + футер (промпт: <вставь>)
   

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

3. Заведи проект и задай дизайн-систему. Инструмент: Claude Code. Действие: создай пустую папку, запусти Claude Code и попроси собрать каркас под единую палитру — до вставки секций, чтобы блоки не оказались в разных стилях.

   Готовый промт:

   Собери одностраничный лендинг: React + Vite + Tailwind, чистый статичный фронт без бэкенда.
   Вот бриф продукта: <вставь бриф из шага 1>.
   Сначала заведи дизайн-систему: тёмная тема, палитра <цвета>, скругления 2xl, современный шрифт,
   единые отступы. Пока сделай пустой каркас страницы с секциями-заглушками в этом порядке:
   hero, logos, features, pricing, testimonials, cta, footer.
   Подними локально и покажи команду запуска.
   

   Как понять, что ок: npm run dev открывает страницу с пустыми секциями в единой палитре.

4. Вклей секции по одной. Инструмент: Claude Code. Действие: бери промпт секции из MotionSites и проси встроить его в проект, сохраняя общую палитру и данные из брифа. По одной секции за раз — так проще ловить косяки.

   Готовый промт (повторяй для каждой секции):

   Реализуй секцию HERO по этому промпту, встроив её в текущий проект и палитру.
   Тексты возьми из брифа, не выдумывай новые факты. Анимации сохрани.
   Промпт секции:
   <вставь промпт из MotionSites>
   

   Как понять, что ок: секция появилась на странице, анимации играют, тексты — из твоего брифа, палитра не «съехала».

5. Дотачивай дизайн и адаптив. Инструмент: Claude Code. Действие: пройди по мелочам — мобилка, производительность анимаций, hover, доступность.

   Готовый промт:

   Пройди по лендингу и доведи до продакшена:
   - адаптив под мобилку (проверь, что ничего не разъезжается),
   - тяжёлые видео-фоны сделай lazy-load, добавь постер-заглушку,
   - уважай prefers-reduced-motion (отключай анимации, если пользователь их выключил),
   - выровняй отступы и типографику по единой шкале.
   Покажи, что изменил.
   

   Как понять, что ок: на телефоне блоки не ломаются, анимации не тормозят, всё в одной сетке.

6. Задеплой бесплатно. Инструмент: Vercel (или Netlify). Действие: собери прод-билд и опубликуй. Пошагово по командам — в базе есть гайд deploy-static.

   Готовый промт:

   Собери прод-билд (npm run build) и подготовь проект к деплою на Vercel:
   проверь, что билд проходит без ошибок, добавь нужные файлы конфигурации,
   и дай мне пошаговую команду для публикации через Vercel CLI.
   

   Как понять, что ок: получил живой https-URL, он открывается на телефоне и на десктопе, анимации работают.

Дальше по желанию: прикрути приём оплаты — в базе для этого есть связка landing-payments.

Бесплатный путь vs быстрый (платный)

Claude Code — платный в обоих путях (подписка/API), но он у тебя и так есть как у пользователя движка.

Частые проблемы и решения

• Блоки в разных стилях, «лоскутное одеяло». Задай дизайн-систему (палитра, скругления, шрифт, отступы) ОДНИМ промтом на шаге 3 — до вставки секций. Тогда каждый блок садится в общий стиль.
• Анимации тормозят на мобилке. Попроси Claude Code сделать тяжёлые видео-фоны lazy-load, добавить постер-заглушку и уважать prefers-reduced-motion.
• Видео-фон из промпта не грузится. Подложи своё видео/картинку и укажи fallback-постер — не полагайся на внешние ссылки из шаблона.
• Премиум-секция закрыта. Это нормально: бери бесплатные Copy-шаблоны, премиум опционален. Красивый лендинг собирается и на открытых блоках.
• Claude Code как будто «забывает» стек и переписывает по-своему. Заведи файл CLAUDE.md с зафиксированным стеком (React+Vite+Tailwind) и палитрой — и ссылайся на него, чтобы сборка не расползалась между шагами.
• Тексты «из головы» модели. В каждом промпте секции явно пиши «тексты бери из брифа, не выдумывай факты», иначе получишь красивый, но выдуманный оффер.

Сколько времени и денег займёт

• Время: вечер, ориентировочно 2–4 часа. Бриф и выбор секций — 20–30 минут, сборка и правки — основная часть, деплой — минуты.
• Деньги (бесплатный путь): 0 ₽ на инструменты — бесплатные шаблоны MotionSites + бесплатный тир Vercel/Netlify. Claude Code — платный (подписка Claude или API-ключ), но он у тебя уже есть.
• Деньги (быстрый путь): одноразовый безлимит MotionSites (Go Unlimited — лайфтайм-доступ; цену уточняй на сайте) + домен по желанию (цену смотри у регистратора).

Результат: анимированный лендинг уровня агентства — за вечер и, по сути, за 0 рублей на инструменты.