Ненормальное программирование

Рейтинг — 164 тысячи звезды. Всё отсортировано по папкам и категориям. Последнее обновление 2 дня назад.

Изучать по 📎 ссылке.

Источник: https://t.me/TechLiveHack/946

Со времени как вышел 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/

Что нужно?

🧪 Плейтестеры. Любой фидбек - на вес золота: скучно ли, как управление, понятен ли прогресс, сколько хочется играть, что вызывало фрустрацию.
🎮 Платформа - предпочтительно - Android (APK), Web (для ПК) но сначала Web нужно доработать.

И да, покажу ниже видео и старые скриншоты - откуда начинали, куда пришли. Как всё эволюционировало.

Я не знаю, зайдет ли пост и будут ли желающие (Надеюсь, что будут), поэтому пока не оставляю ссылку на игру в Гугл плей.

Наверное, идеально будет если вы мне пришлете письмо на временную почту - Chailyn.Sconyers@SolarNyx.com с текстом "Хочу играть" и я ответом скину ссылку на внутренний тест в Гугл плей, где можно присоединиться к тесту и поиграть.

Награда? Особо много чего-то мы предложить не можем, но прямо сейчас решили сделать систему промо-кодов, которая выдаст на релизе награды дополнительные. Не знаю, насколько вам это будет интересно, но думаю, кому игра понравится - будет полезно :)

Начинали вот с такой графики, когда просто бегаешь влево вправо и дэшишься.