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

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

Обновлено 16 октября 2026: новые тарифы и бесплатные промпты motionsites, MCP для Claude Code, актуальные альтернативы.

Что такое motionsites.ai

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

Кроме лендингов в галерее теперь есть отдельные секции, приложения, анимированные фоны и 3D-сайты. Подробный обзор сервиса — в статье MotionSites AI: что это и как работает с Claude Code.

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

Галерею можно листать бесплатно, а часть промптов помечена как Free: в галерее есть такой фильтр, и для них хватает бесплатного аккаунта. Полная библиотека платная. Тарифы на 16 октября 2026:

• 3 месяца — $129, до 3 копий промпта в день;
• год — $279, без лимита;
• навсегда — $399 по акции для первых покупателей (обычная цена $759);
• разовые наборы без подписки — 2 промпта за $49, 5 за $99, 10 за $149.

Цены и акции у сервиса меняются часто, перед покупкой сверяйся со страницей тарифов. Если платить не хочется, тот же стек (React + Motion + Tailwind) лежит в бесплатных библиотеках компонентов — например в Aceternity UI: там больше сотни бесплатных анимированных блоков, которые берутся прямо кодом.

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

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

Копировать вручную не обязательно: у motionsites появился MCP-сервер для Claude Code, Cursor и Codex. Он ставится одной командой без API-ключа (команда — на странице motionsites.ai/mcp), после входа в аккаунт Claude сам подтягивает промпты по твоей просьбе. Бесплатный аккаунт открывает через MCP 3 бесплатных промпта, остальные — по плану.

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

Вот тут главный нюанс. Промпты motionsites, которые мне попадались, написаны под 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
• Motion (бывший 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 + Motion: больше сотни бесплатных, остальное в Pro (от $169 в год). Отдаёт готовый код для копипаста, а не промпт. Её и соседей я сравнивал в статье про Magic UI, KokonutUI и Aceternity.
• Framer — визуальный конструктор с AI-агентом, публикует сайт сам. Не стыкуется с Claude Code, зато без кода вообще.
• Дизайн-скиллы для Claude Code — не готовый промпт со стороны, а прокачка самого Claude: ui-ux-pro-max, Impeccable, Emil Design Eng и другие в каталоге. Стиль остаётся твоим.

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

Источники

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