Обзор Bolt.new: Как он сэкономил мне часы на настройке разработки

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

Именно здесь Bolt.new отличается. Вместо того, чтобы тратить время на настройку, я просто ввел текстовый запрос и наблюдал, как он запускает整个 приложение (пакеты установлены, сервер запущен, предпросмотр жив) все внутри моего браузера.

В этом обзоре Bolt.new я расскажу о плюсах и минусах, о том, что это такое, для кого оно подходит, и о его ключевых функциях. Затем я покажу, как я использовал его, чтобы создать посадочную страницу для бренда экологичной бутылки для воды.

Я закончу статью, сравнив Bolt с моими тремя лучшими альтернативами (Replit, Windsurf и Cursor). К концу вы узнаете, является ли Bolt правильным инструментом для вашего рабочего процесса!

Вердикт

Bolt.new позволяет вам превратить обычные текстовые запросы в полные приложения за несколько минут, с редактированием, предпросмотром, интеграцией с GitHub и однократной установкой в браузере. Это мощный и совместимый инструмент, но более крупные проекты могут быть дорогими и работать медленнее.

Плюсы и минусы

• Превратите обычные текстовые запросы в полные приложения за несколько минут
• Редактируйте код, используйте терминал, просматривайте файлы и предпросмотр жив
• Отправляйте проекты напрямую в провайдеров хостинга, такие как Netlify
• ИИ обнаруживает проблемы и предлагает исправления мгновенно
• Поддерживает React, Vue, Next.js, Astro и многое другое
• Интеграция с GitHub и реальные предпросмотры для команд
• Строите полностью в браузере

• Токенная система оплаты может быть дорогой для более крупных проектов
• Требует изучения того, как писать четкие запросы
• Может замедлиться с крупными или сложными приложениями
• Ограничен для продвинутой настройки интерфейса или бэкенда
• Может потерять контекст в длинных сборках
• Требует Интернета

Что такое Bolt.new?

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

Платформа была создана командой StackBlitz. Они взяли свою существующую среду разработки на основе браузера и усилили ее ИИ. В результате Bolt.new стремится переопределить, как разработчики подходят к построению приложений, делая процесс быстрым и безболезненным.

Первый раз, когда я использовал Bolt, я понял, что ИИ не просто генерирует код. Он устанавливал пакеты, запускал серверы, отлаживал ошибки и развертывал окончательный продукт.

Bolt.new vs. Традиционные платформы разработки

Большинство традиционных платформ разработки заставляют вас делать всю тяжелую работу. Вы настраиваете свою среду, устанавливаете зависимости, конфигурируете инструменты сборки и настраиваете конвейеры развертывания. Это изнурительно.

Bolt.new интегрирует модели ИИ, работающие на основе WebContainers от StackBlitz. Часть WebContainers имеет решающее значение. Это означает, что вы получаете полную среду Node.js, работающую в вашем браузере.

Но то, что действительно отличает Bolt.new, – это то, что он дает моделям ИИ полный контроль над всей средой. Это включает файловую систему, сервер Node, менеджер пакетов, терминал и браузерную консоль.

Хотя другие инструменты кодирования ИИ, такие как Claude или ChatGPT, могут писать код, они не могут фактически запускать его, отлаживать или развертывать. Bolt может делать все это.

Технологический стек, который действительно работает

Bolt.new работает с наиболее распространенными фреймворками и библиотеками JavaScript. Все, что работает на StackBlitz, также работает гладко на Bolt.new.

Вы можете строить проекты с React, Vue, Next.js, Svelte и JavaScript. Он легко справляется с фреймворками CSS, такими как Tailwind, Bootstrap и styled-components.

Если вам нужен бэкенд, он может запустить серверы Express, работать с базами данных через Supabase и интегрировать обработку платежей через Stripe.

Платформа использует Claude 3.7 Sonnet LLM от Anthropic для производительности программирования. Это означает, что сгенерированный код является твердым большинство времени.

Играя хорошо с вашим существующим рабочим процессом

Bolt не изолирован. Он интегрируется с следующими платформами:

• Figma для дизайна
• Supabase для баз данных, аутентификации и хранения файлов
• GitHub для контроля версий, резервного копирования и сотрудничества
• Expo для разработки мобильных приложений
• Stripe для обработки платежей

Интеграция с GitHub – это прорыв. Вы можете начать проект в Bolt, привести его к хорошему состоянию, а затем отправить его в GitHub и продолжить разработку локально для большего контроля. Или сохранить весь проект в Bolt и использовать GitHub для резервного копирования и сотрудничества.

Затем есть хостинг Bolt. Он позволяет вам опубликовать ваш проект в живом URL за несколько секунд, с бесплатным доменом .bolt.host. Но если вы хотите использовать свой собственный домен или развернуть в другом месте, вы можете легко экспортировать свой проект.

Кто подходит для Bolt.new?

Вот типы людей, которые получают максимальную пользу от Bolt.new:

• Разработчики могут использовать Bolt.new для более быстрой разработки приложений с помощью генерации кода ИИ, отладки и однократной установки, сохраняя при этом возможность настройки кода.
• Менеджеры продуктов и дизайнеры могут использовать Bolt.new для прототипирования и построения приложений без глубоких знаний кодирования.
• Предприниматели и маркетологи могут использовать Bolt.new для быстрого создания и тестирования идей и MVP с минимальными техническими усилиями.
• Команды и предприятия могут использовать Bolt.new для сотрудничества, интеграции с GitHub и оптимизации разработки без настройки.
• Кто угодно, кто прототипирует, может использовать Bolt.new для тестирования концепций и итерации идей приложений за несколько минут, а не недель.

Ключевые функции Bolt.new

Вот Bolt.new функции, о которых следует знать:

• Полнофункциональная разработка в браузере: строите фронтенд и бэкенд-код прямо в вашем браузере без настройки.
• Генерация кода ИИ: вводите, что вы хотите на простом английском языке, и Bolt создает код, структуру и интерфейс для быстрого прототипирования.
• Поддержка фреймворков: работает с популярными фреймворками как React, Vue, Angular, Nuxt.js, Svelte и Astro.
• Пакеты и бэкенд: устанавливайте пакеты npm, настраивайте логику бэкенда и соединяйте базы данных как Supabase.
• Редактирование кода: редактируйте свой проект вручную с помощью встроенного редактора, терминала и файлового менеджера.
• Однократная установка: публикуйте мгновенно с помощью провайдеров хостинга, таких как Netlify.
• Живой предпросмотр и сотрудничество: видите обновления в реальном времени и сотрудничайте легко.
• Обработка ошибок: обнаруживает ошибки в коде и предлагает исправления.
• Гибкая цена: бесплатно для физических лиц, с платными планами для команд и предприятий.

Как использовать Bolt.new

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

1. Создайте учетную запись
2. Добавьте запрос
3. Улучшите запрос с помощью ИИ
4. Импортируйте файлы из Figma и GitHub
5. Сгенерируйте веб-сайт
6. Просмотрите код
7. Предпросмотр вашего проекта
8. Доступ к библиотеке запросов
9. Редактируйте с помощью ИИ
10. Просмотрите настройки проекта
11. Подключите интеграции
12. Опубликуйте

Шаг 1: Создайте учетную запись

Я начал, перейдя на bolt.new и нажав “Начать” в правом верхнем углу. После создания учетной записи я смог начать создавать приложения и веб-сайты, общаясь с ИИ.

Шаг 2: Добавьте запрос

Я ввел следующий запрос в пустое поле:

“Создайте яркую посадочную страницу для нового бренда экологичной бутылки для воды с множеством зеленых цветов, изображений природы и кнопкой предзаказа.”

Шаг 3: Улучшите запрос с помощью ИИ

Ниже моего запроса были два варианта: я мог загрузить файлы или улучшить запрос.

Загрузка файлов позволяет вам добавить их в ваш проект или использовать их как справочные материалы. Когда вы загружаете файл, вы можете описать, как Bolt должен использовать его в вашем запросе, или позволить Bolt обработать его автоматически.

Я не имел файла для загрузки, но я хотел попробовать улучшить запрос. Я выбрал этот вариант, и Bolt сразу же улучшил мой запрос со следующим описанием:

“Вы являетесь веб-дизайнером, которому поручено создать яркую, экологичную посадочную страницу для ‘AquaVerde’, нового устойчивого бренда бутылок для воды, запускаемого в следующем месяце.

Обзор бренда:
AquaVerde производит премиальные многоразовые бутылки для воды, сделанные из 100% переработанных материалов, ориентированные на экологически сознательных потребителей в возрасте от 25 до 45 лет, которые ценят устойчивость и качество.

Требования к дизайну:

Палитра цветов:
– Основной: различные оттенки зеленого (#2E7D32, #4CAF50, #81C784)
– Второстепенный: земляные тона (коричневые, бежевые) и чистые белые
– Акцент: океанский синий (#1976D2) для контраста

Визуальные элементы:
– Геройский раздел с высококачественными изображениями природы (леса, горы или чистые источники воды)
– Фотография продукта, показывающая бутылки в естественных условиях
– Иконки, представляющие устойчивость (символы переработки, листья, капли воды)
– Чистая, современная типография, передающая доверие

Структура контента:
1. Заголовок с логотипом и навигацией
2. Геройский раздел с убедительным заголовком об устойчивости
3. Особенности продукта, подчеркивающие экологичные материалы
4. Статистика воздействия на окружающую среду
5. Отзывы клиентов (если доступны)
6. Раздел предзаказа с ценой

Кнопка вызова к действию:
Создайте заметную кнопку “Предзаказ сейчас – сэкономьте 25%” в геройском разделе и повторите ее стратегически на протяжении всей страницы. Кнопка должна выделяться, сохраняя при этом экологичный эстетический вид.

Технические характеристики:
– Адаптивный дизайн
– Быстрая загрузка
– Соответствие стандартам доступности
– Включите эффекты наведения и плавную прокрутку

Предоставьте подробное описание макета посадочной страницы, включая конкретное размещение элементов, предложенный текст для ключевых разделов и то, как дизайн передает миссию бренда по устойчивости.

Этот описания был намного более подробным, чем мой оригинальный.

Я настоятельно рекомендую улучшить ваш запрос в Bolt для лучших результатов. Будьте конкретны о цветах, макете, функциях и даже тоне вашего текста-заполнителя.

Вот шаблон, который вы можете использовать, чтобы начать работать с вашими запросами Bolt.new:

“Постройте [тип приложения] с помощью [предпочтительного фреймворка] и [списка конкретных функций]. Стилизуйте его с помощью [предпочтительного дизайна]. Включите [необходимые интеграции]. Сделайте его [адаптивным/доступным/другими требованиями].”

Вы можете затем улучшить этот запрос с помощью улучшителя ИИ.

Не пытайтесь построить все сразу. Начните с простого и итерируйте. Постройте основную функциональность сначала, запустите ее, а затем попросите улучшения по одной функции за раз.

Шаг 4: Импортируйте файлы из Figma и GitHub

Также стоит отметить, что с помощью Bolt вы можете загрузить файлы Figma и GitHub. Это означает, что вы можете превратить кадры дизайна Figma в рабочее веб-приложение или интерактивную HTML-страницу почти мгновенно.

Шаг 5: Сгенерируйте веб-сайт

Немедленно Bolt приступил к созданию моей посадочной страницы. Чат-бот слева показал весь процесс Bolt. Справа был предпросмотр.

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

Шаг 6: Просмотрите код

Одна из моих любимых вещей о Bolt.new – это то, насколько легко переключаться между предпросмотром и кодом.

Шаг 7: Предпросмотр вашего проекта

Вы также можете просматривать предпросмотр различными способами (в новом окне, на мобильном устройстве и в полноэкранном режиме), выбрав различные иконки справа.

Шаг 8: Доступ к библиотеке запросов

Внизу чат-бота были следующие варианты:

• Загрузите файлы
• Улучшите запрос
• Переключитесь между режимом обсуждения и режимом сборки
• Откройте библиотеку запросов (или используйте “/”)
• Поискайте в центре помощи

Библиотека запросов не была чем-то, что я видел раньше в любом из генераторов кода ИИ, которые я пробовал. Она позволяла мне сохранять, организовывать и повторно использовать мои любимые запросы в нескольких проектах.

Шаг 9: Редактируйте с помощью ИИ

Я хотел, чтобы Bolt сделал правки с помощью ИИ, поэтому я дал чат-боту следующий запрос:

“Обновите дизайн посадочной страницы, изменив палитру цветов на более мягкие, пастельные оттенки зеленого и синего для спокойного, экологичного вида. Убедитесь, что все кнопки и акценты отражают эту новую цветовую схему, сохраняя при этом хорошую контрастность для доступности.”

Через несколько минут Bolt применил мой запрос к посадочной странице. Она не выглядела сильно khác, но цвета были немного мягче и более пастельными, как я и просил.

Шаг 10: Просмотрите настройки проекта

Справа были мои настройки проекта, где я мог изменить видимость проекта. Это также было место, где я мог подключить домен, просмотреть аналитику и многое другое.

Шаг 11: Подключите интеграции

Я также мог добавить интеграции, такие как Stripe, Supabase или GitHub.

Шаг 12: Опубликуйте

Как только я был доволен всем, я нажал “Опубликовать” в правом верхнем углу.

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

Топ-3 альтернативы Bolt.new

Вот лучшие Bolt.new альтернативы, которые я бы рекомендовал.

Replit

Первая альтернатива Bolt.new, которую я бы рекомендовал, – это Replit AI. Это облачная среда разработки, поддерживающая более 50 языков.

Replit выделяется широкой поддержкой языков, встроенной установкой и реальным сотрудничеством. Его Ghostwriter AI помогает с кодом и отладкой, хотя с меньшим контекстом, чем Bolt.new.

Между тем, Bolt.new фокусируется на быстрой полнофункциональной веб-разработке из обычных текстовых запросов. Он справляется с настройкой пакетов, отладкой и установкой. Он идеален для сольных разработчиков или тех, кто быстро прототипирует с фреймворками, такими как React, Vue и Next.js.

Выберите Replit AI для командной работы, многоязычного кодирования и доступа к облачной среде разработки. В противном случае выберите Bolt.new, чтобы быстро строить приложения с помощью ИИ.

Прочитайте мой обзор Replit AI или посетите Replit!

Windsurf

Следующая альтернатива Bolt.new, которую я бы рекомендовал, – это Windsurf. Это помощник кодирования ИИ, который помогает разработчикам писать код более легко, особенно для дизайна интерфейса.

Обе платформы ускоряют разработку, но Windsurf выделяется функциями, которые дают ему более глубокое понимание вашей базы кода.

Между тем, Bolt.new идеален для быстрого превращения идей в функциональные веб-приложения. Он работает в браузере, поддерживает React и Next.js и автоматически справляется с настройкой, отладкой и установкой.

Если вы хотите получить больше контроля и продвинутые инструменты кодирования, выберите Windsurf. Чтобы быстро начать проект с помощью ИИ, выберите Bolt.new.

Прочитайте мой обзор Windsurf или посетите Windsurf!

Cursor

Последняя альтернатива Bolt.new, которую я бы рекомендовал, – это Cursor AI. Это редактор кода, который делает кодирование проще с помощью автозаполнения, многофайлового редактирования и четкого понимания всего вашего проекта. Он идеален для разработчиков, работающих над крупными проектами, которые нуждаются в точной, контекстно-зависимой помощи и инструментах отладки.

Напротив, Bolt.new фокусируется больше на быстром генерировании полнофункциональных веб-приложений. Вы можете быстро строить и запускать приложения без ручного кодирования. Его ИИ справляется с пакетами, исправляет ошибки и управляет установкой.

Для быстрого создания и развертывания приложений выберите Bolt.new. Для более крупных проектов, которые требуют более глубокого понимания кода, выберите Cursor AI.

Прочитайте мой обзор Cursor AI или посетите Cursor!

Обзор Bolt.new: Правильный инструмент для вас?

После использования Bolt.new я могу честно сказать, что он чувствуется не как инструмент для кодирования, а как творческий партнер. Смотреть, как он запускает живой сайт из простого запроса, было как магия.

Но, учитывая все это, Bolt не пытается заменить каждый инструмент для кодирования. Он лучше всего подходит, когда вы хотите протестировать идеи и позволить ИИ справиться с сложными частями разработки. Для меня это было именно то, что мне нужно.

Но если вы задумываетесь, как Bolt сравнивается с другими платформами, вот мой анализ:

• Replit идеален для тех, кто хочет облачную среду разработки с поддержкой нескольких языков и сотрудничеством.
• Windsurf идеален для тех, кто хочет получить больше контроля с помощью продвинутых инструментов кодирования.
• Cursor идеален для тех, кто работает над более крупными, более сложными проектами, которые требуют более глубокого понимания кода и контекстно-зависимой помощи.

Спасибо за чтение моего обзора Bolt.new! Надеюсь, он был вам полезен.

Bolt.new предлагает бесплатный план с лимитом в 150 000 токенов в день. Попробуйте его сами и посмотрите, как вам понравится!

Часто задаваемые вопросы

Является ли Bolt New бесплатным?

Да, Bolt New предлагает бесплатный план с лимитом в 150 000 токенов в день и 1 миллионом токенов в месяц. Bolt.new помогает разработчикам быстро протестировать идеи, позволяя ИИ справиться с более сложными частями разработки.

Кто является генеральным директором Bolt New?

Генеральный директор Bolt.new – Эрик Симонс.

Стоит ли подписка на Bolt New?

Подписка на Bolt.new стоит того, если вы часто строите MVP или полнофункциональные приложения. Однако она может не быть лучшим выбором, если вы хотите только базовые предложения кода или предпочитаете работать локально. Это связано с тем, что токенная система оплаты может быть дорогой для более крупных проектов.

Лучше ли Bolt New, чем Cursor?

Bolt.new лучше для быстрого прототипирования и тестирования идей, поскольку он позволяет ИИ справиться с сложными частями разработки. Однако Cursor AI лучше для опытных разработчиков, работающих над крупными проектами, которые требуют более глубокого понимания кода и контекстно-зависимой помощи.

Каковы ограничения Bolt New?

Ограничения Bolt.new включают масштабирование крупных проектов, поскольку он может замедлиться. Он лучше всего подходит для быстрого прототипирования, а не для полной разработки.