Claude vs ChatGPT + Codex: Кто лучше решит комплексную задачу? Тестируем 6 моделей

Дал одинаковое задание 3 моделям ChatGPT и 3 моделям Claude — создать интерактивную игру с кодом и интерфейсом. Задача комплексная — нужно и код написать, и текст придумать, и интерфейс сделать Подробное сравнение с картинками и GitHub репозиториями

Со времени как вышел Claude 4 прошло пару недель. Весь этот срок я постоянно сравниваю эти модели в разных задачах. И говорят, что Claude 4 отлично справляется с кодом, что мы сейчас и проверим

Сравню их в работе с комплексной задачей, где нужно и код написать, и текст, да и интерфейс еще сверху. Все это я хочу сделать не через правильно выстроенный промпт, а дать моделям максимальную свободу достичь результата так, как они захотят

Про разницу между интерфейсами и юзкейсами Claude vs ChatGPT я написал буквально пару дней назад на хабре, тут будет более углубленное сравнение

Сразу скажу, что я не профессиональный разработчик, поэтому где то могут быть неточности

Сегодня в нашем конкурсе будут участвовать 6 моделей

Вот их описание и технические характеристики

Sonnet 3.7 с включенным extended thinking

Sonnet 4 с включенным extended thinking

Opus 4 с включенным extended thinking

4.1 — Reasoning нет

о3 — Reasoning включен по умолчанию

Codex-1 — модель на основе o3, но оптимизированная для написания кода. Reasoning включен по умолчанию

Примерный принцип работы Extended Thinking и Reasoning
Когда включено расширенное мышление, модель создаёт блоки размышлений, в которых показывает своё внутреннее рассуждение. Затем она использует выводы из этих размышлений при формировании финального ответа

✍(◔◡◔)

Чтобы сравнить, я специально выбрал такую задачу, где придется работать как над текстом, так и над кодом. И чтобы пофилосовствовать тоже место осталось. Да еще и с визуалом

Да, промпт без всяких изысков и правил написания правильного промпта. Без указания ролей, структуры и тому подобного. Специально, что бы не фреймить модели на слишком точную задачу

Можете для начала глянуть инфографику, которую я сделал на основе этого исследования, а я ниже расскажу все детали

Сразу видно, что Claude модели не экономят в написании кода

Единственная модель без reasoning в моем списке

👉 Ссылка на результат, можно потыкать 👈

Простенькая реализация, нет анимаций перехода

Все сделано на одной страничке

С одного промпта выдала 137 строк HTML/CSS/JS кода. Что больше всех среди моделей ChatGPT, но меньше всех среди моделей Claude

Интерфейс создан на английском — в промпте я явно не указывал язык, поэтому ошибкой не считаю

✅ Минимальный вес среди всех — 5KB 🏆

✅ Есть мета-тег viewport, что позволяет корректно отображать мобильную версию

✅ Чистый, современный код (Vanilla JS + полный ES6+ стек)

✅ Вполне себе хороший визуал, без заметных косяков

💢 Отсутствуют медиазапросы для адаптации — это такие CSS-правила, которые активируются при определённых размерах экрана

💢 Никак не подсвечивается то, какой вариант был выбран

💢 Условие промпта you’ll break down the cascade of consequences выполняется очень поверхностно, но все же видно что старался

Ссылка на GitHub тут, а ваше мнение по этому коду можете написать в комментах

(⌐■_■)

Это было больно

👉 Ссылка на результат, можно потыкать 👈

Так же, как и у GPT 4.1 — простенькая реализация, нет анимаций перехода

Все тоже сделано на одной страничке

С одного промпта выдала 80 строк HTML/CSS/JS кода — почетное первое место 🏆

Интерфейс тоже создан на английском — в промпте я явно не указывал язык, поэтому ладно

✅ Тоже очень маленький вес, второй после модели 4.1 — 6KB

💢 Отсутствуют медиазапросы для адаптации — это такие CSS-правила, которые активируются при определённых размерах экрана

💢 Тоже никак не подсвечивается то, какой вариант был выбран

⛔ Текст выбранного варианта размазало по всему экрану

⛔ Вообще нет viewport — на мобилке плохо отображается

Ссылка на GitHub тут, а ваше мнение по этому коду можете написать в комментах

(╯°□°）╯︵ ┻━┻

Codex-1 сделан на основе о3 модели, но оптимизированный под написание кода

А еще, Codex недавно разрешили использовать и на подписке за 20$, раньше было доступно на аккаунтах только за 200$. И да, Codex это не модель, а интерфейс с Агентом, который помогает в разработке и может работать с вашим GitHub

👉 Ссылка на результат, можно потыкать 👈

Так же — простенькая реализация, нет анимаций перехода

Все тоже сделано на одной страничке

С одного промпта выдала 105 строк HTML/CSS/JS кода

Единственный из ChatGPT моделей, кто написал интерфейс на русском

✅ Тоже очень маленький вес — 6KB

💢 Тоже отсутствуют медиазапросы для адаптации

💢 Тоже никак не подсвечивается то, какой вариант был выбран

💢 Условие промпта you’ll break down the cascade of consequences тоже выполняется очень поверхностно. Одно предложение с 2-3 последствиями, и то оформленные не в виде каскада а в виде простого описания. Хорошая техническая база, но слабое раскрытие идеи

⛔ Тоже как и о3 отсутствует viewport для мобильной адаптации

Ссылка на GitHub тут, а ваше мнение по этому коду можете написать в комментах

o((>ω< ))o

Если оценивать зрелость реализации, то GPT 4.1 демонстрирует наиболее сбалансированный и «доведенный до ума» результат. Наличие адаптивного дизайна, продуманных UX-элементов (описание под заголовком, отдельный стилевой блок для истории) и самый малый вес файла говорят о высоком уровне проработки.

А перед этим давайте вспомним нашу инфографику про код, которая была выше

Еще две недели назад была вершиной эволюции в написании кода.

Сейчас выглядит как лох на фоне Claude 4, но все же лучше, чем любой результат моделей OpenAI🫡

👉 Ссылка на результат, можно потыкать 👈

С одного промпта выдала 317 строк HTML/CSS/JS кода

Единственная из моделей Claude, кто сделала интерфейс на английском

Вес уже около 20KB, что в 3.2 раза больше, чем все решения от ChatGPT

✅ Есть мета-тег viewport, что позволяет корректно отображать мобильную версию

✅ Более проработанный UX по сравнению с ChatGPT версиями. Например, есть кнопка выбора сценария и подробный раскрывающийся список сценариев

✅ Хорошо выполняется часть промпта, в которой я прошу показать break down the cascade of consequences

💢 Отсутствуют медиазапросы для адаптации, но все вполне корректно работает

⛔ Прям блокеров не нашел

Ссылка на GitHub тут, а ваше мнение по этому коду можете написать в комментах

＼（〇_ｏ）／

Обновилась с релизом Claude 4, который прошел буквально пару недель назад. На контрасте сразу видна разница.

👉 Ссылка на результат, можно потыкать 👈

С одного промпта выдала 562 строки HTML/CSS/JS кода

Интерфейс сделан на русском

Вес уже около 33KB, что в 5+ раз больше, чем все решения от ChatGPT

Тут ничего плохого сказать не могу, все сделано на высоте. Мы же помним, что это все было сделано с одного промпта?

✅ Под мобилку все хорошо работает

✅ Появились переходы между страницами появились, и загрузки между переходами, которые вызваны искуственно через setTimeout.

Т.е. у этой модели уже появилось понимание UX, что время ожидания увеличивает вовлеченность и ожидание результата.

И что перед пользователем лучше показывать одну задачу в моменте, а не все подряд

✅ Полноценно реализована часть с промптом

💢 Единственное замечание только в том, что тут больше всего кода как в плане количества строк, так и в плане веса. Но результат того стоит

Ссылка на GitHub тут, а ваше мнение по этому коду можете написать в комментах

ヾ(•ω•`)o

Дольше всех думает и жрет токены шо пздц, больше 10 минут не поиграешься — на тарифе за 20$ получается сделать не больше 4 больших запросов. Но результат того стоит

👉 Ссылка на результат, можно потыкать 👈

Opus выдал полноценный React-компонент + JSX с анимациями и шагами

С одного промпта выдала 497 строки React кода

Интерфейс сделан на русском

Вес уже около ~26KB, что в 4+ раза больше, чем все решения от ChatGPT, но меньше чем вес Sonnet 4

✅ Под мобилку все хорошо работает

✅ Есть переходы, как и в Sonnet 4, но тут еще добавилась пошаговость и прогрессия. И сам дизайн на уровень выше. А если сравнить с Sonnet 3.7 — то на порядок.

Нравится, как он в разных блоках сделал разные цветовые решения, что уже требует нестандартного подхода к решению задачи

✅ Реализовал промпт не как прототип, а как полноценный интерактивный опыт, что до сих пор меня удивляет🔥

💢 Из минусов можно назвать только то, что React требует предварительной сборки, просто как WebPage не откроешь

Ссылка на GitHub тут, а ваше мнение по этому коду можете написать в комментах

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

(✿◡‿◡)

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

И еще раз — этот результат был сделан, опираясь только на один промпт 🤯

🤖 GPT 4.1 (5KB) → 🔬 GPT o3 (6KB) → 🔧 GPT Codex (6KB) → ⚪ Sonnet 3.7 (20KB) → 🟠 Opus 4 (26KB) → 🟢 Sonnet 4 (33KB)

🔬 GPT o3 (80) → 🔧 GPT Codex (105) → 🤖 GPT 4.1 (137) → ⚪ Sonnet 3.7 (317) → 🟠 Opus 4 (497) → 🟢 Sonnet 4 (562)

🔬 GPT o3 (Простейшая) → 🤖 GPT 4.1 (Базовая) → 🔧 GPT Codex (Современная) → ⚪ Sonnet 3.7 (Структурированная) → 🟢 Sonnet 4 (Комплексная) → 🟠 Opus 4 (React-модульная)

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

Хоть в моем тесте и 100% победа Claude, но все равно эту LLM лучше брать платной только после того, как вы уже купили подписку на ChatGPT.

И да, для Claude лучше сразу брать подписку за 100$. Так как на подписке за 20$ я постоянно за лимиты вылетаю 😔

В следующей статье я подробнее расскажу про связку OpenAI Codex + Claude + MCP GitHub. И как я пишу с ними код. Учитывая, что до этого я почти не кодил