Со времени как вышел 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/
Подобный контент, но покороче, я пишу в тг
