Собрать сайт-портфолио, подготовить страницу мероприятия или сделать калькулятор стоимости услуг — на поиск и настройку подходящего шаблона может уйти много времени. А в Bolt.new достаточно описать задачу словами — ИИ поможет быстро собрать проект и опубликовать его по ссылке.
В статье разобрали, как работать с сервисом на примерах сайта с калькулятором стоимости и приложения со списком покупок.
Что такое Bolt.new и для чего он пригодится
Bolt.new — сервис с ИИ для создания сайтов и приложений. В нем задачу можно описать словами, а нейросеть подготовит код — инструкции, которые зададут внешний вид веб-страницы и работу ее элементов. Если результат не подойдет, в том же чате можно попросить внести правки.
В Bolt.new можно поручить ИИ разные задачи:
Создать свой сайт компании или лендинг мероприятия. Сервис поможет собрать описание услуг, цены, фотографии работ или каталог товаров, а на странице мероприятия — дату, программу и ответы на частые вопросы. Позже можно добавить корзину и функцию оплаты.
Сделать инструмент для повседневных дел. Например, планировщик уборки или список книг с отметками «Хочу прочитать», «Читаю» и «Прочитано». В запросе нужно объяснить, какие записи можно будет добавлять и что с ними делать. Сервис подготовит веб-приложение — инструмент, которым можно пользоваться в браузере без установки из магазина приложений.
Собрать прототип будущего сервиса. Например, пробную версию сервиса для поиска репетитора: с карточками преподавателей, выбором предмета и фильтром по цене занятия. Коллеги или заказчик смогут попробовать найти подходящего преподавателя и обсудить, чего не хватает. Это поможет уточнить идею до того, как начнется работа над полной версией.
Написать и отредактировать тексты для проекта. Сервис поможет придумать заголовки, подготовить описания услуг или товаров, написать ответы на частые вопросы. Затем в чате можно попросить сократить текст, упростить формулировки или изменить тон. Такие задачи удобно поручать вместе с работой над страницей.
Создать и изменить изображения. По описанию можно получить иллюстрацию, фон или картинку для отдельного блока. Если изображение уже есть в проекте, сервис поможет внести в него правки. Генерация и редактирование изображений с помощью ИИ есть на платных тарифах.
Подготовить презентации. В режиме Bolt Slides можно описать тему, приложить материалы и попросить собрать слайды. В презентацию получится добавить графики, интерактивные элементы и заметки для выступления. Готовой работой можно поделиться по ссылке или скачать ее в PDF.
Создать тест или викторину. Для учебного курса можно собрать вопросы с вариантами ответов, а для мероприятия — игру на знание темы. Сервис поможет добавить подсчет баллов и пояснения к ответам. Участник сможет пройти задания в браузере и сразу увидеть результат.
Ниже разберем, как работать в Bolt.new: описать задачу в чате, внести правки и опубликовать проект.
Как сделать прототип сайта в Bolt.new
Разберем процесс на примере создания сайта студии творческих мастер-классов «Тепло». На странице будут описание студии, три занятия с ценами и калькулятор стоимости для группы.
Сначала подготовим саму страницу, затем добавим расчет и проверим, правильно ли он работает.
Шаг 1. Открыть сервис и войти в аккаунт
На главной странице сайта Bolt.new нужно нажать Sign in и войти через Google, GitHub или email.
В поле запроса есть выбор ИИ-агента — помощника, который будет выполнять задачу. Для учебного проекта подойдет Standard: этот вариант рассчитан на обычные задачи разработки.
Лучшие промпты для кода и программистов Шаг 2. Описать будущий сайт
Перед созданием сайта нужно объяснить, для кого он предназначен, какие разделы на нем будут и что сможет сделать посетитель. Чем точнее описано содержание страницы, тем лучше нейросеть подберет решение.
Например, просьба «Сделай красивый сайт студии» не объясняет, какие занятия нужно показать и куда должны вести кнопки. Для сайта лучше сразу перечислить конкретные мастер-классы, указать цены и описать переход к разделу с занятиями. Через поле запроса можно отправить такой промпт:
Создай одностраничный сайт для вымышленной студии творческих мастер-классов «Тепло». Все тексты должны быть на русском языке. Сайт предназначен для взрослых без опыта, которые хотят попробовать новое занятие самостоятельно или с друзьями. Его задача — познакомить посетителей с мастер-классами и помочь выбрать подходящий. В начале страницы размести название студии, короткое описание и кнопку «Посмотреть занятия». По нажатию на кнопку страница должна прокручиваться к разделу «Мастер-классы». В разделе «Мастер-классы» нужны три карточки: «Керамика» — лепка небольшой чашки вручную, 2000 ₽ за человека. «Свечи» — создание ароматической свечи, 1800 ₽ за человека. «Акварель» — рисование открытки, 1500 ₽ за человека. После карточек добавь раздел «Как проходят занятия». Укажи, что опыт не нужен, материалы включены в стоимость, а мастер объясняет каждый этап. Оформление: светлый фон, темный текст, крупные заголовки и кнопки теплого оранжево-коричневого цвета. Страница должна удобно отображаться на компьютере и смартфоне. Фотографии пока не добавляй. Не добавляй регистрацию, оплату, форму заявки, отзывы и вымышленные контакты. Внизу страницы размести пометку «Учебный прототип. Запись и оплата не подключены».
Похожим образом можно подготовить задание для портфолио — вместо мастер-классов перечислить работы, добавить к ним описания и указать, что кнопка в начале страницы должна вести к примерам проектов.
Если собственных идей пока недостаточно, их можно сначала обсудить с сервисом. Для этого есть Plan Mode — режим планирования, в котором можно вместе с ИИ уточнить структуру и порядок работы.
Шаг 3. Внести правки, если нужно
После отправки запроса Bolt подготовит первую версию сайта. Справа, в окне Preview, можно будет посмотреть страницу и попробовать нажать кнопки. Чат останется слева — через него получится попросить внести изменения.
Если в начальной версии проекта не понравится определенная деталь, можно изменить только ее, не переделывая весь сайт. Для этого нужно указать в чате с ИИ, что именно нужно исправить, а что оставить как есть. Например, если цены теряются среди описаний и занятия трудно сравнивать, подойдет такой запрос:
В карточках мастер-классов размести цену сразу под названием занятия и выдели ее жирным начертанием. Названия, описания, цвета и порядок карточек не меняй.
Сервис внесет изменения, после чего можно будет снова открыть страницу в предварительном просмотре. На этом этапе стоит проверить, что цены находятся под названиями, а суммы и остальные сведения не изменились.
Так же можно поправить текст на сайте, но желательно писать конкретный запрос. Например, вместо просьбы «Сделай сайт интереснее» написать: «Сократи описание студии до двух предложений и перенеси карточки занятий сразу под него». В таком запросе есть конкретное изменение, по которому будет понятно, правильно ли сервис выполнил задачу.
Если после правки результат станет хуже — например, вместе с цветами изменится расположение карточек, — вернуться к удачному варианту поможет история версий проекта.
Для этого нужно открыть Version history в верхнем меню, выбрать предыдущую версию и посмотреть ее в предварительном просмотре. Если она подходит, нажать Restore this version и подтвердить действие.
Подходящей версии можно дать понятное название — например, «Карточки готовы», чтобы позже было проще ее найти. Для этого нужно навести курсор на версию в истории и нажать значок карандаша.
Шаг 4. Добавить калькулятор стоимости
Далее на сайт можно добавить калькулятор: в нем получится выбрать мастер-класс, указать число участников и узнать общую стоимость услуг.
Для этого в запросе нужно описать поля и правило расчета. В примере калькулятор должен умножать цену занятия на число участников. В том же чате можно отправить следующий промпт:
После карточек мастер-классов добавь раздел «Рассчитать стоимость». В нем нужны выпадающий список «Мастер-класс» и поле «Число участников». В списке должны быть три занятия: «Керамика» — 2000 ₽ за человека, «Свечи» — 1800 ₽ за человека и «Акварель» — 1500 ₽ за человека. Допустимое число участников — целое число от 1 до 10. Начальное значение — 1. Итоговая стоимость равна цене выбранного занятия, умноженной на число участников. Она должна обновляться сразу после изменения занятия или числа участников. Если поле пустое, введено дробное число или число вне диапазона от 1 до 10, не показывай стоимость. Вместо нее выведи подсказку «Число участников — от 1 до 10». Расчет должен работать в браузере по этой формуле, без обращения к ИИ и внешним сервисам. Под результатом размести текст «Предварительный расчет. Запись на занятие не оформляется». Остальные разделы сайта не меняй.
По этому запросу сервис подготовит форму с выбором занятия и полем для числа участников. ИИ поможет создать калькулятор, а дальше приложение будет считать стоимость в браузере по указанной формуле.
Шаг 5. Проверить работу страницы
После добавления калькулятора стоит пройти весь путь посетителя: найти подходящее занятие, выбрать его в форме и рассчитать стоимость для группы. Для первой проверки можно выбрать керамику и указать трех участников — должна появиться сумма 6000 ₽.
Если расчет даст неверную сумму, сервис можно попросить исправить ошибку в том же чате. В сообщении нужно описать последовательность действий, полученный результат и то, что должно произойти. Например, для калькулятора подойдет такой запрос:
В калькуляторе выбрана «Керамика» и указаны 3 участника. Отображается 6000 ₽. После переключения на «Свечи» сумма остается прежней, хотя должна стать 5400 ₽. Исправь обновление результата при смене занятия. Оформление и остальные функции не меняй.
После проверки расчетов стоит уменьшить ширину окна и посмотреть, как расположены элементы страницы. Названия и цены должны помещаться в карточках, а поля и кнопки — не перекрывать друг друга.
Андрей Савкин: с помощью ИИ за 12 дней вернул бренду фитнес-бикини независимую витрину и канал заявок Шаг 6. Опубликовать сайт и поделиться ссылкой
Чтобы показать готовый прототип другому человеку, его нужно разместить в интернете. Для этого в Bolt есть встроенный хостинг: сайт можно опубликовать по бесплатному адресу, который заканчивается на bolt.host. Создавать аккаунт в отдельном сервисе для размещения не нужно.
На тарифе Free опубликованный сайт могут открыть другие люди, также он может появиться в поисковой выдаче. Публикация с доступом по приглашению есть на платных тарифах.
Для размещения сайта нужно нажать Publish в правом верхнем углу и подтвердить действие в открывшемся меню. После завершения в чате появится ссылка, по которой можно будет открыть сайт в новой вкладке. Именно этот адрес подойдет для отправки знакомым, а не адрес редактора с проектом.
Изменения в редакторе не появляются на опубликованном сайте автоматически. Чтобы посетители увидели новую версию, после правок нужно снова открыть меню Publish и нажать Update.
Как сделать простое приложение в Bolt.new
Для примера создадим в сервисе приложение для списка покупок. В нем можно будет добавлять продукты, указывать количество, отмечать купленное и удалять ненужное. После обновления страницы список останется на месте, чтобы к нему можно было вернуться позже.
Александр Зайцев: как я собрал сервис для финансового учета с Claude Code Шаг 1. Создать проект
Новый проект можно создать на главной странице Bolt.new или через Create project на странице проектов.
В приложении будет один экран с полями для названия и количества продукта, кнопкой добавления и самим списком. Чтобы записи оставались после закрытия страницы, их можно сохранять в локальном хранилище браузера. Так называют место для данных конкретного сайта в том браузере, где открыто приложение.
Этот способ подойдет для личного списка, но не для совместной работы с разных устройств. Например, покупки из Chrome на компьютере не появятся автоматически на телефоне. После очистки данных сайта записи могут исчезнуть, а в режиме инкогнито они удаляются после завершения приватной сессии. Для общего семейного списка нужно будет отдельно продумать хранение данных и доступ участников.
Для приложения можно использовать такой запрос:
Создай простое веб-приложение «Список покупок» с текстами на русском языке. Оно должно удобно работать в браузере на компьютере и смартфоне. На одном экране размести поле «Название продукта», необязательное поле «Количество» и кнопку «Добавить». Количество можно вводить текстом, например «2 шт.» или «1 л». Не разрешай добавлять продукт с пустым названием или названием только из пробелов. В таком случае показывай подсказку «Введите название продукта». У каждого продукта должны быть отметка «Куплено» и кнопка удаления. Купленный продукт нужно зачеркнуть, но оставить в списке. Отметку можно снять. Добавь счетчик некупленных позиций. Он должен учитывать число записей, а не количество упаковок: например, «Молоко — 2 шт.» считается одной позицией. Если записей нет, показывай текст «Список пока пуст». Сохраняй продукты, количество и отметки в локальном хранилище браузера, чтобы они оставались после обновления страницы и повторного открытия по тому же адресу. Не добавляй регистрацию, синхронизацию между устройствами и внешнюю базу данных. Оформление: светлый фон, темный текст, крупные поля и кнопки.
После отправки запроса сервис подготовит первую версию приложения и покажет ее в окне предварительного просмотра.
Шаг 2. Проверить, как работает приложение
После генерации стоит проверить основные функции: это поможет найти ошибки и понять, какие правки еще нужны. Например, можно добавить в список пункты «Молоко — 1 л» и «Хлеб — 1 шт.», а затем отметить хлеб купленным. Запись должна зачеркнуться и стать серого цвета.
Затем можно снять отметку, удалить один продукт и попробовать добавить запись с пустым названием или названием только из пробелов. В этом случае приложение не создало нового пункта и дало подсказку «Введите название продукта».
Шаг 3. Опубликовать приложение
Если все действия будут работать корректно, приложение можно опубликовать через Publish. Затем нужно открыть полученную ссылку и проверить его еще раз. Список там может оказаться пустым: браузер хранит данные каждого сайта отдельно, поэтому записи из предварительного просмотра могут не появиться. Можно добавить два продукта, отметить один купленным и обновить страницу — обе записи и отметка должны остаться на месте.
Дальше можно дорабатывать веб-приложение, добавлять поиск, фильтры, сортировку списка. Для этого достаточно написать запрос в чат, и сервис добавит новые функции — останется только снова опубликовать проект.
Сколько стоит Bolt.new и как следить за лимитом
Объем работы с ИИ в Bolt измеряется токенами — небольшими фрагментами текста, которые нейросеть обрабатывает при выполнении задачи. Они расходуются не только на сообщение в чате, но и на работу с файлами проекта, подготовку ответа и создание кода.
Бесплатный тариф Free включает 1 млн токенов в месяц, из которых за один день можно использовать не больше 300 000. В тариф также входит размещение сайта в интернете, но на опубликованной странице останется отметка Bolt.
Если нужен больший запас токенов, собственный адрес сайта или возможность убрать отметку сервиса, подойдет тариф Pro, он стоит от $25 в месяц.
Заранее определить, на сколько сайтов хватит лимита, нельзя: расход зависит от размера проекта и количества доработок. Чтобы следить за остатком, нужно открыть меню профиля и перейти в Settings → Subscription & Tokens. В этом разделе можно посмотреть баланс и дату обновления токенов.
Что важно запомнить
Bolt.new поможет создать сайт или приложение по описанию, внести правки и опубликовать результат. Несколько правил помогут контролировать работу ИИ:
- описывать, для чего нужен проект и какие действия должен выполнять пользователь;
- вносить правки по одной и уточнять, что нужно оставить без изменений;
- переименовывать удачные версии, чтобы позже было проще к ним вернуться;
- проверять основные функции в предварительном просмотре и повторять проверку после публикации;
- не передавать в чат пароли, ключи доступа и личные данные клиентов;
- следить за остатком токенов.
Для первого проекта достаточно одной понятной задачи. Дополнительные функции стоит добавлять, когда первая версия уже работает корректно.
Собрали топовые сервисы, которые помогут
с несколькими задачами сразу: сгенерировать текст, создать или оживить картинку, сделать песню и озвучку.