Как пользоваться Bolt.new: от идеи до задеплоенного приложения
Полный разбор Bolt.new, воссозданный по реальному сбору новичка — первый промпт, итерации по скриншотам, аналитика, вход через Google с Firebase и деплой. Каждый шаг — со скриншотом.
Bolt.new коротко
- Начинайте с общей идеи и нескольких нужных функций — «учёт рабочих сессий, добавление задач, сохранение сессий» — без технического задания. Примерно через минуту работает готовое приложение.
- Итерируйте короткими промптами, по одной функции: кнопка завершения, вкладка аналитики, круговая диаграмма, тёмная тема. Промахнулись — сформулируйте иначе, со второй попытки обычно получается.
- Правки могут ломать друг друга. Если кнопки перестали работать, опишите баг простыми словами или попросите откатиться к последней рабочей версии — почти всё чинится одним промптом.
- Вход через Google требует Firebase: создайте проект, включите провайдера Google, вставьте firebaseConfig в Bolt и добавьте адрес деплоя в разрешённые домены Firebase.
Building an App from Scratch with Bolt.new
Исходное видео:Brock Mesarich · AI for Non Techies16:02
Скриншоты взяты из исходного видео и снабжены ссылками с таймкодами. Текст — наш собственный разбор по полной транскрипции; факты соответствуют записи.
Этот гайд — независимый иллюстрированный конспект для тех, кто предпочитает читать. Поддержать автора можно, посмотрев оригинал на канале AI for Non Techies по ссылке выше.
Собираем приложение в Bolt.new, шаг за шагом
- 1
Описать идею одним промптом
Откройте bolt.new и напишите общую идею плюс пару нужных функций — без технического задания. Пример: «Собери приложение для учёта рабочих сессий. Назовём его FocusFlow. Оно должно фиксировать рабочие блоки, добавлять выполненные за сессию задачи и сохранять сессии». Слишком много деталей тормозит первую сборку.
Первый промпт FocusFlow на bolt.new: общая идея, несколько функций.Смотреть на 0:30 - 2
Дождаться первой версии — и шлифовать по скриншоту
Минуту спустя Bolt уже написал и запустил код: таймер, форма задач, статистика. Сделайте скриншот того, что не нравится, прикрепите и скажите, что изменить — «давай сделаем эту часть попроще». Визуальный фидбэк бьёт любые описания позиций пикселей словами.
Первый предпросмотр и промпт-правка со скриншотом.Смотреть на 1:40 - 3
Добавить категории к задачам
Попросите колонку категорий с конкретными примерами — admin, создание контента, финансы, исследования, разработка. Bolt превратит их в сетку кнопок, и у каждой задачи появится цветная метка — именно это делает будущую аналитику осмысленной.
Сетка из восьми категорий и цветные метки задач.Смотреть на 2:30 - 4
Попросить кнопку завершения сессии
Таймер тикает, но ничего не сохраняется. Промпт: «Добавь возможность завершать сессию». Bolt создаёт новые компоненты (SessionControls, SessionSummary), встраивает их, и при завершении сессии показывает сводку: длительность, выполненные задачи, главная категория.
Bolt планирует и создаёт компоненты завершения сессии.Смотреть на 3:00 - 5
Оставить сводку на главной панели
По умолчанию завершение сессии перебрасывает на отдельную страницу. Не нравится — скажите прямо: «Не нравится, что меня швыряет на новую страницу в конце сессии — оставь всё на обычной панели». Карточка сводки теперь появляется прямо на главном экране.
Карточка Session Complete вернулась на главную панель.Смотреть на 4:00 - 6
Добавить вкладку аналитики
Попросите вкладку Session Analytics со всеми задачами по дням и итогами за день. Bolt поставит её рядом с Current Session, и каждую завершённую сессию можно развернуть до истории задач — вот тут категории начинают приносить пользу.
Новая вкладка Analytics рядом с Current Session.Смотреть на 4:30 - 7
Учитывать время по каждой задаче
Аналитике нужны данные: попросите помечать задачи выполненными по умолчанию и добавить затраты времени на каждую. Bolt добавит поля часов и минут (позже их заменит слайдер до часа) и передаст цифры в аналитику.
Поля затраченного времени встроились в форму задач.Смотреть на 6:00 - 8
Визуализировать время круговыми диаграммами
Промпт: «Давай добавим аналитику с круговыми диаграммами, сколько времени уходит на что». Первая диаграмма приходит комично огромной — «сделай поменьше» чинит её со второй попытки. Именно в таких мелких правках интерфейса Bolt силён.
Дневная круговая диаграмма после исправления размера.Смотреть на 6:25 - 9
Чинить регрессии простыми словами
На середине сборки правки сталкиваются: кнопки отказывают, забавный шлейф за курсором ломает вёрстку. Опишите баг простыми словами, попросите удалить не понравившееся или используйте Undo. Собственные списки исправлений Bolt — здесь из шести пунктов — обычно всё чинят за один проход.
Список из шести исправлений: таймер починен, свечение удалено.Смотреть на 9:30 - 10
Добавить вход через Google
Чтобы превратить приложение в продукт, нужны аккаунты. Промпт: «Добавь возможность входа через Google». Bolt ответит рабочей карточкой — обновить package.json, установить зависимости, создать контекст аутентификации — плюс пошаговой инструкцией по Firebase для действий вне Bolt.
Рабочая карточка Add Google Authentication в Bolt.Смотреть на 11:00 - 11
Создать проект в Firebase
Перейдите по ссылке Bolt в консоль Firebase, создайте новый проект (дайте имя, выберите аккаунт) и продолжите в консоль, когда он будет готов. Бесплатного тарифа Spark для этого гайда хватает.
Проект Firebase готов — продолжаем в консоли.Смотреть на 11:30 - 12
Включить Google в способах входа
В консоли: Build → Authentication → Sign-in method. Включите провайдера Google, а также Email/Password, чтобы пользователи могли регистрироваться любым способом. Это ровно то, что просил чек-лист Bolt.
Google теперь включён как способ входа.Смотреть на 12:00 - 13
Вставить firebaseConfig в Bolt
В Project settings → Your apps зарегистрируйте веб-приложение и скопируйте блок firebaseConfig туда, куда укажет Bolt — в файл конфигурации из его чек-листа. Скажите Bolt «я добавил конфигурацию Firebase», и он всё подключит — вплоть до работающей кнопки регистрации.
Блок firebaseConfig для вставки в файл конфигурации Bolt.Смотреть на 12:30 - 14
Разрешить домен деплоя
Пока Firebase не доверяет вашим адресам, вход через Google умирает с «всплывающее окно заблокировано». Задеплойте приложение из Bolt, откройте Firebase → Authentication → Settings → Authorized domains и добавьте localhost, домен IDE и адрес деплоя (спросите Bolt — он назовёт точный домен).
Разрешённые домены в настройках Firebase.Смотреть на 14:00 - 15
Выйти в свет и войти в аккаунт
Откройте адрес деплоя, нажмите Sign in и продолжите через Google — всплывающее окно работает, аватар встаёт в правый верхний угол, выход тоже работает. Готово: задеплоенное приложение с настоящими аккаунтами, собранное без единой строки кода от вас.
Вход выполнен на задеплоенном FocusFlow.Смотреть на 15:00