Создать лендинг за 30 минут с Bolt.new: пошаговый туториал

Что мы будем делать

В этом туториале мы создадим полноценный лендинг с Bolt.new — от нуля до работающего сайта в интернете. Никакого кода, только промпты.

Что получится: Лендинг для вымышленного продукта — приложения для учёта финансов "КошелёкAI". Hero-секция, фичи, тарифы, FAQ, CTA.

Время: 30 минут (реально).

Шаг 1: Регистрация и первый промпт (5 минут)

1. Открой bolt.new
2. Зарегистрируйся (Google-аккаунт или email)
3. Нажми "Start a new project"

Первый промпт

Создай лендинг на русском языке для приложения "КошелёкAI" — AI-помощник для учёта финансов.
Секции:
Дизайн: минималистичный, тёмная тема, акцентный цвет — emerald/green. Анимации при скролле. Адаптивный (мобильная версия).

Bolt создаст полноценный проект за 30-60 секунд. Ты увидишь:

• Код (React + Tailwind CSS)
• Превью в реальном времени
• Файловую структуру

Шаг 2: Итерации — доводим до ума (15 минут)

Первый результат — хорош, но не идеален. Теперь итерируем промптами.

Фикс дизайна

Сделай hero-секцию более впечатляющей: добавь фоновый градиент, увеличь заголовок, добавь 3D-эффект для мокапа телефона.

Добавить секцию

Добавь секцию "Отзывы" между тарифами и FAQ. 3 карточки с отзывами: имя, фото-заглушка (аватар), текст, звёзды.

Фикс мобильной версии

Проверь мобильную версию. Hero-кнопки должны быть стеком (друг под другом). Карточки фич — по одной в ряд. Тарифы — слайдер.

Анимации

Добавь плавные анимации при скролле: секции появляются снизу (fade-in-up) при попадании в viewport. Карточки появляются с задержкой друг за другом.

Мелкие правки

Продолжай итерировать:

• "Измени текст кнопки на..."
• "Поменяй местами секции X и Y"
• "Сделай фон секции тарифов чуть темнее"
• "Добавь иконку телефона рядом с номером"

Правило: Один промпт = одно изменение. Не пытайся менять всё сразу — Bolt лучше справляется с точечными правками.

Шаг 3: Деплой (5 минут)

Вариант A: Деплой через Bolt (1 клик)