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

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

✨ Что получите: Вы научитесь создавать не просто «картинки» сайтов, а полноценные веб-приложения с логикой, анимациями, адаптивной версткой и сохранением данных в облачную БД.

1. Основы работы с Bolt.new и «Blank Canvas»

Контекст: Bolt.new — это браузерная среда разработки (WebContainer), которая позволяет создавать проекты на стеке Next.js/React через чат. Автор рекомендует начинать с простых запросов, чтобы понять логику работы системы, а затем переходить к сложным структурам. Важный нюанс: для каждого нового проекта лучше открывать новую вкладку или сессию, чтобы AI не смешивал стили и код из предыдущих генераций.

Выгода: Быстрый старт (MVP за 30 секунд) и отсутствие необходимости настраивать локальную среду разработки.

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

• Шаг 1: Регистрация — Перейдите на bolt.new и создайте бесплатный аккаунт.
• Шаг 2: Первый промпт — Введите простой запрос в поле ввода, например:

Make me a simple website for my dog with a photo gallery, fun facts, and a contact section.

• Шаг 3: Просмотр — Дождитесь завершения сборки (справа появится окно предпросмотра) и проверьте базовые блоки: Hero-секция, галерея, футер.

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

2. Продвинутый промптинг через ChatGPT

Контекст: Чтобы получить профессиональный дизайн, стандартных коротких промптов внутри Bolt недостаточно. Автор использует ChatGPT как «архитектора промптов». Сначала он «знакомит» ChatGPT с платформой Bolt.new, а затем просит составить максимально детальное техническое задание (ТЗ), которое Bolt сможет интерпретировать для создания сложной верстки.

Выгода: Получение уникального, детализированного дизайна с Call-to-Action (CTA), отзывами и правильной иерархией блоков.

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

• Шаг 1: Обучение AI — В ChatGPT введите:

Are you familiar with the bolt.new website platform?

• Шаг 2: Генерация ТЗ — После подтверждения попросите составить промпт:

I want to create a website using bolt.new. Create me a prompt that is very detailed and descriptive for a web design agency. Include landing page, featured projects, testimonials, and a modern footer. Be as detailed as possible regarding colors and typography.

• Шаг 3: Перенос в Bolt — Скопируйте полученный текст и вставьте его в новую сессию Bolt.new.

Результат: Сайт с профессиональной структурой, качественными шрифтами и продуманными блоками.

3. Редактирование через Inspector и кастомизация

Контекст: Bolt.new позволяет точечно изменять элементы через встроенный инструмент Inspector. Это избавляет от необходимости искать нужную строку кода вручную. Вы просто кликаете на элемент и пишете в чат, что именно нужно изменить (текст, ссылку, изображение).

Выгода: Точечная настройка UI без риска сломать всё приложение.

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

• Шаг 1: Активация Inspector — Нажмите на иконку прицела (Inspector) в панели предпросмотра.
• Шаг 2: Выбор элемента — Кликните на заголовок или кнопку, которую хотите изменить.
• Шаг 3: Команда на изменение — В появившемся поле чата напишите конкретную инструкцию:

Change this title to "How to make a WordPress website". Keep the colors the same and capitalize the first letter of every word.

• Шаг 4: Работа с медиа — Для замены картинок можно использовать прямые ссылки на изображения:

Use this image URL [ССЫЛКА] for the featured image section and also show it in the popup.

Результат: Полностью персонализированный контент на сайте.

4. Создание функциональных приложений (Email Generator)

Контекст: Bolt.new способен создавать логику на JavaScript. Автор демонстрирует это на примере генератора Email-шаблонов. Приложение не просто отображает текст, а имеет поля ввода, выпадающие списки и логику генерации текста на основе введенных данных.

Выгода: Создание работающего микро-сервиса (SaaS) за несколько минут.

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

• Шаг 1: Промпт для приложения — Используйте ChatGPT для создания логики:

I want to make an app for bolt.new. Create an email generator tool for web designers to generate leads. The app should have input fields for: Business Type, Location, Email Tone, and Unique Selling Point. Add a "Generate" button and a "Copy to Clipboard" function.

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

Can you add a drop-down menu for each category (like Email Tone) instead of a text input?

Результат: Интерактивное приложение, которое выполняет конкретную задачу пользователя.

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

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

Выгода: Реальный сбор лидов и управление данными в облаке.

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

• Шаг 1: Подключение — Нажмите кнопку "Integrations" в верхней панели Bolt и выберите Supabase.
• Шаг 2: Авторизация — Войдите в свой аккаунт Supabase и выберите проект для подключения.
• Шаг 3: Создание формы — Дайте команду Bolt:

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

• Шаг 4: Проверка — Отправьте тестовое сообщение через форму и проверьте раздел "Table Editor" в панели управления Supabase.

Результат: Работающая CRM-система, где каждое сообщение с сайта сохраняется в БД.

6. Публикация и деплой

Контекст: После завершения разработки проект нужно выпустить в «дикий интернет». Bolt предлагает интеграцию с Netlify для хостинга и подключения кастомных доменов.

Выгода: Получение живой ссылки, которую можно отправить клиенту.

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

• Шаг 1: Кнопка Deploy — Нажмите "Publish" в верхнем правом углу.
• Шаг 2: Netlify — Следуйте инструкциям для передачи репозитория в Netlify (партнер Bolt по хостингу).
• Шаг 3: Домен — В панели Netlify можно привязать купленный домен (например, .com или .ru).

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

FAQ

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

В: Как исправить ошибки в мобильной версии сайта? О: Используйте режим "Responsive mode" в предпросмотире, найдите баг и напишите в чат: Fix the mobile preview for the hero section, the text is overlapping. AI перепишет CSS-стили.

В: Могу ли я выгрузить код сайта, чтобы редактировать его в VS Code? О: Да, Bolt.new позволяет скачать проект в виде ZIP-архива или запушить его напрямую в GitHub, после чего вы сможете открыть его в Cursor или VS Code.

В: Заменяет ли Bolt.new платформы вроде WordPress или Shopify? О: На данный момент Bolt идеально подходит для лендингов и микро-сервисов. Для сложных e-commerce систем WordPress/Shopify пока стабильнее, но автор прогнозирует, что через 2 года AI-инструменты станут основным стандартом разработки.

В: Что такое "Discuss mode" в Bolt? О: Это режим консультации. В нем AI не меняет код сайта, а дает советы по улучшению дизайна или функционала. Это полезно для поиска вдохновения перед внесением правок.

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