Carbon, Opus и Astra создают один и тот же сайт: чей дизайн лучше, кто быстрее, кто дешевле? Разбор 3 раундов тестов на одном задании

От автора: в основе статьи лежит серия тестов по воссозданию сайта Agrumea Farm. Gemini 4 Carbon, Claude Opus 5.5 и GPT-6 Astra сравниваются по трём критериям: точность воспроизведения дизайна и интерактивность, время выполнения и стоимость в пересчёте на API. В конце даны рекомендации по выбору модели под сценарий и способ повторить тест самостоятельно.

Что будет, если поручить трём топовым моделям воссоздать один и тот же сайт бренда? 11 ноября 2026 года независимый автор обзоров Pat Simmons (AI for Mortals) опубликовал результаты такого теста. Он попросил Gemini 4 Carbon, Claude Opus 5.5 и GPT-6 Astra воссоздать сайт итальянского food-бренда Agrumea Farm. Вместе с результатами он выложил сами работы, скриншоты, промпты, время выполнения и стоимость в пересчёте на API.

Это не анализ в духе «у каждого свои плюсы». В этой задаче победители по трём критериям определились чётко: Carbon оказался дешевле всех, Astra справилась быстрее всех, а Opus получил от автора обзора более высокую оценку за качество. Важная оговорка: каждая модель запускалась только один раз, а инструменты и даты тестов различались. Поэтому эти результаты нельзя напрямую переносить на все сценарии веб-разработки и считать универсальным рейтингом.

Что вы получите от статьи: вы узнаете, в чём сильны три связки «модель + инструмент» по качеству, скорости и стоимости, и сможете по описанной здесь методике перепроверить результаты на своих проектах.

Сначала посмотрим на оригинальный сайт: как проходил тест на воспроизведение Carbon, Opus и Astra

Сначала разберёмся с условиями теста, потом перейдём к результатам. Ценность этой серии в том, что у всех моделей один и тот же сайт, один и тот же промпт и одна и та же цель разработки. Но сравнивается здесь весь рабочий процесс целиком, а не «чистая» модель, изолированная в лабораторных условиях.

Три важные оговорки по тестам Carbon, Opus и Astra

Первая оговорка: задача — «воспроизвести», а не «свободно спроектировать». Все три модели должны были следовать дизайн-языку оригинального бренда, поэтому сравниваются точность воспроизведения, проработка деталей и степень завершённости. Если вам нужно с нуля создать оригинальный визуальный стиль, эти тесты годятся лишь как ориентир.

Вторая оговорка касается стоимости. Все суммы в статье — это эквивалент расходов на API, который автор обзора рассчитал по тарифам моделей и логам использования. Это не реальные списания по подписке. Если запускать такие же задачи в инструменте с ежемесячной оплатой, счёт будет выглядеть совершенно иначе.

Третья оговорка: на самом деле в обзоре участвуют четыре модели. Автор добавил ещё Claude Fable 5.2, и именно она заняла первое место по субъективной оценке. Поэтому упоминания «2-го, 3-го и 4-го места» ниже относятся к рейтингу из четырёх моделей.

Примечание к изображениям: скриншоты первого экрана всех трёх работ взяты у AI for Mortals / Pat Simmons, дата публикации — 2026-11-11. Они соответствуют работам Gemini 4 Carbon, Claude Opus 5.5 и GPT-6 Astra.

Раунд первый: кто из Carbon, Opus и Astra лучше воспроизвёл веб-дизайн

Начнём с картинки. Судя по опубликованным скриншотам первого экрана, все три работы уловили главное в оригинальном сайте: молочно-белый фон, парящие консервные банки, винно-красный дугообразный фон, оранжевый текст по кругу, а сверху логотип бренда, переключатель языка и кнопку меню. То есть никто не выдал шаблонную страницу мимо цели. Разница в пропорциях, глубине композиции и деталях.

На изображениях ниже сверху вниз показаны работы opus5.5, astra и carbon.

Почему Opus лучше справился с воспроизведением дизайна

Сначала нужно разделить два типа информации: первые четыре строки таблицы — это визуальные наблюдения по публичным скриншотам, и только последняя строка отражает субъективный рейтинг автора обзора. Из трёх выбранных моделей автору больше всего понравилась Opus, затем идёт Astra, а замыкает список Carbon.

Судя по скриншотам, преимущество Opus в первую очередь связано с «иерархией элементов на сайте бренда». На первом экране сайта пищевого бренда главный герой — продукт. Opus сделала банку крупнее и выстроила чёткое наложение: банка и бордовая кривая явно перекрывают друг друга по глубине. Текст на этикетке при этом читается лучше. Свободная компоновка у Carbon сама по себе не ошибка, но банка получилась маленькой, а часть деталей текста слабо проработана. При оценке по критерию «точность воспроизведения» это становится минусом.

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

Второй раунд: почему взаимодействие в Carbon, Opus и Astra нельзя оценивать только по скриншотам

Главное отличие сайта от макета в том, что сайт должен «оживать». В исходном задании прямо требовалось воспроизвести карусель 3D-банок с продуктом, скролл и перетаскивание, анимацию загрузки, анимацию при наведении и переходы между страницами. На статичном скриншоте всего этого почти не видно, а ведь именно от этого зависит, какое впечатление сайт произведёт на пользователя.

Поэтому скриншот показывает только вёрстку и визуальные детали, но не доказывает, что интерактивность реализована полностью. Чтобы понять, плавно ли перетаскивается 3D-банка, естественно ли реагирует элемент на наведение и не «едет» ли вёрстка на мобильных устройствах, нужно открыть три опубликованные страницы и попробовать всё руками. В этой статье скриншоты не считаются результатом тестирования интерактива, и я не буду выставлять оценки за интерактивность, которых сам автор не давал.

Этот раунд хорошо показывает и разницу между веб-разработкой и генерацией статичных изображений. Модель может нарисовать красивый первый экран, но чтобы уместить в рабочий код 3D-карусель, анимацию, привязанную к скроллу, и адаптивную вёрстку, нужно ещё продумать порядок загрузки, производительность и поведение на экранах разных размеров. Требование «считывать стили через браузер и проводить визуальную проверку» нужно именно для того, чтобы «написано» превратилось в «работает».

В реальном проекте сайт, сгенерированный ИИ, можно проверять в таком порядке:

1. Сначала откройте страницу в размерах 1440×900 и 390×844 и убедитесь, что вёрстка нигде не выходит за границы и элементы не накладываются друг на друга.
2. По очереди проверьте перетаскивание, скролл, наведение и переходы между страницами: не тормозит ли анимация и не перестаёт ли она работать.
3. Откройте консоль браузера и посмотрите, нет ли ошибок, неудачных загрузок ресурсов или анимаций, зациклившихся навсегда.
4. И только потом сравните результат с оригинальным сайтом или макетом экран за экраном и зафиксируйте визуальные расхождения.

Третий раунд: насколько различаются Carbon, Opus и Astra по стоимости и времени

Именно в этом раунде разница между тремя workflow видна лучше всего. Все данные ниже взяты из оригинального обзора, а стоимость указана в API-эквиваленте.

Что показывают данные по стоимости Carbon, Opus и Astra

Стоимость Carbon в API-эквиваленте составляет примерно 18% от Opus и 12% от Astra. Если вы работаете методом проб и ошибок и много раз переделываете результат, эта разница будет накапливаться от раунда к раунду. Astra справился за 68 минут, то есть меньше чем за половину времени Opus, так что он подойдёт там, где важна скорость сдачи. Opus потратил больше всех времени, по стоимости оказался посередине, зато выдал работу, которая понравилась автору больше остальных.

В таблице есть деталь, которую легко упустить: у всех трёх моделей входных токенов намного больше, чем выходных. По данным из таблицы соотношение входа к выходу у Carbon составляет около 64:1, у Opus около 410:1, у Astra около 334:1. Это связано с особенностями агентной разработки: на каждом шаге модель заново читает код, стили, состояние страницы и другой контекст, а собственно «написанный» код составляет лишь малую часть. Почти 200 млн входных токенов у Opus говорят о том, что в этой задаче он постоянно гонял контекст туда и обратно.

Ещё один момент: число токенов и стоимость не пропорциональны. Входных токенов у Astra примерно втрое меньше, чем у Opus, а эквивалентная стоимость выше. Значит, большую роль играют цена за токен, тарифы на кеширование и другие факторы. Оценивая затраты, нельзя смотреть только на то, кто израсходовал меньше токенов. Считать нужно по реальным правилам тарификации каждой модели. Конкретные цены за токен я здесь не разбираю, актуальные данные смотрите на официальных страницах с ценами у каждого вендора.

Почему Carbon, Opus и Astra выдают разные результаты на одном промпте

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

Судя по официальным материалам, каждая из трёх компаний делает акцент на своём в веб-разработке:

• Google (Carbon + Antigravity): упор на фронтенд-дизайн, проверку в браузере, динамические эффекты, сложный 3D-контент и многоагентную разработку. Среди официальных примеров — редизайн Google Merchandise Store за два промпта и 3D-интерактив на Three.js.
• OpenAI (Astra + Codex): в официальном описании Astra подчёркиваются возможности разработки сайтов, приложений и игр, а также рабочий процесс, в котором после генерации запускаются проверки качества фронтенда.
• Anthropic (Opus + Claude Code): официальных сравнений на той же задаче нет. Зато сторонние Proofyard/Woofocus 24 октября 2026 года протестировали Opus 5.5: модель сделала первую версию главной страницы мебельной студии и внесла правки. По ценам API это обошлось в 4,34 доллара. Этот тест не является прямым сравнением с Carbon и Astra из нашей статьи.

Как читать рейтинги Carbon, Opus и Astra

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

В обоих рейтингах впереди Opus, и это совпадает с субъективным порядком автора в нашем тесте по воспроизведению сайта. В рейтинге WebDev Carbon почти вплотную подбирается к Astra, но в более широком сводном рейтинге DesignArena оказывается ближе к концу списка. Выходит, что «разработка одностраничного сайта» и «сложные агентные задачи по дизайну» — разные навыки, и модель стоит выбирать под свой тип задач.

Как самостоятельно перепроверить Carbon, Opus и Astra через API

Чужой единичный тест можно считать лишь отправной точкой. Надёжнее всего прогнать модели на собственных задачах. В примере ниже через OpenAI-совместимый интерфейс один и тот же промпт по очереди отправляется нескольким моделям, а время ответа и расход токенов записываются.

Учтите: так измеряется только этап, на котором модель напрямую генерирует код. Многоходовые вызовы инструментов и самопроверку в браузере, которые в исходной оценке выполняли Antigravity, Claude Code и Codex, этот тест не покрывает.

Минимальный пример

from openai import OpenAI

client = OpenAI(
    api_key="YOUR_API_KEY",
    base_url="https://api.apiyi.com/v1"  # OpenAI-совместимый интерфейс APIYI
)

resp = client.chat.completions.create(
    model="your-model-id",  # ориентируйтесь на реальное название в списке моделей платформы
    messages=[{"role": "user", "content": "输出一个单文件 HTML 食品品牌官网首屏，米白背景、居中悬浮产品罐头、酒红色弧形背景"}]
)
print(resp.choices[0].message.content[:500])
print(resp.usage)  # смотрим входные и выходные токены

import time
from openai import OpenAI

client = OpenAI(
    api_key="YOUR_API_KEY",
    base_url="https://api.apiyi.com/v1"  # Один ключ — вызовы моделей разных провайдеров
)

# ID моделей берите из списка моделей платформы; цены указаны в «долларах за миллион токенов», заполняйте по официальной странице с ценами
MODELS = {
    "model-a": {"input_price": 0.0, "output_price": 0.0},
    "model-b": {"input_price": 0.0, "output_price": 0.0},
    "model-c": {"input_price": 0.0, "output_price": 0.0},
}

PROMPT = """请复刻一个食品品牌官网首屏，输出单文件 HTML：
1. 米白色背景，中央悬浮产品罐头，酒红色弧形背景，橙色环绕文字；
2. 顶部包含品牌标志、语言切换和菜单按钮；
3. 罐头支持鼠标拖动旋转，悬停时有缩放反馈；
4. 同时适配 1440x900 和 390x844 两种尺寸。
只输出完整代码。"""

def run(model: str, price: dict) -> dict:
    start = time.time()
    resp = client.chat.completions.create(
        model=model,
        messages=[{"role": "user", "content": PROMPT}],
    )
    elapsed = time.time() - start
    usage = resp.usage
    cost = (usage.prompt_tokens * price["input_price"]
            + usage.completion_tokens * price["output_price"]) / 1_000_000
    html = resp.choices[0].message.content
    with open(f"{model}.html", "w", encoding="utf-8") as f:
        f.write(html)
    return {
        "model": model,
        "seconds": round(elapsed, 1),
        "input_tokens": usage.prompt_tokens,
        "output_tokens": usage.completion_tokens,
        "api_equivalent_cost": round(cost, 4),
    }

if __name__ == "__main__":
    for name, price in MODELS.items():
        try:
            print(run(name, price))
        except Exception as e:
            print(name, "调用失败：", e)

После завершения скрипта для каждой модели будет создан HTML-файл. Дальше по четырёхшаговому чек-листу из второго раунда проверьте в браузере вёрстку, интерактивность и ошибки в консоли, а затем сопоставьте всё это со временем выполнения и эквивалентной стоимостью. Чтобы сгладить случайные колебания, прогоните каждую модель минимум три раза.

🚀 Совет для быстрого старта: при сравнении моделей на одной задаче сложнее всего обычно получить ключи у нескольких провайдеров и подгонять разные SDK. Рекомендуем сделать это через APIYI (apiyi.com): одним API-ключом можно вызывать OpenAI, Claude, Gemini и другие популярные модели, интерфейс совместим с OpenAI, а новым пользователям дают бесплатные тестовые кредиты — удобно сначала прогнать процесс сравнения на небольшой выборке.

Рекомендации по выбору между Carbon, Opus и Astra

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

Когда выбирать Carbon

• Этап прототипирования: нужно быстро перебрать несколько вариантов страниц. Низкая стоимость одного запуска позволяет прогнать больше итераций.
• Личные проекты и команды с ограниченным бюджетом: если качество вас устраивает, разница в затратах на вызовы при долгой работе будет очень заметной.
• Основная разработка + ручной контроль: сначала получаем первую версию от Carbon, а затем человек или другая модель проверяет и дорабатывает результат.

Когда выбирать Opus

• Фирменные сайты и маркетинговые лендинги: к визуальной точности и деталям требования высокие, а доработки обходятся дороже, чем сами вызовы.
• Страницы со сложными взаимодействиями: если много 3D-демонстраций, перетаскивания и анимаций, завязанных на прокрутку, то на первый план выходит итоговая завершённость.

Когда выбирать Astra

• Сжатые сроки сдачи: нужно за короткое время получить рабочую страницу целиком.
• Важен фронтенд-QA: разработчики отдельно подчёркивают проверку качества после генерации, так что приёмку можно отдать на откуп рабочему процессу.

💡 Совет по выбору: этот тест — горизонтальное наблюдение за одним реальным рабочим процессом, а не абсолютный рейтинг. Решать нужно по тому, какой вариант действительно справился с вашей задачей и сколько денег и времени на это ушло. Рекомендуем прогнать небольшой повторный тест на одном и том же промпте через APIYI apiyi.com и только потом выбирать основную модель.

Часто задаваемые вопросы (FAQ)