LIVE//NAKODIL.SITE//PAYLOAD :: GUIDE
Красивый дизайн сайта за 2 минуты: готовые промпты + Claude Code
Берём готовый дизайн-промпт, добавляем одну инструкцию — Claude Code делает hero-секцию с видео-фоном и анимациями. Без React, без npm, один HTML-файл.
На motionsites.ai лежат готовые дизайн-промпты с видео-фоном и glass-эффектами. Один нюанс: промпты написаны под React, но одна инструкция-обёртка переводит всё в чистый HTML без зависимостей.
- motionsites.ai — галерея дизайн-промптов, бесплатных хватает для старта.
- Обёртка — добавить перед промптом «Сделай как один HTML-файл. Без React, без npm».
- Tailwind → inline CSS — Claude Code конвертирует автоматически при правильной инструкции.
- Framer Motion → CSS @keyframes — анимации работают без npm-пакетов.
- Результат — один .html-файл, открывается без сборки, готов как лендинг или демо.
На motionsites.ai лежат готовые дизайн-промпты — копируешь текст, отправляешь в Claude Code, получаешь страницу с видео-фоном, glass-эффектами и анимациями. Показываю как это работает.
Шаг 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-промптом при нашей обёртке:
- React-компоненты → обычные HTML-теги
- Tailwind-классы → inline CSS
- Framer Motion → CSS @keyframes или JS с setTimeout
- npm-пакеты → скрипты через CDN
- lucide-react → inline SVG
Один файл, ноль зависимостей. Можно использовать как лендинг, демо или основу для своего сайта.
Читать дальше
Частые вопросы
Как быстро сделать красивый дизайн сайта с Claude Code?
Зайти на motionsites.ai, выбрать шаблон из галереи, скопировать промпт. Перед ним добавить инструкцию: «Сделай как один HTML-файл. Без React, без npm. Чистый HTML + CSS + vanilla JS». Отправить в Claude Code — на выходе файл demo.html с видео-фоном и анимациями, который открывается в браузере без установки зависимостей.
Что такое motionsites.ai?
Сервис с готовыми дизайн-промптами для AI-инструментов вроде Claude Code. В галерее — шаблоны с видео-фоном, glass-морфизмом, анимациями. Промпты изначально написаны под React + Tailwind, но с правильной обёрткой Claude Code конвертирует их в чистый HTML без зависимостей.
Можно ли сделать красивый лендинг без React и npm?
Да. Claude Code при инструкции «без React, без npm» конвертирует React-компоненты в HTML-теги, Tailwind-классы в inline CSS, Framer Motion в CSS @keyframes, npm-пакеты в скрипты через CDN. Получается один HTML-файл, который открывается прямо в браузере.
Как изменить результат если что-то не так в дизайне?
Просто описать в чате что не устраивает: «подними текст выше», «сделай кнопку синей», «ускорь анимацию». Claude Code правит тот же файл. Весь цикл — выбрал шаблон, добавил обёртку, открыл в браузере, попросил поправить — занимает 2–5 минут.
Видео в промпте в формате .m3u8 — как это обработать?
Добавить в инструкцию-обёртку: «Если видео в формате .m3u8 — подключи hls.js через CDN». Claude Code вставит нужный скрипт автоматически и настроит тег video на воспроизведение HLS-потока без дополнительных действий с твоей стороны.