Топ нейросетей для кода и генерации сайтов: тестируем на одном ТЗ

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

В этой статье мы проведём практическое тестирование инструментов на одном конкретном ТЗ. Наша методика не претендует на научную работу, ведь результат работы нейросети недетерминированный и различается от случая к случаю. В этой статье мы разберём модели GPT-6, Claude 5.5, DeepSeek V4.1, Qwen 3.8 и GLM 5.3. Мы также изучим замеры бенчмарков, хоть и фокус будет на наш практический тест.

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

Я уже не раз отмечал, что рынок AI-инструментов для разработки перестал быть однородным ещё очень давно. Безусловно, можно идти по пути выбора самой мощной модели, но иногда другие нейросети вырываются вперёд, и постоянно идёт соревнование, как и между флагманами — например, GPT-6 против Claude Opus 5.5 — так и между открытыми моделями по типу Qwen, DeepSeek или GLM 5.3. Разные модели постоянно вырываются вперёд, так что выбор — задача не из простых.

Для теста я выбрал 5 моделей, которые, по моему опыту, выделяются среди остальных: конечно GPT-6 Astra, его конкурент Claude Opus 5.5, а также открытые DeepSeek V4.1-Flash-1017, Qwen3.8-Max-Prime и GLM-5.3. Все модели доступны на нашей платформе BotHub, мы имеем также и другие модели, которые можете посмотреть по ссылке.

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

Методика тестирования у меня простая: я отправляю в чат промпт с нашим ТЗ (которое я опишу ниже), фиксирую стоимость генерации и выдаю свою оценку, основываясь на пяти параметрах, таких как соответствие пунктам ТЗ, читаемость и семантика кода, работоспособность с первого раза, визуальная целостность и адаптивность (то бишь UI/UX), потраченные ресурсы на генерацию.

Ещё раз подчеркну, что я расставлял модели не в порядке от лучшего к худшему, так как модели из разного ценового сегмента.

Существующие бенчмарки

Ради чистоты и полноты эксперимента давайте обратимся к двум бенчмаркам: llm-stats и TerminalBench.

LLM-Stats даёт нам такой топ:

Если верить ему, то одни из лучших в кодинге — это DeepSeek-V4.1-Flash, GPT-6 Astra и Claude Opus 5.5.

А вот Terminal-Bench даёт немного другие данные:

В обоих рейтингах первые строчки занимают модели от Anthropic. Claude Opus 5.5 и Claude Sonnet 5.5 занимают часто первые места, но они очень дорогие. Позиции OpenAI тут на крепком третьем месте, причём у них есть модели, которые в разы дешевле других.

В топ-10 общего рейтинга пробились китайские DeepSeek (9 место) и Moonshot AI (Kimi K3) (10 место). В топ-20 также затесались GLM-5.3 (9 место) и Qwen3.8-Max (13 место).

Тестирование

Сравнивать модели по агрегированным баллам из бенчмарков конечно удобно, но если нужно выбрать модель под вашу задачу и у вас ограниченные ресурсы, то без практического теста не обойтись. DeepSeek может в одних кейсах побеждать за счёт дешёвой цены, а где-то без Claude Opus не обойтись.

Поэтому мы как раз и строим тест вокруг нашего одного ТЗ. Задача формулируется как генерация одного файла index.html, который не требует установки зависимостей или запуска локального сервера. Это ограничение помогает не мучиться с запуском и сфокусировать ресурсы модели на генерации сайта.

Кстати, все сайты доступны по ссылке.

Содержательно сайт представляет собой лендинг продукта компании ООО «Рога и Копыта», черноморского отделения Арбатовской конторы по заготовке рогов и копыт, с четырьмя смысловыми блоками: шапка с навигацией по якорям, секция с описанием и преимуществами, форма обратной связи и блок часто задаваемых вопросов, а также иметь тумблер переключения темы, попап-окна, а FAQ должен быть интерактивным.

Важно, чтобы HTML-структура отражала иерархию контента. Кроме того, я попросил соблюдать БЭМ — компонентный подход к веб-разработке от Яндекса.

Адаптивная вёрстка должна быть mobile-first, с явным meta viewport и как минимум двумя контрольными точками.

Форма обратной связи с полями имени, email и сообщения, с клиентской валидацией без отправки данных на сервер. Валидация должна блокировать отправку при пустых полях и при некорректном email, а сообщение об ошибке появляться рядом с соответствующим полем, не ломая вёрстку и не всплывая через alert.

Плавный скролл к якорям реализуется либо через CSS-свойство scroll-behavior, либо через JavaScript, но в любом случае он должен работать при клике по пунктам навигации.

CSS без внешних фреймворков, включая запрет на подключение Bootstrap, Tailwind, но с разрешением подключения шрифтов с Google Fonts и Normalize.css. JavaScript также пишется на ванильном синтаксисе, без jQuery, React или любых других библиотек, и размещается внутри <script>.

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

Критерии оценки

Оценивать я решил системно, через шкалу к каждому критерию, и подвожу средний и медианный балл. Оценка идёт по 10-балльной шкале. Среди критериев есть такие:

1. Соответствие ТЗ: оценивает полноту реализации наших требований. Высший балл за выполнение всех требований, средний балл за отсутствие необязательного или обязательного пункта, а ниже — если несколько пропусков требуют отдельной итерации.

2. Качество кода: смотрит на читаемость, семантику, соблюдение БЭМ. Последовательность, структура, иерархия и лично моя оценка по поддержке кода исходя из качества.

3. Работоспособность — проверяется открытием файла в браузере без правок. Файл может открываться и не содержать ошибок, но иметь ошибки интерфейса, и это также учитывается. Высший балл за работу без фиксов, ниже — если ключевые функции не работают.

4. Дизайн и UX оценивает визуальную целостность, адаптивность и доступность. Светлая и тёмная тема, наличие фокуса, читаемость, централизация и ровность. А ещё оценка, насколько дизайн похож на нейросгенерированный.

5. Стоимость одного прогона высчитывается по нашим текущим тарифам, с учётом токенов. Тут всё просто: дешевле — больше балл, дороже — меньше балл.

Каждая итерация выполняется с чистого чата, без контекста. Промпт для всех моделей одинаковый, который я покажу ниже. Оценка выставляется из расчёта работоспособности и валидации HTML, консоли. Экспертная часть выставляется мной, на основе пользования сайта.

Ну и наконец — сам промпт-ТЗ:

Ты — фронтенд-разработчик. Сгенерируй один файл index.html для одностраничного сайта компании ООО «Рога и Копыта», Черноморское отделение Арбатовской конторы по заготовке рогов и копыт.

Верни только код файла, без пояснений, без разбивки на несколько сообщений и без markdown-обёртки. Весь CSS — внутри <style>, весь JavaScript — внутри <script>. Файл должен открываться в браузере двойным кликом и работать без правок.

Содержание сайта:
1. Шапка с логотипом-текстом «Рога и Копыта» и навигацией по якорям: «О нас», «Преимущества», «Отзывы», «FAQ», «Контакты». На мобильных навигация сворачивается в кнопку-бургер.
2. Секция «О нас»: краткое описание отделения, годы работы, направления деятельности — заготовка рогов, приём копыт, оптовая поставка, работа с юридическими лицами. Текст осмысленный, без lorem ipsum.
3. Секция «Преимущества»: четыре-шесть карточек с иконками (можно символами или инлайн-SVG) и коротким описанием. Например: приёмка 24/7, собственный парк транспорта, прозрачные акты приёмки, работа с НДС, выезд оценщика.
4. Секция «Отзывы»: два-три отзыва от вымышленных контрагентов с именем, должностью и городом.
5. Секция «FAQ»: минимум пять вопросов с раскрывающимися ответами. Аккордеон интерактивный, с aria-expanded.
6. Секция «Контакты»: форма обратной связи с полями имени, email и сообщения. Кнопка «Отправить». Данные никуда не уходят, отправка имитируется.
7. Подвал с копирайтом и юридическим адресом.

Обязательные элементы:
— Переключатель светлой и тёмной темы в шапке. Реализуется через CSS-переменные и переключение класса на <html> или <body>. Выбор сохраняется в localStorage и применяется при повторном открытии файла.
— Модальное окно (попап) с условиями приёмки рогов и копыт. Открывается по кнопке «Условия приёмки» в секции «О нас» или в подвале. Закрывается по крестику, по клику на оверлей и по клавише Escape. Фокус при открытии переводится в попап.
— Плавный скролл к якорям при клике по пунктам навигации. Реализация — через CSS scroll-behavior или через JavaScript, на твой выбор.
— Клиентская валидация формы: пустые поля и некорректный email блокируют отправку. Сообщение об ошибке выводится рядом с соответствующим полем, не через alert и не ломая вёрстку. При успешной отправке показывается сообщение об успехе и форма очищается.
— Анимации и гладкие переходы.

Технические ограничения:
— Семантическая разметка HTML5: header, nav, main, section, footer, form, label, fieldset, button. Не оборачивай всё в div без необходимости.
— Соблюдай БЭМ: блок__элемент--модификатор. Классы должны быть осмысленными и последовательными.
— Вёрстка mobile-first, с явным <meta name="viewport" content="width=device-width, initial-scale=1"> и минимум двумя контрольными точками (например, 768px и 1200px). Проверь, что на ширине 360px нет горизонтальной прокрутки.
— Доступность: alt у изображений и SVG, видимый фокус на интерактивных элементах, контраст текста и фона не ниже AA, label связан с полем через for/id.
— CSS пиши самостоятельно, без Bootstrap, Tailwind и других фреймворков. Разрешено подключить Normalize.css и шрифты с Google Fonts, но вёрстка должна сохранять читаемость и без них.
— JavaScript — ванильный, без jQuery, React и других библиотек. Никаких внешних запросов, кроме разрешённых шрифта и Normalize.css.
— Весь код в одном файле. Не оставляй комментариев вида «здесь добавьте свой код» и не сокращай секции многоточиями.

Дизайн: сдержанный деловой стиль, уместный для компании, которая всерьёз занимается заготовкой рогов и копыт. Цветовая схема нейтральная, акцентный цвет один. Типографика читаемая, отступы последовательные. Не делай сайт похожим на типовой шаблон с градиентными кнопками и стоковыми иллюстрациями.

Время теста

А теперь давайте протестируем каждую модель. Я разобрал каждую модель, вы можете сами потрогать результат по ссылке.

GPT-6-Astra

GPT-6 Astra сгенерировала такой сайт за 6.37718 RUB. Исходный код сайта доступен по ссылке. А сам сайт опубликован по этой ссылке.

Эта модель сделала всё качественно и с первой итерации, консоль чистая, переключатель темы работает, анимации, попапы. Семантика выдержана, БЭМ соблюдён. Адаптивность построена на двух контрольных точках — 768 и 1200 пикселей, с meta viewport и mobile-first подходом.

Навигация на мобильных сворачивается в бургер с корректным aria-expanded и aria-controls, закрывается по Escape и по клику вне шапки, а при переходе на десктопное разрешение состояние сбрасывается. Плавный скролл реализован через scroll-behavior: smooth с scroll-padding-top, чтобы липкая шапка не перекрывала заголовки секций.

Дизайн держится в сдержанной одноакцентной тональности.

Из минусов — слишком много текста, особенно видно на мобильном экране.

Средний балл — 8.8. Медианный балл — 10.

Claude Opus 5.5

Claude Opus 5.5 сгенерировал такой сайт за 42.32061 RUB. Исходный код сайта доступен по ссылке. А сам сайт опубликован по этой ссылке.

Файл открывается без правок, консоль чистая, все интерактивные элементы работают с первого раза: переключатель темы применяется до первой отрисовки через инлайн-скрипт в <head>, бургер закрывается по клику на ссылку и по Escape, аккордеон раскрывается через grid-template-rows, а попап закрывается по крестику, оверлею и Escape с возвратом фокуса на кнопку открытия.

БЭМ выдержан последовательно на всём файле, без провалов в конце. Форма валидирует на blur, input и submit, ошибки выводятся под полем через aria-describedby, aria-invalid переключается, фокус уходит на первое невалидное поле. После успешной отправки форма очищается, кнопка на время отправки блокируется и меняет текст, статус выводится в role="status" с персональным обращением по имени — это не требование ТЗ, но деталь, которая отличает аккуратную реализацию.

Адаптивность построена на двух контрольных точках, на 360 пикселях горизонтальной прокрутки нет. Навигация на мобильных работает как выпадающая панель с aria-expanded и aria-controls, на десктопе становится горизонтальной с подчёркиванием активного пункта. Плавный скролл через scroll-behavior с scroll-padding-top, чтобы липкая шапка не перекрывала заголовки. Отдельно стоит отметить prefers-reduced-motion, skip-link, :focus-visible и visually-hidden — три вещи из четырёх в ТЗ не упоминались.

Дизайн — самая сильная часть. Тёмная тема на скриншоте выглядит как самостоятельная палитра, а не инверсия светлой: тёплый фон, приглушённый акцент, пересчитанные поверхности. Типографика построена на паре PT Serif и PT Sans, заголовки с clamp(), отступы заданы через шкалу --space-1…6. Из типично нейросетевых приёмов есть разве что карточки преимуществ с иконками и reveal-анимация при скролле — она на грани уместности, но не портит впечатление. Подключение Google Fonts разрешено ТЗ, и модель использовала это осмысленно, а не как способ обойти запрет на фреймворки.

Средний балл — 8.4. Медианный балл — 10.

Как и у GPT-6 Astra, медиана выше среднего из-за единственной низкой оценки за стоимость: по четырём содержательным критериям модель идёт ровно, без провалов. Если задача разовая и бюджет не ограничен, Opus 5.5 даёт результат, который можно без проблем использовать.

DeepSeek V4.1-Flash

DeepSeek V4.1-Flash сгенерировал такой сайт за 6.41188 RUB. Исходный код сайта доступен по ссылке. А сам сайт опубликован по этой ссылке.

Цена совпадает с GPT-6 Astra.

С технической стороны реализация выделяется несколькими деталями. Переключатель темы не просто переключает класс, а по умолчанию проверяет системные настройки через prefers-color-scheme — если у пользователя в ОС включена тёмная тема, сайт откроется в тёмной сразу, без мигания. Аккордеон в FAQ использует grid-template-rows для плавного раскрытия, а не max-height, что делает анимацию более предсказуемой. При клике на новый вопрос предыдущий автоматически закрывается, хотя в ТЗ этого не было — деталь, которая улучшает UX на мобильных. Модальное окно собрано на нативном <dialog> с showModal(), закрывается по Escape, крестику и клику на backdrop, а фокус при открытии переводится на заголовок и возвращается на кнопку после закрытия.

Семантика и БЭМ на твёрдую пятёрку. Разметка включает header, main, section, aside, footer, form, fieldset, address, а классы вроде about__title, stat-card__row, faq__trigger, form__submit выдержаны последовательно от начала до конца файла.

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

Средний балл — 8.8. Медианный балл — 10.

Qwen 3.8 Max Prime

Qwen 3.8 Max Prime сгенерировал такой сайт за 65.78881 RUB. Исходный код сайта доступен по ссылке. А сам сайт опубликован по этой ссылке.

Более чем в десять раз дороже DeepSeek V4.1-Flash и в полтора раза дороже Claude Opus 5.5. При этом техническое исполнение находится на уровне лучших участников.

Файл открывается без правок, консоль чистая. Разметка семантически полная, всё ок. header, nav, main, section, article, aside, footer, form, fieldset, legend, address. БЭМ выдержан строго на всём протяжении кода — от шапки до подвала. Попап-окно имеет полноценную ловушку фокуса (Tab и Shift+Tab), закрывается по Escape, оверлею и крестику с возвратом фокуса на кнопку открытия.

JavaScript сложный и проработанный. Это конечно хорошо, но немного оверинжиниринг.

Семантика и БЭМ на высшем уровне. Разметка включает header, main, section, aside, footer, form, fieldset, legend, address, а классы вроде advantage-card__icon, faq__question-text, feedback-form__control--invalid выдержаны последовательно до конца файла. Форма проверяет минимальную длину имени и сообщения, корректность email через регулярное выражение, блокирует кнопку на время отправки и выводит ошибки в span под полем с aria-describedby.

Средний балл — 8.0. Медианный балл — 10. Ниже, чем у GPT-6 и DeepSeek, исключительно из-за цены. По качеству код сравнивается с топ-флагманами.

GLM 5.3

GLM 5.3 сгенерировал такой сайт за 5.34114 RUB. Исходный код сайта доступен по ссылке. А сам сайт опубликован по этой ссылке.

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

JS минимальный и достаточный для базового ТЗ: тема работает, аккордеон раскрывается, попап открывается и закрывается, форма валидирует email и пустые поля. Но нет скроллспая, управления фокусом при навигации, а валидация не проверяет минимальную длину имени и сообщения. Семантика упрощена: списки ul/li без section-обёрток внутри, article для отзывов есть, но структура плоская. БЭМ соблюдается, но классы короче и менее продуманы, чем у других моделей.

По цене модель вне конкуренции, но результат — компромисс: за минимум денег вы получаете минимум полировки.

Средний балл — 8.0. Медианный балл — 8.

Самый низкий средний и медианный балл среди всех участников. Модель выигрывает только по цене: за 5 рублей она выдаёт рабочий файл, но его придётся дорабатывать вручную, и эта доработка вполне съест стоимость.

Итог тестов

Довольно интересные результаты из тестов, которые отличаются от бенчмарков.

Я решил составить сводную таблицу всех наших тестов:

В общем, рекомендации такие: если хотите быстро и из коробки, то GPT-6 Astra. Если сайт сложный, мудрёный, то Claude Opus или Qwen 3.8 Max Prime. Если нужна золотая середина, то DeepSeek. А если важна маленькая стоимость — то GLM 5.3.

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

DeepSeek V4.1-Flash уже интереснее, прямой конкурент GPT-6 по цене, но с более интересным техническим исполнением. Модель самостоятельно добавила проверку системной темы (prefers-color-scheme) и использовала нативный <dialog> для попапа. Код чистый, без оверинжиниринга. Визуально сайт всё ещё выдаёт нейросеть, но по соотношению цены и качества это лучший выбор в тесте.

Claude Opus 5.5 — самая эстетичная генерация, а также с перспективой на более сложные фичи в будущем. Тёмная тема проработана как самостоятельная палитра, типографика аккуратная, а валидация формы включает персональное обращение по имени в статусе отправки. С технической стороны придраться не к чему. Проблема в цене: 42 рубля за один лендинг — это в семь раз дороже, чем у DeepSeek при сопоставимом уровне функциональности.

Qwen 3.8 Max Prime — модель продемонстрировала самый сложный JavaScript, так как там были скроллспай, полноценная ловушка фокуса, пересчёт высоты аккордеона при ресайзе окна. Код граничит с оверинжинирингом для такой простой задачи. Дизайн отличный, но стоимость в 65 рублей делает её применение для генерации одностраничников экономически нецелесообразным.

И наконец, GLM 5.3 — самая дешёвая модель в тесте. Базовый функционал работает, но вёрстка сырая и кривоватая, заголовок упирается в край, сетка статистики выглядит разрозненно, а на мобильных блоках не хватает отступов.

Заключение

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

Из идей можно сэкономить путём каскада, то бишь использовать условный DeepSeek для генерации каркаса и логики, а Claude Opus для функционала и финальной полировки дизайна. Если задача типовая, то GPT-6 Astra и DeepSeek без проблем справятся сами.

Разрыв между моделями меньше, чем я мог предполагать, но он предсказуем.

Все исходники, промпт и сгенерированные сайты доступны в репозитории на GitHub и на странице теста.