Если вставить в нейронку «сделай красивый лендинг», получишь дженерик. Фиолетовый градиент, круглые кнопки, прозрачное стекло. Видно за километр, что это собрала ИИ.
Чтобы получить премиум-результат, нужны премиум-промпты. С точными вводными: какие шрифты, какие анимации, какое поведение видео-фона, какой crossfade. Я нашёл место, где такие промпты лежат готовыми, и проверил один на реальном проекте.
Что такое MotionSites
Это библиотека промптов для hero-секций сайтов. Не конструктор, не агент, не инструмент. Просто коллекция готовых текстовых описаний дизайна, которые ты копируешь и вставляешь в нейронку.
Лежит на motionsites.ai. Часть промптов платная (29 долларов разово, не подписка), но и бесплатных хватает с головой. Внутри: космические лендинги, сайты для агентств, портфолио, фитнес, финтех, SaaS. Каждый промпт это длинное структурированное описание: разметка, шрифты, анимации, ссылки на видео, поведение элементов.
Автор библиотеки, Виктор Одди, собирает её под современные ИИ-агенты для разработки. Промпты заточены под React, Tailwind CSS v4 и framer-motion. Это значит, что Codex, Cursor, Lovable или Claude Code соберут по ним рабочий сайт без правок логики.
Как я это проверил
Зашёл на motionsites.ai, выбрал бесплатный промпт «Cinematic Space-Travel Landing Page». Космический лендинг с двумя секциями: hero и capabilities. Фоновые видео с плавным crossfade, glass-карточки, word-by-word анимация заголовка.
Скопировал промпт целиком, вставил в Codex. Через 2 минуты 52 секунды получил рабочий index.html. Открыл в браузере: страница чёрная, видео не подгружается. Дописал в Codex одну строку: «страница чёрная». Ещё 2 минуты. Всё ожило: видео крутятся, заголовок собирается слово за словом, glass-карточки отражают фон.
Итог: космический лендинг уровня Awwwards за пять минут чистого времени. Без Figma, без подписок, без дизайнера. Анимации сработали как в оригинале на сайте автора.
WOW-эффекты заканчиваются на втором экране
Тут важная деталь, про которую на сайте MotionSites не пишут открыто. Промпт описывает только то, что ты видишь на главной странице каталога: hero-секция и блок Capabilities. Два экрана, не больше.
Если у тебя одностраничный лендинг с тремя секциями, всё хорошо. Но если ты собираешь полноценный сайт с разделами «О нас», «Тарифы», «Кейсы», «Контакты», блогом и формой обратной связи, остальные блоки нейронка достраивает сама. По твоему контенту, на свой вкус, в своей стилистике.
И это сразу видно. Hero и Capabilities выглядят как лендинг агентства, которое делает сайты для Tesla. А секция «Часто задаваемые вопросы», которую Codex дописал сам, выглядит как обычный аккордеон, скачанный с Tailwind UI. Контраст бросается в глаза.
Решение. После генерации основных секций даёшь нейронке отдельную команду: «Достраивай остальные блоки в той же стилистике, что hero и capabilities. Сохраняй типографику Instrument Serif для заголовков, Barlow для текста, glass-карточки, чёрный фон, медленные framer-motion анимации». Обычно одного такого промпта хватает, чтобы выровнять характер всего сайта.
Где ещё подвох
Когда я заглянул в код, увидел два важных момента.
Первое: в промпте зашиты ссылки на видео автора. Они лежат на его AWS-бакете. Сейчас это работает, через год может перестать. Если автор решит почистить хранилище или прекратит платить за CloudFront, у тебя на сайте останутся пустые чёрные секции.
Второе: юридически это серая зона. Видео не твои. Для личного эксперимента норм, для коммерческого проекта могут быть вопросы.
Третье: всё подключено через CDN (React, Babel, Tailwind, Framer Motion, Google Fonts). Если упадёт unpkg или cdnjs (а такое бывает), сайт перестанет работать.
Решение в одном промпте
Возвращаешься в Codex/Cursor, вставляешь:
Скачай оба видео из ссылок на CloudFront в папку assets/videos/ локально, замени ссылки в коде на локальные пути. То же самое с React, Babel, Framer Motion и Tailwind: скачай локально или собери проект через Vite. Шрифты Google Fonts подключи через @font-face из локальных файлов.
После этого сайт автономный. Падают CDN, удаляются видео автора, закрывается motionsites.ai, твой сайт работает.
Если хочешь полностью свои видео, бери на pexels.com или mixkit.co. Бесплатно, с коммерческой лицензией, кадры приличного качества. Подбираешь нужное настроение, кладёшь в папку, меняешь ссылки в коде.
Зачем это всё
MotionSites продаёт идею, которую я повторяю каждую неделю в этом блоге. Бритва Оккама работает и в промпт-инженерии: чем точнее промпт, тем меньше нейронка импровизирует. Чем больше деталей ты задал, тем меньше шансов получить очередной фиолетовый градиент.
Промпт на 200 строк, в котором прописан каждый отступ, каждый класс Tailwind, каждое значение opacity, даёт результат, который сложно отличить от ручной вёрстки топового агентства. Промпт «сделай красивый лендинг» даёт то, что даёт.
Вайб-кодинг работает, когда у нейронки есть рамка. Премиум-промпты это и есть рамка, собранная человеком, который знает, что должно получиться. Ты платишь не за код (его пишет Codex или Cursor), ты платишь за вкус и точность вводных. И платишь только за входную точку: первые два экрана. Остальное достраиваешь сам или докручиваешь нейронкой по той же стилистике.
Как попробовать
Зайди на motionsites.ai, выбери бесплатный промпт, скопируй, вставь в любой ИИ-агент для разработки (Codex, Cursor, Claude Code, Lovable). Через пять минут получишь рабочий сайт. Дальше прогоняешь через промпт локализации (выше) и получаешь автономный проект.
Если хочешь полную картину по дизайну в вайб-кодинге, я раньше разбирал четыре способа управлять дизайном через нейронку. MotionSites это пятый, самый красивый.
#промпты #вайбкодинг #нейросетидлядизайна
Подпишись в Telegram