Сравнение Qwen 3.5, Gemini 3 Pro и Kimi K2.5 в задаче screenshot-to-code: подробный бенчмарк и выводы

Зачем мучить ИИ скриншотами? Проблема, которая не решена

Представьте, вы показываете обезьяне фотографию банана. Обезьяна понимает, что это бананы, и может даже нарисовать их. Теперь покажите ей скриншот дашборда с графиками, таблицами и кнопками. Попросите написать HTML, CSS и JavaScript, который воспроизведет это точно. Даже самая умная обезьяна сломается. Так же ломаются и большинство ИИ, даже в 2026 году.

Задача screenshot-to-code - это не просто 'посмотри и повтори'. Это многослойный кошмар:

• Визуальное восприятие: модель должна понять структуру - где заголовок, где карточка, где футер.
• OCR: вытащить точный текст, включая шрифты, размеры, отступы.
• Семантика: определить, что эта синяя кнопка - это именно 'кнопка', а не просто синий прямоугольник.
• Генерация кода: перевести все это в чистый, рабочий, современный фронтенд-код.

Каждая модель подходит к этому по-своему. Одни полагаются на встроенное зрение (как Gemini), другие на дообучение на дизайнерских макетах (как Kimi), третьи на raw логику (как Qwen). Мы взяли три самых громких имени начала 2026 года и устроили им ад.

Методология: как мы ломали модели

Мы не стали изобретать синтетические тесты. Взяли 10 реальных скриншотов из разных областей:

1. Простая карточка товара с Amazon.
2. Сложный дашборд администратора с графиками (из Tailwind UI).
3. Форма входа с капчей и переключателем 'запомнить меня'.
4. Комментарий из Twitter/X с аватаркой, ником, текстом и кнопками действий.
5. Хедер сайта с навигацией, выпадающим меню и поиском.
6. Мобильный интерфейс приложения для заказа еды.
7. Таблица данных с пагинацией и сортировкой.
8. Лендинг с героем-секцией, призывом к действию и футером.
9. Модальное окно с подтверждением удаления.
10. Нестандартный UI-компонент - кастомный аудиоплеер.

Промпт для всех моделей был одинаковым и простым: 'Напиши чистый HTML, CSS и JavaScript код, который точно воспроизведет этот пользовательский интерфейс. Используй современные практики. Не добавляй пояснений, только код.'

Оценка велась по трем критериям:

• Визуальная точность: насколько результат похож на оригинал в браузере.
• Качество кода: семантичность HTML, использование CSS Grid/Flex, отсутствие костылей.
• Функциональность: работают ли интерактивные элементы (кнопки, меню).

Результаты: кто оказался королем, а кто - пажом

1 Gemini 3 Pro: зрение есть, а с тактом проблемы

Модель от Google - это швейцарский нож с лазерной указкой. Она видит все. Буквально. Текст распознает идеально, даже мелкий и на контрастном фоне. Цвета определяет с точностью до HEX-кода. Но потом начинается самое интересное.

Gemini страдает от 'гиперреализма'. Она пытается воспроизвести каждый пиксель. Вместо того чтобы создать адаптивную сетку на Flexbox, она может захардкодить абсолютные позиции в пикселях. Увидев скриншот дашборда, она сгенерирует SVG для графиков (это круто!), но забудет про aria-атрибуты для доступности (это провал).

2 Kimi K2.5: китайский агент, который думает как фронтендер

Если Gemini - это перфекционист-художник, то Kimi - практикующий инженер. Модель от Moonshot AI показала самый сбалансированный результат. Она не всегда идеально распознает редкие шрифты (с этим был провал на скриншоте модального окна), но зато генерирует код, который хочется использовать в реальном проекте.

Kimi K2.5 явно дообучали на больших корпусах веб-интерфейсов. Она знает, что кнопку лучше сделать на <button>, а не на <div>. Она по умолчанию использует CSS-переменные для цветов. Она добавляет базовую accessibility. В тесте на мобильный интерфейс она одна догадалась добавить viewport meta-тег и медиа-запросы.

Ее слабое место - тексты на некитайских языках в сложном оформлении. OCR иногда спотыкается. Но если вам нужен не пиксель-в-пиксель клон, а рабочий, чистый прототип - это ваш выбор. Особенно учитывая цену, о которой мы писали в сравнении Kimi Code против Claude и Gemini.

3 Qwen 3.5: гений логики, страдающий дальтонизмом

Модель от Alibaba - это странный зверь. В тестах на чистую логику и рассуждение она часто побеждает, о чем мы упоминали в статье про Kimi K2.5 против Claude Opus. Но задача screenshot-to-code - не чистая логика. Это сплав зрения и креатива.

Qwen 3.5 отлично понимает структуру. Она верно определяет, что это трехколоночный макет. Она правильно вкладывает элементы. Но с цветами и шрифтами - беда. Она может определить, что заголовок 'жирный', но назначить ему font-weight: 800 вместо 700. Она видит синий цвет, но выдает #1E90FF вместо #007BFF, который был на скриншоте.

Ее код самый 'логичный' и хорошо структурированный, но визуально результат часто отличается. Если вы готовы потом вручную поправить цвета и отступы - это вариант. Если нет - будет больно.

Нюансы, которые решают все (и ловушки)

После 50+ запросов к API мы набили шишки. Вот что нужно знать, прежде чем запускать этот процесс в продакшен.

Ловушка 1: Модели ненавидят скриншоты с темной темой. И Gemini, и Qwen постоянно пытались 'исправить' темный фон на светлый, генерируя код с белым background-color. Kimi справлялась лучше, но тоже не идеально. Решение - явно указать в промпте: 'Сохрани темную цветовую схему'.

Ловушка 2: Шрифты - это ад. Ни одна модель не может точно определить шрифт по скриншоту. Все они выдают стандартные sans-serif или system-ui. Если точность критична - будьте готовы вручную заменять font-family.

Ловушка 3: Интерактивность требует подсказок. Модель видит кнопку, но не знает, что должно происходить при клике. Gemini иногда сама добавляла alert('Clicked!'), что смешно. Kimi и Qwen чаще оставляли пустые обработчики. Для сложных взаимодействий (выпадающие меню, слайдеры) нужно явно описывать логику в промпте.

Итог: какую модель выбрать для вашего проекта

Ответ, как всегда, зависит от задачи.

• Выбирайте Gemini 3 Pro, если вам нужна максимальная визуальная точность для статичного, сложного интерфейса (например, для восстановления дизайна по старому скриншоту). И не бойтесь потом рефакторить сгенерированный код.
• Выбирайте Kimi K2.5, если вы создаете прототип или MVP. Код будет чистым, рабочим и почти production-ready. Это подтверждает и ее успех в других задачах, как мы видели в тесте на сообразительность в NYT Connections.
• Выбирайте Qwen 3.5, если у вас ограниченный бюджет (она часто дешевле) и вы готовы пожертвовать визуальной точностью ради хорошей структуры кода. Или если ваш интерфейс предельно минималистичный и логичный.

Мой личный выбор после всех тестов - Kimi K2.5. Она предлагает лучший баланс. Она не идеальна, но ее ошибки легче исправить, чем избавляться от монструозных решений Gemini или подправлять цвета у Qwen.

FAQ: ответы на вопросы, которые вы хотели задать

Прогноз на конец 2026 года? Модели научатся генерировать не просто HTML/CSS, а сразу компоненты для React, Vue или Svelte. И они перестанут путать Grid с Flexbox. Но до тех пор - выбирайте инструмент под задачу, а не под хайп.