Forbes предсказывает, что уже в 2026 году появится первая компания-единорог, созданная одним человеком без навыков программирования. Значит ли это, что разработчики скоро станут не нужны, потому что их заменят нейросети? Мы решили не гадать, а проверить. В этой статье — наш эксперимент: как далеко можно зайти, создавая фронтенд-компоненты с помощью чат-бота.
Прежде чем погрузиться в эксперимент, разберёмся с двумя трендами, которые нас на него вдохновили — солопренеры и вайб кодинг. А заодно — объясним, какие условия мы задали, чтобы эксперимент был честным и показательным.
Спойлер: в конце статьи вы найдете PDF со всеми промптами и ответами нейросети.
Кто такие солопренеры?
Солопренер — это предприниматель, который строит бизнес в одиночку, без команды. В отличие от фрилансера, он не продает свое время, а создает продукт, бренд, сайт и маркетинг.
Термин появился давно, но стал особенно актуальным с развитием ИИ-агентов — они позволяют запускать SaaS-продукты без команды разработчиков. Представьте человека, который за пару недель собирает MVP и отдел продаж с помощью ИИ-ассистентов.
Что такое вайб-кодинг?
Vibe coding или вайб-программирование — это подход, при котором человек описывает задачу в нескольких предложениях на естественном языке в качестве промта для большой языковой модели (LLM), чтобы она сгенерировала рабочее ПО. В таком режиме работы появляется особое состояние «потока» или «вайба» — отсюда и название. Термин ввел в феврале 2025 года Андрей Карпатый, соучредитель OpenAI и бывший руководитель отдела ИИ в Tesla.
Условия эксперимента
Рынок наводнили нейросети для кодинга — плагины, командные интерфейсы и даже полноценные IDE. Чат-боты остаются самым доступным способом для создания кода без участия разработчика. Мы решили проверить, сможет ли человек без технического бэкграунда создать работающее фронтенд-приложения только с чат-ботом Claude 3.7 Sonnet от Anthropic, используя технику vibe code.
Для эксперимента привлекли системного аналитика с бэкграундом фронтенд-разработчика — опыт формализации задач для программистов поможет в составлении промптов, а навыки фронтендера позволят интерпретировать результаты кодогенерации. На время эксперимента специалист примерит на себя роль «вайбкодера» — не напишет ни строчки кода, но будет объяснять LLM, что нужно сделать, и контролировать результат.
Для теста взяли сложный компонент ленты комментариев под постом или статьей, состоящий, в свою очередь, из более простых элементов. Она должна соответствовать следующим требованиям:
- поддержка веток обсуждения;
- возможность свернуть и развернуть ветки обсуждения;
- действия с комментариями: ответ простым текстом либо с добавлением ссылок и цитат, ответ с цитатой из исходного комментария, лайк и жалоба.
Разработка велась на React (TypeScript) в несколько этапов, от простого к более сложному:
- Разработка счетчика лайков.
- Разработка поля для написания комментария, с поддержкой вставки ссылок и цитат.
- Разработка ленты комментариев с интеграцией счетчика лайков и поля ввода из предыдущего пункта.
Итоговый результат вайб кодинга покажем в конце статьи.
Особенности работы с Claude
Для вайб-кодинга мы использовали веб-версию Claude, умеющую запускать код в своей среде. Однако при обработке большого объема информации нейросеть часто ошибалась при генерации демо-файлов. Поэтому мы быстро перешли к локальному тестированию – переносили код в IDE и запускали проект вручную.
С веб-версией ИИ-помощника можно работать как в режиме чатов, так и в режиме проектов. Проекты представляют собой группу связанных чатов и нужны для возможности использовать одни и те же исходные данные, инструкции и материалы в нескольких чатах сразу.
Почему вместо этого не работать в рамках одного чата? Во-первых, это не всегда удобно – если вы решаете в одном чате сразу несколько разных задач, пусть даже имеющих какую-то общую базу, то по прошествии времени будет трудно отыскать в диалоге нужную вам информацию по конкретной задаче. Во-вторых, чат-бот даже при использовании Pro-тарифа имеет ограничения по доступному общему объёму сообщений. На количество доступных сообщений влияет в том числе продолжительность диалога, так как при генерации ответов чат-бот использует весь контент истории чата в качестве контекста. Соответственно, чем длиннее диалог, тем быстрее расходуется лимит.
Для создания проекта достаточно перейти в раздел Projects и выбрать опцию Create Project:
После создания проекта станет доступна «база знаний» проекта. В нее можно поместить общие инструкции для ИИ, данные о файловой структуре проекта, отдельные файлы с кодом и другие материалы, которые вы бы хотели сделать доступными для всех чатов в рамках проекта.
Материалы в базу знаний проекта можно добавлять по мере надобности. Следует учитывать, что её максимальный объём также ограничивается лимитом окна контекста.
Далее можно декомпозировать задачу, которую необходимо решить, на отдельные подзадачи и решать их в отдельных чатах в рамках проекта. В идеале нужно декомпозировать задачи на максимально автономные. Помним о том, что общие детали можно вынести в базу знаний проекта.
Может случиться так, что объём работ по какой-то из подзадач оказывается слишком большим, и чат сильно разрастается. В этом случае пользователь может увидеть предупреждение о том, что слишком длинные чаты могут быстрее исчерпать лимит сообщений, и предложение начать новый чат. Если вы видите, что работы здесь осталось еще много, и пока всё идёт по плану, можно попросить AI резюмировать текущий чат в одном-двух абзацах. Это необходимо, чтобы использовать резюмированный материал при начале нового чата. Однако нужно учитывать, что часть контекста при этом может быть утеряна. Если же текущее решение имеет ошибки, которые никак не удается исправить уже в течение нескольких итераций, имеет смысл вернуться к последней стабильной версии кода и использовать её как основу для нового чата.
Теперь перейдем к нашему личному опыту генерации отдельных компонентов фронтенд-приложения с помощью клода и методики vibe code.
Разработка счетчика лайков
Начали мы с простейшего компонента – счетчика лайков. Для его разработки потребовалось минимальное количество уточнений к изначальному промпту. Полный диалог можно посмотреть в конце статьи, а итоговый код – здесь. Компонент представляет собой стандартную иконку сердечка, меняющую цвет при клике, с отображением количества лайков.
Иконка сердечка была взята из библиотеки иконок lucid-react, хотя можно было использовать и собственные изображения. Для этого Claude должен знать файловую структуру проекта (в каких папках хранятся файлы компонентов, в каких – иконки) и путь к изображению.
Генерация счетчика лайков с помощью нейросети заняла около 10–15 минут. Однако сам компонент оказался простым и при ручной разработке потребовал бы сопоставимое время. С учетом времени на написание промпта и объяснение логики работы, преимущество ИИ для простых компонентов сводится к нулю. Также следует помнить о лимите сообщений при взаимодействии с нейросетью и использовать его максимально эффективно.
Выводы из эксперимента:
- Для простых компонентов использование ИИ-ассистентов нецелесообразно – больше времени будет потрачено на инструкции.
Поле для ввода комментария
Этот элемент интерфейса уже сложнее счетчика лайков в реализации и имеет значительный объем функциональности. Его примерный дизайн, который был приложен к запросу на разработку, выглядел так:
На верхнем изображении показано поле в неактивном состоянии, на нижнем – в активном, в которое оно переходит после клика пользователя по элементу.
В активном состоянии поле должно поддерживать возможность ввода текста, добавления ссылок и форматирования вводимого текста как цитат.
Поскольку функциональности предполагалось много, решили действовать пошагово, сначала создав базовую версию блока с возможностью переключения состояний и «моковыми» кнопками добавления ссылки и форматирования текста, перечислив при этом в исходной инструкции опции, которые должны быть доступны в итоговой версии, чтобы это было учтено при кодогенерации. Однако в итоге все равно пришлось давать чат-боту некоторые инструкции на уровне кода – например, по использованию contenteditable div вместо textarea для поля ввода и позиционированию элементов.
Главные проблемы возникли при добавлении ссылок: они то не добавлялись, то поле для их ввода улетало за пределы контейнера из-за неправильного позиционирования, то опция добавления ссылок срабатывала только после второго клика по ней. Для исправления ошибки можно скопировать ее текст в чат с ИИ-помощником и попросить исправить. Но нужно очень внимательно контролировать результат – иногда эти исправления могут сломать уже существующую функциональность. Частично страхует от этого добавление в промпт инструкции наподобие «при внесении правок убедись на 100%, что они не сломают существующую функциональность», но помогает это не всегда.
Иногда Claude, пытаясь исключить эти ошибки, упрощал компонент до неузнаваемости. В таких случаях лучше вернуться к последней работающей версии и начать заново – самостоятельно ИИ с кризисом не справится.
Итоговый сгенерированный нейросетью вариант выглядит следующим образом:
На иллюстрации финальный дизайн отличался от заданного – другие цвета и иконки. В реальных проектах это можно подкорректировать, указав в инструкциях необходимые цвета (HEX или RGB) и ссылки на иконки – в данном случае svg он сгенерировал самостоятельно. Однако нужно учитывать, что, скорее всего, может потребоваться также корректировка отступов, размеров или начертаний шрифта и т.п.
Просмотреть серию диалогов с Claude по генерации поля для ввода комментария и его итоговый код можно в конце статьи.
По итогам этого этапа также попробовали провести дополнительный эксперимент: показав Claude созданную им же итоговую версию поля для ввода комментария, попросили его сформулировать оптимальный промпт, с помощью которого можно было бы создать такой компонент, чтобы проверить, возможно ли всё же единовременное, а не пошаговое решение подобных задач.
Однако результат тестирования получившегося промпта выдавал ошибки, схожие с теми, что возникали на первой итерации пошагового подхода и привели в итоге к необходимости начать всё заново. Поэтому пошаговый подход пока остается более эффективным для вайб кодинга.
Выводы из эксперимента:
- Необходимо действовать пошагово и проверять корректность результатов на каждом шаге.
- Иногда для корректной работы компонента требуется написание низкоуровневых инструкций или внесение изменений в код вручную — особенно при необходимости правок на уровне JavaScript или сложных стилей.
- В инструкции по добавлению новой функциональности полезно включать предупреждение для Claude, чтобы он удостоверился, что вносимые правки не сломают существующую функциональность. Работает не всегда, но в среднем с таким предупреждением работает лучше, чем без него.
- Если не удается пофиксить возникающие ошибки с помощью чат-бота, и он начинает создавать более простые реализации компонентов в попытке исключить ошибки, лучше остановиться, вернуться к последней стабильной версии кода (при наличии) и начать с нее заново.
- Часть стилей всё равно придётся править вручную.
Лента комментариев
На последнем этапе собрали ленту комментариев. Изначальный её дизайн выглядел так:
В качестве образца был взят механизм работы ленты комментариев на vc.ru.
Здесь также действовали пошагово, выделив следующие этапы:
- Визуальное отображение и стилизация комментариев разного уровня (к статье/посту, ответов в ветках обсуждения), без дополнительной функциональности.
- Сворачивание и разворачивание веток обсуждения.
- Добавление опции отправки жалобы.
- Интеграция счетчика лайков для каждого элемента вместо статичной иконки.
- Разработка функциональности ответов, интеграция поля для их написания.
- Разработка функциональности ответов с цитатой: пользователь выделяет часть комментария, на который хочет ответить, выбирает в контекстном меню опцию ответа с цитатой, и выделенный фрагмент автоматически добавляется в поле ответа с «цитатным» форматированием и указанием автора исходного текста.
В процессе кодогенерации серьезных ошибок, которые Claude не смог бы исправить, не возникало. Однако следует отметить два момента.
Во-первых, при отсутствии соответствующих инструкций, Claude разделяет код произвольным образом. Так, например, для контекстного меню с опцией ответа с цитатой были созданы отдельные файлы без дополнительных указаний. В то же время, модальные окна, отображаемые при отправке жалобы, были помещены непосредственно в файлы с исходниками ленты комментариев.
Представьте, что вместо единого строительного проекта, где все стены, полы и окна строятся по одной схеме, разные рабочие начинают строить их наугад, без чертежей и согласования. В итоге дом получится неровным и непригодным для жизни. То же самое происходит в коде: если нейросеть без инструкции делит компоненты случайным образом, проект становится трудно поддерживать и развивать.
Во-вторых, для компонентов с большим объемом функциональности формирование демонстрационных файлов чревато ошибками, исправлять которые достаточно сложно и возможно нецелесообразно. Местами платформа имеет ограничения, из-за которых демо работает некорректно. Лучше проверять код самих компонентов самостоятельно, запустив его локально.
Тем не менее, помощь ИИ-ассистента в данном случае значительно упростила работу, так как весь код нейросеть генерировала самостоятельно вместо человека.
Достаточно объемная для реализации логика построения и работы веток обсуждения с комментариями разных уровней была реализована с первой попытки. Это потребовало достаточно подробных промптов с инструкциями. Однако отметим, что сложная логика работы подобных компонентов, как правило, не придумывается разработчиками «с нуля», а заранее описывается в техническом задании или постановке задачи — таким образом, у разработчиков изначально есть основа для создания промпта. На выполнение всей задачи потребовалось порядка 13 часов.
Итоговый результат выглядит и функционирует следующим образом:
Просмотреть серию диалогов с Claude по генерации ленты комментариев и итоговый код можно в конце статьи.
Выводы из эксперимента:
- Веб-версия Claude позволяет интегрировать в разрабатываемый компонент другие и корректно работать с ними.
- Декомпозицию кода всё равно необходимо продумывать самостоятельно и либо изначально указывать в промпте нужный результат либо вносить правки (в том числе в режиме чата) в уже сгенерированный Claude вариант.
- Проверять корректность функционирования сгенерированного кода большого объема и сложности лучше не на платформе Claude, а локально, скопировав его в файлы проекта.
Заключение
По итогам эксперимента приходим к неожиданному выводу: ИИ-ассистент становится действительно мощным инструментом только в руках того, кто уже умеет кодить. Без знания IDE, умения вносить правки в структуру файлов и понимания самого кода создание компонентов с помощью нейросети превращается в долгий и мучительный процесс. Даже подход вайб кодинга требует базовых технических знаний для эффективной работы.
Отладка сгенерированного кода без технического бэкграунда занимает непропорционально много времени, а некоторые проблемы просто невозможно решить без навыков программирования.
А вот для разработчиков использование AI обеспечивает существенное ускорение. Программист получает возможность переложить рутину на искусственный интеллект, сосредоточившись на планировании, декомпозиции и контроле качества.
Так что прогноз Forbes о солопренере-единороге может сбыться, но вряд ли без серьезной технической подготовки. Вайб-кодинг пока не заменяет профессионалов, а скорее повышает их продуктивность.
При этом стоит учитывать, что технологии ИИ продолжают активно развиваться, и их возможности в программировании становятся с каждым годом всё шире. Однако на текущем этапе нейросети всё ещё не способны самостоятельно создавать код с единым стилем, целостной архитектурой и точным соблюдением всех требований проекта.
Если вам удалось с помощью нейросети написать код веб-приложения, но вы столкнулись с трудностями довести его до продакшн-уровня, то команда Work Solutions поможет исправить огрехи нейросети и запустить проект в эксплуатацию.
