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

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

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

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

И так, поехали

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

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

Модели Claude

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

Модели ChatGPT

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

Примерный принцип работы Extended Thinking и Reasoning

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

Технические детали модели

✍️(◔◡◔)

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

? Исходный промпт для всех моделей выбрал такой

Каждая модель ИИ получила идентичное задание

Давай сделаем игру на основе этого промпта

Придумай 10 заранее заготовленных Change (сам придумай) - и в формате истории рассказываешь что бы произошло

I want to simulate a new reality by altering a single variable. I’ll give you the change, and you’ll break down the cascade of consequences — starting from the most fundamental shift down to specific, real-world effects — so I can trace the full chain of cause and reaction. Let’s begin with: [change]

Напиши код с интерфейсом

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

Результаты, которые выдала каждая модель

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

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

Нусс, поехали ⤵️

Начнем с результата моделей ChatGPT, а именно с ChatGPT 4.1

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

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

Нейтральные факты

Простенькая реализация, нет анимаций перехода
Все сделано на одной страничке
С одного промпта выдала 137 строк HTML/CSS/JS кода. Что больше всех среди моделей ChatGPT, но меньше всех среди моделей Claude
Интерфейс создан на английском — в промпте я явно не указывал язык, поэтому ошибкой не считаю

Плюсы & минусы

✅ Минимальный вес среди всех — 5KB ?
✅ Есть мета-тег viewport, что позволяет корректно отображать мобильную версию
✅ Чистый, современный код (Vanilla JS + полный ES6+ стек)
✅ Вполне себе хороший визуал, без заметных косяков

? Отсутствуют медиазапросы для адаптации — это такие CSS-правила, которые активируются при определённых размерах экрана
? Никак не подсвечивается то, какой вариант был выбран
? Условие промпта you’ll break down the cascade of consequences выполняется очень поверхностно, но все же видно что старался

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

(⌐■_■)

Следующей моделью у нас будет ChatGPT o3

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

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

Нейтральные факты

Так же, как и у GPT 4.1 — простенькая реализация, нет анимаций перехода
Все тоже сделано на одной страничке
С одного промпта выдала 80 строк HTML/CSS/JS кода — почетное первое место ?
Интерфейс тоже создан на английском — в промпте я явно не указывал язык, поэтому ладно

Плюсы & минусы

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

? Отсутствуют медиазапросы для адаптации — это такие CSS-правила, которые активируются при определённых размерах экрана
? Тоже никак не подсвечивается то, какой вариант был выбран
? Условие промпта you’ll break down the cascade of consequences тоже выполняется очень поверхностно, но как будто чуть лучше, чем у 4.1

⛔ Текст выбранного варианта размазало по всему экрану
⛔ Вообще нет viewport — на мобилке плохо отображается

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

(╯°□°）╯︵ ┻━┻

И последний кандидат из семейства OpenAI — Codex-1

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

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

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

Нейтральные факты

Так же — простенькая реализация, нет анимаций перехода
Все тоже сделано на одной страничке
С одного промпта выдала 105 строк HTML/CSS/JS кода
Единственный из ChatGPT моделей, кто написал интерфейс на русском

Плюсы & минусы

✅ Тоже очень маленький вес — 6KB
✅ Очень чистый и понятный код, но как и в примерах выше, сложно сделать плохой код на 100 строк

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

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

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

o((>ω< ))o

Вывод по анализу GPT моделей

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

Ну что, давайте посмотрим на модели Claude ⤵️

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

Начнем с модели Claude Sonnet 3.7

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

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

Нейтральные факты

С одного промпта выдала 317 строк HTML/CSS/JS кода
Единственная из моделей Claude, кто сделала интерфейс на английском
Вес уже около 20KB, что в 3.2 раза больше, чем все решения от ChatGPT

Плюсы & минусы

✅ Есть мета-тег viewport, что позволяет корректно отображать мобильную версию
✅ Более проработанный UX по сравнению с ChatGPT версиями. Например, есть кнопка выбора сценария и подробный раскрывающийся список сценариев
✅ Хорошо выполняется часть промпта, в которой я прошу показать break down the cascade of consequences

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

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

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

＼（〇_ｏ）／

Модель Claude Sonnet 4

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

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

Нейтральные факты

С одного промпта выдала 562 строки HTML/CSS/JS кода
Интерфейс сделан на русском
Вес уже около 33KB, что в 5+ раз больше, чем все решения от ChatGPT

Плюсы & минусы

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

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

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

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

ヾ(•ω•`)o

Модель Claude Opus 4 ?

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

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

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

Нейтральные факты

С одного промпта выдала 497 строки React кода
Интерфейс сделан на русском
Вес уже около ~26KB, что в 4+ раза больше, чем все решения от ChatGPT, но меньше чем вес Sonnet 4

Плюсы & минусы

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

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

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

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

(✿◡‿◡)

Вывод по анализу Claude моделей

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

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

Давай сделаем игру на основе этого промпта?
Я выбираю из 10 заранее заготовленных Change (сам выбери) - и ты мне в формате истории рассказываешь что бы произошло

I want to simulate a new reality by altering a single variable. I'll give you the change, and you'll break down the cascade of consequences—starting from the most fundamental shift down to specific, real-world effects—so I can trace the full chain of cause and reaction. Let's begin with: [change]

Итоговый саммари по всем моделям

Размер и эффективность

? 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-модульная)

Подход к коду

• ? Opus 4: React-компонент, требует среды выполнения, modular imports

• ? Sonnet 4: Объёмный HTML с множественными медиазапросами

• ⚪ Sonnet 3.7: Структурированный vanilla JS без адаптивности

• ? GPT Codex: Современный ES6+, без адаптации

• ? GPT o3: Базовый vanilla JS, без адаптации

• ? GPT 4.1: Vanilla JS с viewport оптимизацией

Мобильная адаптация

• ✅ GPT 4.1: Включает meta viewport

• ✅ Sonnet 4: Полные медиазапросы для разных экранов

• ✅ Opus 4: React responsive design

• ❌ Sonnet 3.7: Без мобильной оптимизации

• ❌ Codex, o3: Без viewport мета-тегов

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

Какие уникальные сценарии придумала каждая модель

? Opus 4 - Физико-технические

• Гравитация слабее на 50%

• Скорость света в 10 раз медленнее

• Металлы стали пластичными

• Воздух в 5 раз плотнее

? Sonnet 4 - Социально-философские

• Ложь видна как аура

• Передача памяти между людьми

• Растения общаются телепатически

• Смерть обратима 24 часа

⚪ Sonnet 3.7 - Научно-биологические

• Фотосинтез у людей

• Исчезновение электричества

• Животные получили человеческий интеллект

• Вода больше не замерзает

? GPT Codex - Космо-технологические

• Земля перестает вращаться

• Жизнь на Марсе обнаружена

• Лунная база в 1970-х

• Интернет никогда не изобретали

? GPT o3 - Фундаментальные физические процессы

• Земля вращается в 2 раза быстрее

• Гравитация ослабла до 80%

• Продолжительность жизни удваивается

• Искусственный интеллект пробуждается

? GPT 4.1 - Альтернативная история

• Люди не открыли электричество

• ИИ стал разумным в 1995 году

• У Земли две луны

• Римская империя не пала

Вывод

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

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

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

А если вам понравилось, то поставьте ⬆️ пожалуйста, я старался ^_^

P.S.

^_____^

Знаю, что тут не любят, когда публикуют что-то не по теме поста, но я написал и красиво оформил большой гайдбук по тому, как пользоваться ChatGPT и другими LLM.

Там есть почти все, от основ и до конкретных юзкейсов и как работают LLM под капотом

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

Можно как в компании своей запромоутить, так и для себя взять ?

https://chatgpt-pro-guide.netlify.app/

Подобный контент, но покороче, я пишу в тг