Гайд · 2 мин чтения

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

Берём готовый дизайн-промпт, добавляем одну инструкцию — Claude Code делает hero-секцию с видео-фоном и анимациями. Без React, без npm, один HTML-файл.

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

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

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

Заходим на motionsites.ai, листаем галерею. У каждого варианта есть превью и кнопка Copy. Бесплатных хватает, чтобы попробовать.

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

Галерея motionsites.ai — выбираем дизайн и копируем промпт

Шаг 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-промптом при нашей обёртке:

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