Дэвид Истман, разработчик ПО для Oracle Corp. и British Telecom, тестирует ИИ-инструмент для кодинга под названием Bolt. Совместно с ИИ-ассистентом он пробует разработать простенький проект блога, попутно рассуждая о сильных сторонах, ошибках и нюансах сервиса. Статья будет полезна новичкам и желающим приобщиться к вайб-кодингу работе с ИИ-помощниками.

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

И хотя эта установка никуда не исчезнет, теперь появился новый фактор — LLM, которые все чаще будут участвовать в процессе разработки. Грубо говоря, код нужно будет писать не только для людей, но и так, чтобы его могла правильно интерпретировать и дорабатывать AI-система, если она участвует в разработке.

С учетом этого, нам, скорее всего, придется привыкнуть к работе с готовыми компонентами, примерно как при сборке конструктора LEGO по инструкции.

Чтобы проверить работает ли моя теория на практике, я протестировал сервис Bolt.new. В описании говорилось, что сервис позволяет «сформулировать запрос, запустить, отредактировать и задеплоить full-stack веб-приложение». Я не был уверен, будет ли это похоже на взаимодействие с автономным агентом, который сам принимает решения, или же просто удобным инструментом для написания кода.

В любом случае в обзорной схеме я приписал бы Bolt’у следующий тип сервиса:

Итак, перейдем к работе с Bolt. После входа через GitHub меня встретил стартовый экран с тем самым смелым заявлением:

Теперь зафиксируем требования к моему предполагаемому проекту. 

Я хотел сделать блог, где на главной странице будет отображаться последняя запись. Справа должна быть колонка миниатюр с предыдущими публикациями. Я предполагал, что standfirst (первый абзац статьи) будет использоваться как текст рядом с картинкой-предпросмотром, без заголовка. У каждой записи будет одно hero-изображение (основное, крупное изображение в шапке поста). Довольно стандартный вид блога.

Не могу сказать, что у меня есть «любимый стек», но этот проект — неплохой повод попробовать новый инструмент для сборки сайтов. Bolt, например, предложил использовать Astro, который работал на базе Vite — хотя в наше время блог можно сверстать практически где угодно.

После выбора Astro я увидел интерфейс: чат слева, код и предпросмотр — справа. Astro сразу начал настраивать окружение.

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

Полезный и любопытный ответ. Для меня это означало, что я могу столкнуться с рядом ограничений, если захочу получить доступ к своему коду. (Если Bolt не даст скачать весь код или заблокирует доступ, проект может оказаться «запертым» внутри платформы. Это типичная ситуация для облачных no-code/low-code инструментов, которые удерживают пользователя в своей экосистеме — прим.перев.) Ладно, пока я исходил из моей главной цели — просто собрать быстренький проект.

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

Чтобы посмотреть текущий результат, я нажал большую кнопку Deploy, и это действие сразу отобразилось в чате. Как выяснилось, публикация осуществлялась в сотрудничестве с Netlify (облачная платформа для разработки и развертывания веб-сайтов и приложений, упрощающая процесс от создания до хостинга), партнера Bolt. В итоге я получил персонализированный URL, по которому мог проверить текущее состояние проекта.

Теперь сравним шаблон с тем, что я описывал в начале. Этот формат мне не подходил.

Я хотел, чтобы в качестве основного визуального элемента использовался standfirst, а рядом была маленькая картинка с датой. Без заголовка. Контент блога хранился в Markdown-файлах, при этом в front matter указывался заголовок, standfirst (в шаблоне — description), дата и hero-изображение.

Значит, нужно менять верстку.

Просматривая файлы в левой панели, я нашел описание миниатюр блога в src/pages/blog/index.astro.

Когда я начал вносить правки, страница при каждом нажатии клавиш принялась самопроизвольно прокручиваться вверх. Я спросил у ИИ в чем дело, но четких ответов он мне не дал. А поскольку редактор Bolt — просто веб-страница, а не полноценная IDE, то и у меня не было должного контроля над процессом. 

Я работал в Chrome на MacBook, поэтому предположил, что проблема может быть в браузере. Но раз у меня уже был URL страницы, я решил попробовать другой браузер — Safari. Пришлось снова авторизоваться, разрешить Safari показывать всплывающие окна и пройти повторную верификацию. В итоге я получил весьма ироничный результат, учитывая ситуацию:

Браузер, который я хотел использовать для отладки бага, оказался не самым подходящим. А тот, который я только что закрыл, рекомендовался самим Bolt.

В общем, исправило ли это проблему? Нет. После примерно 50-й строки кода любая попытка редактирования снова вызывала автопрокрутку. Но, по крайней мере, я смог закрыть Safari.

Я не нашел упоминаний об этой проблеме, так что, вероятно, это свежий баг.

Можно возразить: «А разве не логичнее вносить все изменения через чат, а не руками?» — и в этом был бы смысл.

Сначала я попросил Bolt заменить первый standfirst у каждой статьи, чтобы они не были одинаковыми с латинским «ipsum lorem». Bolt выполнил запрос.

Затем я попросил поменять местами цвет и шрифт даты и описания. Он сделал это, однако отменил мои предыдущие изменения в позиционировании и убрал заголовок.

Первичный вывод таков: не стоило устраивать точечную словесную перепалку с LLM. Лучше поручать ей крупные изменения, а мелкие дорабатывать вручную. Параллельно я боролся еще и с багом прокрутки. Но, видимо, прокрутку исправят только (человеческие) разработчики. А вот непредсказуемое поведение ИИ-ассистента Bolt контролировать не мог, ведь сервис не разрабатывал саму модель.

В итоге, позицию даты и интерлиньяж я правил сам.

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

Наконец, я захотел, чтобы блог был на главной странице, а список старых постов отображался сбоку от текущей записи. После этого запроса…

…основное изменение было выполнено, и на широком экране все выглядело именно так, как я хотел.

После этого я смог вернуть свои предыдущие правки стилей.

Финальные мысли

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

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

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

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

В целом, ИИ-ассистенты — неплохой инструмент для упрощения процесса написания кода. Основная задача — это интегрировать машину в процессы так, чтобы она не осложняла работу человека.