Красивый дизайн сайта за 2 минуты: готовые промпты + Claude Code

motionsites.ai — это галерея готовых дизайн-промптов: копируешь текст, отправляешь в Claude Code и получаешь страницу с видео-фоном, glass-эффектами и анимациями. Сам сайт ничего не генерирует — он отдаёт промпт, а код пишет Claude Code. Показываю, как этим пользоваться, где подвох с React и когда motionsites лучше не брать.

Что такое motionsites.ai

Это не конструктор сайтов, а библиотека промптов под AI-кодеры. Каждый шаблон — готовый текст-задание, рассчитанный на стек React + Vite + TypeScript + Tailwind + Framer Motion. Ты выбираешь дизайн в галерее, копируешь промпт, вставляешь в Claude Code (или Cursor, Lovable) — и AI собирает по нему страницу. То есть motionsites продаёт не код и не сайт, а формулировку, по которой код напишет модель.

Сколько стоит и что бесплатно

Полная библиотека — платная: единоразово примерно $239–299 (lifetime) или $149 в год, отдельного бесплатного тарифа на сайте нет. Галерею можно листать и смотреть превью без оплаты, но чтобы копировать промпты целиком — нужен план. Если платить не хочется, тот же стек (React + Framer Motion + Tailwind) лежит в открытых бесплатных библиотеках компонентов — например Aceternity UI, откуда готовые анимированные блоки берутся прямо кодом.

Шаг 1. Выбираем дизайн

Заходим на motionsites.ai и листаем галерею — у каждого варианта есть превью и кнопка Copy. Выбираем понравившийся (например, Targo — логистика с видео-фоном и кнопками со срезанными углами) и нажимаем Copy.

Шаг 2. Отправляем в Claude Code с правильной обёрткой

Вот тут главный нюанс. Промпты на motionsites.ai написаны под React + Tailwind + npm. Если просто вставить скопированный текст — Claude Code создаст целый React-проект с десятком зависимостей. Для одной красивой страницы это лишнее.

Поэтому перед скопированным промптом добавляем инструкцию:

Сделай это как один HTML-файл. Без React, без npm, без сборки.
Чистый HTML + CSS + vanilla JS. Шрифты подключи через Google Fonts CDN.
Если в промпте есть видео — используй тег <video>.
Если видео в формате .m3u8 — подключи hls.js через CDN.
Анимации сделай через CSS @keyframes или простой JS.

[вставляем скопированный промпт]

Claude Code возьмёт из промпта всё описание дизайна — цвета, расположение, эффекты — но реализует без фреймворков. На выходе один HTML-файл, который открывается в браузере.

Шаг 3. Открываем и проверяем

Claude Code создаст файл вроде demo.html. Открываем в браузере — видео-фон играет, glass-эффекты работают, анимации запускаются.

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

Что Claude Code делает с React-промптом

Вот во что Claude Code превращает React-промпт при нашей обёртке:

• React-компоненты → обычные HTML-теги
• Tailwind-классы → inline CSS
• Framer Motion → CSS @keyframes или JS с setTimeout
• npm-пакеты → скрипты через CDN
• lucide-react → inline SVG

Один файл, ноль зависимостей. Можно использовать как лендинг, демо или основу для своего сайта.

Когда motionsites НЕ подходит

Если у тебя уже есть своя дизайн-система или палитра — готовый промпт принесёт чужой стиль, и подгонка может съесть больше времени, чем сборка с нуля. Я это прошёл на самом nakodil.site: поставил через motionsites анимированный hero, промпт принёс красивую тёмную секцию с видео-фоном. Проблема вылезла на редизайне — когда я переводил сайт в свою палитру (уже не чёрную), готовый hero перестал вписываться. Перекрашивать чужой шаблон под свой стиль оказалось дольше, чем собрать свой, — я его снял.

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

Свой стиль вместо чужого шаблона я собираю дизайн-скиллами — разбирал три скилла против generic-UI и design-advisor, который наводит красоту за две команды.

Альтернативы motionsites.ai

Если нужен тот же результат другим путём:

• Aceternity UI — бесплатная библиотека React + Tailwind + Framer Motion компонентов. Отдаёт готовый код для копипаста, а не промпт.
• Framer — визуальный AI-конструктор, публикует сайт сам. Не стыкуется с Claude Code, зато без кода вообще.
• Dora AI — no-code редактор с анимацией внутри своей экосистемы, тоже мимо Claude Code.
• Дизайн-скиллы для Claude Code — не готовый промпт со стороны, а прокачка самого Claude: ui-ux-pro-max, Impeccable и ещё три в каталоге. Стиль остаётся твоим.

Прозрачно: ссылки на motionsites.ai в статье — партнёрские. Если оформишь план по ним, мне придёт процент; цена для тебя не меняется.

Источники

1. motionsites.ai — галерея промптов и тарифы
2. Aceternity UI — бесплатная альтернатива в том же стеке
3. Framer Motion — библиотека анимаций, на которой строятся промпты
4. Tailwind CSS — CSS-фреймворк из стека шаблонов