🎯 О чём этот конспект: Подробное руководство по использованию платформы Bolt.new для генерации современных веб-сайтов и функциональных приложений с помощью AI-промптов. Разбирается процесс от создания простого лендинга до разработки сложных инструментов с анимациями и интеграцией базы данных.

👤 Кому будет полезно: Вайбкодерам, разработчикам на No-code/Low-code, предпринимателям и дизайнерам, которые хотят быстро собирать работающие прототипы и полноценные веб-сервисы без написания кода вручную.

✨ Что получите: Вы научитесь формулировать сложные промпты для Bolt, кастомизировать дизайн через Inspector, внедрять темную тему, создавать интерактивные приложения (например, генераторы писем) и подключать базу данных Supabase для сбора лидов.

1. Основы работы и «прогрев» AI через ChatGPT

Контекст: Для получения качественного результата в Bolt.new недостаточно короткого запроса. Автор предлагает использовать ChatGPT как «архитектора промптов». Сначала нужно убедиться, что ChatGPT знает возможности Bolt, а затем попросить его составить максимально подробное техническое задание. Это исключает галлюцинации нейросети и дает на выходе профессиональный дизайн вместо базового шаблона.

Выгода: Экономия времени на итерациях правки дизайна и получение структуры сайта, которая сразу выглядит как работа дорогого агентства.

Как применить:

• Шаг 1: Инициализация контекста — [ChatGPT] — Спросите нейросеть о знакомстве с платформой:

  Are you familiar with the bolt.new website? It's an AI platform that allows users to create websites and apps via prompts.

• Шаг 2: Генерация детального промпта — [ChatGPT] — Запросите подробное описание для вашей ниши:

  I want to create a website using bolt.new. Create me a prompt that is very detailed and descriptive for a web design agency. Be as detailed as possible, including sections like hero, featured projects, testimonials, and a modern color palette.

• Шаг 3: Запуск в Bolt — [Bolt.new] — Откройте новую вкладку (это важно, чтобы избежать смешивания стилей от предыдущих сессий) и вставьте полученный текст.

Результат: Готовый многосекционный лендинг с релевантным контентом и современной версткой.

2. Точечная настройка через Inspector и Prompt Library

Контекст: Bolt.new позволяет редактировать конкретные элементы сайта без изменения всего проекта. Инструмент Inspector работает как Chrome DevTools, но для AI: вы выбираете блок и пишете инструкцию по его изменению. Также в платформу встроена библиотека готовых решений (Prompt Library), которая позволяет в один клик добавлять сложные функции, такие как Dark Mode или SEO-аудит.

Выгода: Возможность довести «сырой» AI-результат до идеала, не перегенерируя весь сайт целиком.

Как применить:

• Шаг 1: Редактирование текста/блока — [Bolt.new Inspector] — Нажмите на иконку лупы (Inspector), выберите заголовок и введите команду:

  Can you change this to "How to make a WordPress website"? Please keep the colors the same and capitalize the first letter of every word.

• Шаг 2: Добавление функционала — [Prompt Library] — Нажмите на иконку книги внизу экрана. Выберите, например, "Implement Dark Mode". AI сам напишет код переключателя и логику смены цветов.
• Шаг 3: Работа с изображениями — [Bolt.new] — Если нужно заменить картинку, загрузите файл и дайте команду:

  Use this uploaded image for the featured project section and also show it in the popup.

Результат: Уникализированный интерфейс с работающей темной темой и вашим контентом.

3. Создание функциональных веб-приложений (SaaS)

Контекст: Bolt — это не только про верстку, но и про логику. Автор демонстрирует создание "Email Lead Generator" — инструмента, который принимает данные от пользователя и выдает готовый текст письма. Ключ к успеху здесь — описание логики работы (input-поля, выпадающие списки, кнопка генерации).

Выгода: Создание работающего MVP (минимально жизнеспособного продукта) за 5-10 минут, который можно монетизировать или использовать для привлечения трафика.

Как применить:

• Шаг 1: Промпт для приложения — [ChatGPT -> Bolt.new] — Используйте структуру промпта, описывающую функционал:

  I want to make an app for bolt.new. Create an email generator tool for web designers to generate leads. 
  Features: 
  1. Input fields for business type, location, and tone. 
  2. A "Generate" button that creates a professional email template. 
  3. A "Copy to clipboard" function. 
  Modern UI with clean cards.

• Шаг 2: Улучшение UI элементов — [Bolt.new Chat] — Если AI создал обычные текстовые поля, попросите заменить их на Dropdown:

  Can you add a drop-down menu for each category instead of text inputs?

Результат: Интерактивное веб-приложение с логикой обработки данных на стороне клиента.

4. Интеграция базы данных Supabase для сбора данных

Контекст: Чтобы сайт стал полноценным инструментом, он должен уметь сохранять данные (заявки, регистрации). Bolt.new имеет прямую интеграцию с Supabase (PostgreSQL база данных). Это позволяет автоматически создавать таблицы и записывать в них сообщения из контактных форм.

Выгода: Вы получаете полноценный бэкенд без написания SQL-запросов или API-роутов.

Как применить:

• Шаг 1: Подключение — [Bolt.new Top Menu] — Нажмите "Integrations" -> "Supabase". Авторизуйтесь и выберите проект для подключения.
• Шаг 2: Создание формы — [Bolt.new Chat] — Попросите AI создать форму и связать её с базой:

  Create a contact form with fields: Name, Email, Budget (dropdown), and Message. 
  Integrate this form with Supabase so all submissions are stored in a table named 'contact_submissions'.

• Шаг 3: Проверка — [Supabase Dashboard] — Зайдите в Table Editor в Supabase. После отправки тестового сообщения в вашей таблице появится новая строка с данными.

Результат: Работающая CRM-система, собирающая лиды с вашего AI-сайта.

5. Публикация и автоматизация (Netlify & n8n)

Контекст: Финальный этап — вывод проекта в "мир". Bolt позволяет опубликовать сайт в один клик, предоставляя временный URL. Для серьезных проектов автор рекомендует перенос на Netlify для подключения кастомных доменов. Также упоминается возможность связки с n8n для автоматизации (например, отправка уведомления в Telegram при новом лиде).

Выгода: Профессиональный хостинг и возможность встроить сайт в бизнес-процессы.

Как применить:

• Шаг 1: Публикация — [Bolt.new] — Нажмите кнопку "Publish" в верхнем правом углу.
• Шаг 2: Кастомный домен — [Netlify] — После публикации вы можете нажать "Claim website", что перенесет проект в ваш аккаунт Netlify, где можно привязать домен .com или .ru.
• Шаг 3: Масштабирование — [n8n.io] — Используйте вебхуки из Supabase или напрямую из кода Bolt, чтобы отправлять данные в n8n для дальнейшей обработки (рассылки, уведомления).

Результат: Опубликованный проект на кастомном домене с настроенными воронками автоматизации.

FAQ

В: Можно ли использовать Bolt.new бесплатно? О: Да, у платформы есть бесплатный уровень, который позволяет создавать и тестировать сайты. Однако для сложных проектов и частого использования может потребоваться подписка.

В: Почему мой дизайн выглядит одинаково при разных промптах? О: Это происходит из-за кэширования сессии. Автор настоятельно рекомендует всегда открывать Bolt.new в новой вкладке браузера для каждого нового проекта, чтобы AI начинал с «чистого листа».

В: Как добавить свои изображения на сайт? О: Вы можете загрузить файл прямо в чат Bolt или предоставить прямую ссылку на изображение в интернете. Затем попросите AI использовать этот файл для конкретного блока через Inspector.

В: Можно ли перенести сайт с Bolt на WordPress? О: Напрямую — нет. Bolt генерирует современный код (обычно на React/Vite). Вы можете экспортировать код и хостить его отдельно, но это принципиально другая архитектура, отличная от PHP-движка WordPress.

В: Насколько стабильны такие сайты? О: Сайты на Bolt базируются на современных веб-стандартах. При интеграции с Supabase и Netlify они работают очень быстро и выдерживают высокие нагрузки, превосходя по производительности многие конструкторы типа Wix.

Конспект создан на основе видео «How To Use Bolt AI To Create Stunning Websites (Full Tutorial)» канала Daryl Wilson. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=5zfOitaKfmM