Эволюция разработки: как «vibe-coding» меняет создание программного обеспечения
Концепция «vibe-coding» существенно изменила требования к процессу создания программного обеспечения. Если еще недавно человеку без технического бэкграунда приходилось часами изучать руководства по программированию, осваивать основы языков и тратить массу времени на исправление ошибок, то теперь достаточно описать желаемый результат на обычном английском языке и направить ИИ-агента в нужное русло. В итоге пользователь получает функциональный продукт, не вникая в каждую строку кода.
Современные возможности вышли далеко за рамки простой генерации кода языковыми моделями. Сегодня модели значительно преуспели в визуальной разработке: теоретически, получив скриншот интерфейса, они способны провести «обратную инженерию» готового продукта, вычислив необходимые макеты, отступы, цветовую палитру, типографику и компоненты для воссоздания оригинала.
Эксперимент: тест навыков ИИ-агентов
Чтобы выяснить, насколько далеко зашли эти технологии, я провел сравнительный тест. Я предоставил инструментам Claude Code, Codex и Google Antigravity одинаковые скриншоты приложения, не давая при этом ни исходного кода, ни файлов дизайна, и попросил каждую модель воссоздать интерфейс с нуля.
Выбор объекта тестирования
Для чистоты эксперимента я намеренно выбрал приложение, о котором модели вряд ли могли знать заранее. Изначально я рассматривал известные продукты, такие как Instagram, Snapchat или Google Maps, где воссоздание интерфейса стало бы сложной задачей. Однако их популярность создала бы проблему: модели могли бы опираться не на анализ скриншотов, а на свои «знания» того, как эти приложения должны выглядеть, что обесценило бы результаты теста. Поэтому я остановился на нишевом приложении Foqos — опенсорсном инструменте для блокировки отвлекающих сервисов. У него чистый, характерный интерфейс, не настолько сложный, чтобы тест превратился в оценку бэкенд-разработки. Хотя проект открыт, я запретил моделям искать его исходный код.
Методология и участники
Я использовал CLI-версии всех трех инструментов, настроив их в отдельных директориях с идентичным набором эталонных изображений. В тесте участвовали: Claude Code (на базе Opus 5), Codex (использовалась модель GPT-6 Sol) и Antigravity (на базе Gemini 3.1 Pro), причем для всех была активирована функция повышенных рассуждений (higher reasoning).
Результаты сравнения
Модель Codex оказалась лучшим универсальным инструментом. Стоит отметить, что в моей прошлой статье для XDA я указывал, что Codex отлично справляется со всем, кроме фронтенда. Однако с тех пор OpenAI представила семейство GPT-6 (включая Astra, Sol и Luna), и разница в работе с интерфейсами стала заметной. GPT-6 Sol, созданная специально для сложных задач и агентных рабочих процессов, показала результат, наиболее близкий к оригиналу.
Нюансы реализации
Не обошлось без забавной ошибки: Codex переименовал приложение из Foqos в «Fogos». Однако в остальном пропорции, отступы, формы карточек и размещение элементов оказались удивительно точными — на первый взгляд казалось, что это одно и то же приложение.
- Иконки: Codex воспроизвел кнопку «Поддержка» (Support) с иконкой сердца так, что она выглядела как часть UI. Claude же заменил её красным эмодзи, который заметно выбивался из стилистики. Antigravity в этом вопросе заняла промежуточную позицию.
- Детализация: Codex лучше справился с тем, чтобы рассматривать мелкие элементы как полноценные компоненты интерфейса, а не аппроксимации. Настройки, кнопки и контуры карточек у Codex были ближе к оригиналу, в то время как конкуренты чаще подставляли универсальные иконки или интерпретировали стиль по-своему (Claude, к примеру, активно использовал эмодзи).
- Типографика: Codex также оказался наиболее точен в шрифтах. Размер, начертание и иерархия текста выглядели максимально достоверно. Claude делал некоторые элементы крупнее, а Antigravity выглядела более сдержанной.
Ни одна модель не воссоздала все детали идеально, но Codex стал единственным инструментом, при просмотре которого в сравнении с оригиналом не возникало ощущения, что что-то «не так».
Анализ работы Claude и Antigravity
Особенности реализации интерфейса в Claude
Claude продемонстрировал достойный результат, хотя в ряде моментов модель проявила излишнюю креативность там, где это было не нужно. Тем не менее, это единственная из трех протестированных нейросетей, которая сделала некоторые воссозданные элементы управления по-настоящему интерактивными. В частности, переключатели можно было включать и выключать, а не просто рассматривать как статические элементы интерфейса. Расположение кнопок в целом оказалось близким к эталону, а общая структура экранов выглядела логичной.
Однако Claude уступил Codex в мелких визуальных деталях. Наиболее очевидным примером стало использование иконок на основе эмодзи, кроме того, в некоторых местах отступы, типографика и размеры элементов слегка отличались от оригинала. Хотя критических ошибок не было, при сравнении с эталоном результат выглядел скорее как качественная репродукция, а не как почти точная копия.
При этом именно у Claude была выявлена явная галлюцинация. В разделе «New Profiles» исходного скриншота присутствовали только пункты: Name, Blocking Strategy и Blocked Apps. В то время как Codex и Antigravity строго придерживались этих параметров, Claude самостоятельно добавил раздел «Options» с двумя переключателями: Enable Live Activity и Strict Mode. Учитывая, что эти функции реально существуют в приложении, возник вопрос, не искал ли Claude информацию о сервисе Foqos вопреки инструкциям.
Прямой запрос к модели показал, что доступа к сети не было: Claude пояснил, что оба пункта были придуманы на основе общепринятых стандартов для подобных приложений. Согласно заявлению ИИ, «Live Activity» показалась ему правдоподобной функцией, а «Strict Mode» — стандартной настройкой для блокировщиков приложений. Это делает ситуацию с галлюцинацией примечательной: технически модель нарушила задание, добавив элементы интерфейса, которых не было на скриншотах, но при этом угадала реально существующие функции.
Antigravity: отсутствие ошибок и последнее место
Antigravity было сложнее всего критиковать, так как в работе модели не было явных ошибок. Интерфейс выглядел проработанным, структура экранов — корректной, и не возникало ощущения поломки или абсурда. Проблема заключалась в том, что по сравнению с Codex и даже Claude, модель позволяла себе больше вольностей в дизайне. Карточки были заполнены иначе, отступы отличались, а многие элементы ощущались скорее как интерпретация Antigravity, нежели как прямое копирование.
Например, Antigravity упустила некоторые тонкие цветовые нюансы эталона. В отличие от Codex и Claude, заметивших, что в сетке активности используются более светлые оттенки фиолетового для выделения определенных ячеек, Antigravity отрисовала этот раздел более однотонно. При сравнении это сделало версию модели визуально более плоской и менее похожей на оригинал.
Хотя результат Antigravity нельзя назвать плохим, в нем не было ничего такого, что свидетельствовало бы о точном копировании эталона. Поскольку основной целью эксперимента было выяснение того, какой инструмент окажется ближе всего к скриншотам, эти мелкие различия в сумме привели Antigravity на последнее место.
Итоги эксперимента
Данный эксперимент оказался крайне интересным, так как все три инструмента справились с задачей гораздо лучше ожиданий. Ни один из них не создал идеальную копию, однако все они смогли извлечь значительный объем данных исключительно из скриншотов, включая верстку, отступы, цвета, структуру компонентов и даже некоторые интерактивные функции.
Технические детали выполнения промпта
Важным аспектом методологии стала настройка окружения для каждого инструмента. Я использовал интерфейс командной строки (CLI) для всех трех агентов, поместив каждого в изолированную директорию. Это исключило возможность переноса данных или стилистических настроек между сессиями. Важно подчеркнуть, что в качестве исходных данных выступал строго ограниченный набор референсных изображений: я намеренно не предоставлял моделям никаких файлов дизайна или сопроводительной документации, чтобы сфокусироваться исключительно на их способности анализировать визуальную информацию.
Особенности интерпретации визуальных данных
В ходе эксперимента проявились существенные различия в подходах моделей к интерпретации визуальной иерархии:
- Codex (GPT-6 Sol): Продемонстрировал наиболее глубокое понимание контекста элементов. Если Claude и Antigravity зачастую подменяли специфические иконки (например, профиля или настроек) на похожие, но «усредненные» варианты, то Codex стремился сохранить их функциональную узнаваемость.
- Claude: Несмотря на высокую интерактивность (рабочие переключатели), модель продемонстрировала склонность к «творческой интерпретации» там, где визуальная информация была неполной. Использование эмодзи вместо специализированных иконок стало маркером того, что модель отдавала приоритет быстрому заполнению пространства, а не точному воспроизведению дизайнерского замысла.
- Antigravity: Проявила излишнюю «осторожность» в работе с цветом и контрастом. Например, в сетке активности приложения, где исходник использовал деликатные градиенты и оттенки фиолетового для разграничения ячеек, Antigravity предпочла более безопасный, но плоский цветовой охват. Это привело к тому, что интерфейс, будучи функционально верным, терял глубину и визуальное сходство с оригиналом.
Данный тест подтвердил, что современные ИИ-агенты перешли от простого написания кода к визуальному проектированию. Хотя ни один из них не достиг 100% точности репликации, способность моделей «обратно проектировать» интерфейсы по скриншотам — от понимания типографики до воспроизведения структуры компонентов — кардинально меняет подход к прототипированию программного обеспечения.
