Claude Code или Codex: кто лучше сделал сайт в реальном тесте

Честный тест двух инструментов на одной строительной компании: исследование, концепции, сборка и редизайн сайта.

Что лучше сделает сайт — Codex или Claude Code? Я решил не сравнивать списки функций и чужие бенчмарки. Взял одну реальную компанию, дал двум агентам одинаковое задание и посмотрел, кто быстрее исследует бизнес, предложит пять концепций главной страницы и соберёт рабочую версию.

Результат получился не таким однозначным, как заголовок «кто победил». Codex первым подготовил подробный бриф. Claude Code первым закончил сайт, и его вариант в этом запуске мне понравился больше. После одинакового большого дизайн-промпта Claude Code снова быстрее показал заметный редизайн, а Codex дольше уточнял и столкнулся с проблемами демонстрации на сервере.

Поэтому короткий ответ такой: Claude Code выиграл именно этот тест. Это не означает, что он всегда лучше Codex.

Как я сделал сравнение честным

Для теста я выбрал карточку строительной компании в Орле. У компании был автоматический сайт Яндекс Бизнеса, фотографии, услуги и один отзыв. Ссылку на одну и ту же карточку отправил в Codex и Claude Code.

Оба получили одинаковую задачу:

1. Изучить компанию и открытые данные о ней.
2. Посмотреть конкурентов.
3. Предложить позиционирование и структуру продающего сайта.
4. Сначала показать план, чтобы его можно было поправить.
5. Затем нарисовать пять вариантов главной страницы.
6. После выбора собрать сайт локально.

Я намеренно не подключал свои лучшие дизайн-навыки и тяжёлые промпты на первом проходе. Хотел увидеть, что инструменты сделают «из коробки» на одинаковом контексте.

Раунд 1. Исследование компании и бриф

Codex закончил первым. В видео я зафиксировал время 4 минуты 8 секунд. Он собрал подтверждённые данные из карточки, перечислил услуги и конкурентов, описал перегретые формулировки, предложил свободную позицию и план реализации.

Claude Code готовил анализ дольше. В его первых концепциях возник спорный поворот: общую строительную компанию он сузил до темы плоских кровель и протечек. Визуально некоторые варианты были рабочими, но сам выбор направления требовал проверки.

Этот эпизод хорошо показывает разницу между «агент нашёл информацию» и «агент правильно понял бизнес». Даже если все слова выглядят профессионально, нужно проверить, не превратил ли он одну услугу в единственный продукт компании.

Промежуточный победитель: Codex — по скорости и глубине первого брифа в этой сессии.

Раунд 2. Пять концепций главной страницы

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

У Claude Code часть первых вариантов выглядела типично для генеративного дизайна: крупный оффер, стандартные карточки, предсказуемая сетка. Но один вариант с инженерным позиционированием оказался интересным, и я выбрал его для продолжения.

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

На этом этапе не было смысла объявлять общего победителя. Концепт — это обещание результата, а не сам результат.

Раунд 3. Кто первым собрал сайт

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

На странице были реальные объекты, объяснение процесса, ответы на вопросы, контакты и карта. Дизайн не был идеальным, но его уже можно было обсуждать как сайт, а не как картинку.

Codex закончил позже. Его версия тоже подтянула фотографии, структуру заказа, объекты и контакты. В обычной работе мне Codex часто удобнее, и мой личный сайт мы делали именно с ним. Но в этом конкретном сравнении первая сборка Claude Code выглядела для меня убедительнее.

Победитель раунда: Claude Code — первым закончил и дал более предпочтительный для автора результат.

Раунд 4. Один большой дизайн-промпт

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

Claude Code быстро показал заметно более выразительную версию: другой ритм, более собранные блоки и интереснее подача объектов. Отдельные детали всё ещё требовали правки — например, плавающий элемент заявки.

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

Самое важное наблюдение: после хорошего дизайн-контекста разница между первым и вторым вариантом одного инструмента оказалась огромной. Качество инструкции повлияло не меньше, чем выбор между Claude Code и Codex.

Таблица результатов

Что на самом деле определяет качество сайта

После такого сравнения легко сделать вывод: «ставим победителя и получаем хорошие сайты». На практике выбор инструмента — только один слой.

1. Качество исходных данных

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

2. Формулировка задачи

Команда «сделай продающий сайт» почти ничего не ограничивает. Нужны аудитория, целевое действие, позиционирование, обязательные блоки, запрещённые обещания и критерии готовности.

3. Выбор концепции до вёрстки

Пять вариантов главной — не декоративный этап. Они позволяют увидеть разные композиции и выбрать направление, пока изменение стоит дёшево.

4. Дизайн-система или навык

Без примеров, правил типографики, сетки, палитры, отступов и поведения компонентов большинство агентов тянется к знакомым шаблонам. Хороший навык делает результат последовательнее.

5. Проверка опубликованной версии

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

6. Умение давать короткую обратную связь

«Мне не нравится» заставляет агента снова угадывать. Полезнее сказать: какой экран выбираем, что в нём сохраняем, что выглядит шаблонно и какие три изменения считаем достаточными.

Промпт для собственного сравнения

Ниже — нейтральная основа. Отправьте её двум инструментам без изменений, чтобы сравнение было честным.

Мне нужно подготовить концепцию сайта для [компания/проект].
Источник фактов: [ссылка или приложенные материалы].

Этап 1. Исследование
- собери только подтверждённые факты о компании;
- отдельно перечисли, чего не удалось подтвердить;
- изучи 5–7 прямых конкурентов в том же регионе;
- предложи позиционирование без выдуманных преимуществ;
- подготовь структуру сайта и объясни роль каждого раздела.

Не начинай разработку, пока не покажешь бриф.

Этап 2. Концепции
- создай пять визуально разных вариантов главной страницы;
- используй одинаковое содержание и реальные материалы;
- для каждого варианта покажи полный экран и кратко объясни идею;
- не выбирай вариант за меня.

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

Любые неподтверждённые данные помечай как TODO, не публикуй их как факт.

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

Когда не нужно выбирать одного победителя

В реальной работе Codex и Claude Code можно использовать на разных этапах. Один готовит исследование и техническое задание, второй предлагает альтернативную концепцию; затем лучший результат проходит отдельный аудит.

Но параллельный запуск имеет смысл только при одинаковом контексте. Если одному агенту дали подробный навык, реальные фотографии и критерии, а второму — одну строку, вы сравниваете не модели, а качество собственных вводных.

Частые вопросы

Кто лучше для создания сайта — Claude Code или Codex?

В этом тесте Claude Code первым собрал сайт и победил по субъективной оценке автора. Codex первым закончил исследование и остаётся привычным инструментом Павла. Универсального ответа без конкретного проекта и процесса нет.

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

Собрать прототип и даже рабочую страницу стало намного проще. Но домен, безопасность, формы, аналитика, юридические тексты, резервные копии и поддержка всё равно требуют проверки. «Не пишу код руками» не означает «могу не понимать результат».

Зачем просить именно пять вариантов главной?

Несколько концепций помогают выбрать композицию и визуальный язык до полной разработки. Число пять не священное: обычно достаточно трёх–пяти действительно разных вариантов.

Нужно ли использовать одинаковый промпт?

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

Почему картинка концепции отличается от сайта?

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

Вывод

Claude Code выиграл показанный запуск, но главный вывод ролика не про логотип победителя. Два сайта были собраны примерно за полчаса параллельной работы, а сильнее всего результат изменился после нормального дизайн-промпта.

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

Редакционная прозрачность. Материал подготовлен по видео Павла Преснякова от 27 августа 2026 года и русским автосубтитрам. Формулировки и выбранные кадры проверены перед публикацией. Оценки дизайна субъективны, а результаты относятся к одной сессии, одному проекту и использованным в ней настройкам.