Carbon, Opus, and Astra Build the Same Website: Which Has Better Design, Faster Speed, and Lower Cost? An Analysis of 3 Rounds of Same-Task Testing

Author’s note: Based on a set of Agrumea Farm website-cloning tests, this article compares Gemini 4 Carbon, Claude Opus 5.5, and GPT-6 Astra on three dimensions: design fidelity and interaction requirements, time taken, and API-equivalent cost. It also covers how to choose by scenario and how to rerun the test yourself.

What happens when you hand the same brand website to three top-tier models and ask each to clone it? On November 11, 2026, independent reviewer Pat Simmons (AI for Mortals) published a set of tests that answers exactly that. He had Gemini 4 Carbon, Claude Opus 5.5, and GPT-6 Astra each recreate the website of the Italian food brand Agrumea Farm, and he made the results, screenshots, prompts, run times, and API-equivalent costs public.

This isn’t a “each has its strengths” kind of analysis. In this task, the winner on each dimension is clear: Carbon was the cheapest, Astra was the fastest, and Opus earned the reviewer’s highest quality rating. One caveat: each model ran only once, and the tooling environments and test dates differed, so these results shouldn’t be generalized into a ranking for all web development scenarios.

Core value: After reading this, you’ll know where each of these three “model + tool” workflows shines in quality, speed, and cost, and you’ll be able to use the method here to verify the results on your own projects.

What the Original Site Looks Like: How the Carbon, Opus, and Astra Same-Task Replication Test Worked

Let’s cover the test conditions before the results. What makes this test valuable is “same website, same prompt, same development goal.” But it compares complete workflows, not the bare models isolated in a lab.

Three Key Caveats for the Carbon, Opus, and Astra Test

The first caveat is that this is “replication,” not “free-form design.” All three models had to follow the original brand’s design language, so the comparison focuses on fidelity, detail, and polish. If you need an original visual identity built from scratch, treat this test as a rough reference only.

The second caveat is how costs are measured. All dollar figures in the article are API-equivalent costs that the author calculated from model pricing and usage logs. They aren’t actual charges from a subscription plan. If you run the same tasks on a flat-rate tool, your bill will look completely different.

The third caveat is that the test actually included four models. The author also added Claude Fable 5.2, which took first place in the subjective ranking. So when the rest of this article mentions “2nd, 3rd, and 4th place,” those are rankings among all four models.

Image credit: The three first-screen screenshots of the works in this article come from AI for Mortals / Pat Simmons, published 2026-11-11. They correspond to the replications by Gemini 4 Carbon, Claude Opus 5.5, and GPT-6 Astra, respectively.

Round 1: Carbon, Opus, and Astra: Who Recreated the Web Design Best?

Let’s start with the visuals. Judging by the public first-screen screenshots, all three entries caught the core elements of the original site: the off-white background, the floating food cans, the burgundy curved backdrop, the orange text circling the product, and the brand logo, language switcher, and menu button at the top. In other words, none of them turned in an off-the-rails template page. The differences come down to proportions, layering, and details.

From top to bottom, the images below show the work from Opus 5.5, Astra, and Carbon.

Why Opus Gets More Credit for Design Recreation

First, let’s separate two kinds of information: the first four rows of the table are visual observations from the public screenshots, while the last row is the review author’s subjective ranking. Among the three models in question, the author was happiest with Opus, then Astra, and finally Carbon.

Judging by the screenshots, Opus’s advantage mainly lies in the visual hierarchy of a brand website. On a food brand’s homepage, the product is the star of the first screen. Opus makes the can larger and has it clearly overlap the burgundy curve, with the can in front, and the label text is also crisper. Carbon’s airy layout isn’t wrong in itself, but the can is on the small side and some text details are weaker, which hurts it when the yardstick is “how faithful is the recreation.”

Astra lands somewhere in between. Its composition is complete, its focal point is clear, and the can label has quite a lot of decorative flair, but the overall layout is tighter. For a recreation task, “how much does it look like the original site” matters more than “how good does it look,” which explains why none of the three entries is bad, yet the ranking still shows clear gaps.

Round Two: Why You Can’t Judge Carbon, Opus, and Astra’s Interactions from Screenshots Alone

The biggest difference between a website and a design mockup is that a website needs to “move.” The original task explicitly called for recreating a 3D product-can carousel, scroll and drag interactions, loading animations, hover animations, and page transitions. You can barely see any of this in a static screenshot, yet it directly shapes what users experience when they open the site.

So screenshots can only tell you about layout and visual detail. They can’t prove the interactive features are fully implemented. To judge whether the 3D can drags smoothly, whether hover feedback feels natural, or whether the mobile layout breaks, you need to open the three public demo pages and actually use them. This article doesn’t treat screenshots as interaction test results, and it doesn’t make up interaction scores the original author never provided.

This round also highlights the difference between web development and static image generation. A model can draw a beautiful first screen, but getting a 3D carousel, scroll-driven animations, and a responsive layout all into working code is another matter. It also has to handle load order, performance, and how everything behaves at different screen sizes. The evaluation requires the model to “read styles in the browser and do visual verification” precisely so that “finished writing” becomes “actually works.”

In a real project, you can check an AI-generated website in this order:

1. Open the page at both 1440×900 and 390×844, and confirm the layout doesn’t overflow or overlap.
2. Trigger dragging, scrolling, hovering, and page transitions one by one, and watch for stuttering or broken animations.
3. Open the browser console and check for errors, failed resource loads, or infinitely looping animations.
4. Finally, compare against the original site or design mockup screen by screen, and note any visual differences.

Round 3: How Much Do Carbon, Opus, and Astra Differ in Cost and Time?

This round shows the differences between the three workflows better than any other. All figures below come from the original evaluation, and costs are API-equivalent costs.

A Closer Look at the Carbon, Opus, and Astra Cost Data

Carbon’s API-equivalent cost is about 18% of Opus’s and 12% of Astra’s. If you tend to work by trial and error and iterate a lot, that gap keeps widening across multi-round tasks. Astra finished in 68 minutes, less than half of Opus’s time, which makes it a good fit when delivery speed matters. Opus took the longest and landed in the middle on cost, but it produced the result the author liked best of the three.

One thing in the table is easy to miss: for all three models, input tokens far outnumber output tokens. Based on the table, Carbon’s input-to-output ratio is about 64:1, Opus’s is about 410:1, and Astra’s is about 334:1. That’s typical of agent-style development. On every round, the model has to re-read the code, styles, page state, and other context, so the code it actually “writes” is only a small slice of the total. Opus’s input volume is close to 200 million tokens, which suggests it went through a lot of back-and-forth with its context during this task.

Another point worth noting is that token count and cost aren’t proportional. Astra used only about a third of Opus’s input tokens, yet its equivalent cost was higher. That tells you unit pricing, cache billing, and similar factors matter just as much. When you evaluate cost, don’t just look at who used fewer tokens; calculate it using each model’s actual billing rules. This article doesn’t go into specific unit prices, so please check each vendor’s official pricing page for the latest numbers.

Why Carbon, Opus, and Astra Produce Different Results from the Same Prompt

The same prompt produced three different results, and the models themselves are only part of the reason. In this test, each model ran inside its own vendor’s development tool. Model capability, the way tools get called, the browser self-check mechanism, and context management all shaped the final output together.

Going by the official materials, each of the three vendors emphasizes something different when it comes to web development:

• Google (Carbon + Antigravity): Emphasizes front-end design, browser verification, dynamic effects, complex 3D content, and multi-agent development. Official examples include redesigning the Google Merchandise Store with two prompts, and building a 3D interactive experience with Three.js.
• OpenAI (Astra + Codex): Astra’s official introduction highlights the ability to build websites, apps, and games, plus a workflow that runs front-end quality checks after generation.
• Anthropic (Opus + Claude Code): The official materials don’t include a same-task comparison. However, in a test by third parties Proofyard/Woofocus on October 24, 2026, Opus 5.5 completed the first-pass design and revisions for a furniture studio homepage, costing $4.34 at API pricing. That test isn’t a direct comparison with the Carbon and Astra runs in this article.

How to Read the Carbon, Opus, and Astra Leaderboard Data

Besides a single hands-on test, you can also look at leaderboards that aggregate many tasks. All the data below is labeled with its collection date. Elo scores depend on each platform’s testing method, so you can’t compare them directly across leaderboards.

Opus leads on both leaderboards, which matches the direction of the author’s subjective ranking in this recreation test. Carbon is very close to Astra on the WebDev leaderboard, but it ranks lower on the broader DesignArena overall leaderboard. That suggests “single-page web development” and “complex agent design tasks” are different capability dimensions, so choose a model based on your own task type.

How to Re-Test Carbon, Opus, and Astra Yourself via API

Someone else’s single test is only a starting point. The most reliable evidence is running the models on your own tasks. The example below sends the same prompt to several models through an OpenAI-compatible endpoint and records the latency and Token usage. One caveat: this only measures the step where the model generates code directly. It doesn’t include the multi-round tool calls and browser self-checks that the original evaluation ran in Antigravity, Claude Code, and Codex.

Minimal Example

from openai import OpenAI

client = OpenAI(
    api_key="YOUR_API_KEY",
    base_url="https://api.apiyi.com/v1"  # APIYI's OpenAI-compatible endpoint
)

resp = client.chat.completions.create(
    model="your-model-id",  # Use the actual name from the platform's model list
    messages=[{"role": "user", "content": "输出一个单文件 HTML 食品品牌官网首屏，米白背景、居中悬浮产品罐头、酒红色弧形背景"}]
)
print(resp.choices[0].message.content[:500])
print(resp.usage)  # Check input and output Tokens

import time
from openai import OpenAI

client = OpenAI(
    api_key="YOUR_API_KEY",
    base_url="https://api.apiyi.com/v1"  # One key to call multiple providers' models
)

# Model IDs should match the platform's model list; prices are in "USD per million Tokens", so fill them in from the official pricing page
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)

Once the script finishes, you’ll have one HTML file per model. Then follow the four-step checklist from the second round: open each file in a browser and check the layout, the interactions, and any console errors. Combine that with the latency and equivalent cost to make your call. To smooth out run-to-run variance, I’d run each model at least three times.

🚀 Quick-start tip: In same-prompt comparisons, the most tedious part is usually signing up for several providers’ keys and adapting to different SDKs. I’d recommend handling that step through APIYI (apiyi.com). One API key gets you OpenAI, Claude, Gemini, and other mainstream models through an OpenAI-compatible interface, and new users get free test credits, which makes it easy to run through the comparison workflow on a small sample first.

Carbon, Opus, and Astra: Use Cases and Decision Advice

Based on this test and the leaderboard data, you can do a first-pass filter by development goal. The “Basis” column notes the type of source where possible, so you can judge how much weight each recommendation deserves.

When to Choose Carbon

• Prototype exploration phase: You need to try several page designs quickly, and a lower cost per run means you can afford more rounds.
• Personal projects or teams on a tight budget: As long as quality is acceptable, the gap in long-term invocation costs adds up fast.
• Primary development with human review: Use Carbon to produce the first draft, then have a person or another model handle the final check.

When to Choose Opus

• Brand sites and marketing landing pages: Visual fidelity and detail matter a lot here, and rework costs more than invocation costs.
• Pages with complex interactions: When there’s a lot of 3D display, dragging, and scroll-driven animation, final polish matters most.

When to Choose Astra

• Tight delivery schedules: You need a complete, runnable page in a short amount of time.
• Teams that value a front-end QA process: The official materials emphasize post-generation quality checks, which makes it a good fit if you want to hand acceptance checks off to your workflow.

💡 Our advice: This test is a side-by-side look at one real workflow, not an absolute ranking. What should ultimately drive your decision is which option actually gets your own task running, and how much money and time it takes. We recommend running a small-scale re-test with the same prompt through APIYI at apiyi.com before settling on your main model.

FAQ

Carbon, Opus, and Astra: Key Takeaways

• What this test is: The same website-recreation task was run once through each of three workflows. Think of it as a side-by-side look at a real-world scenario, not a controlled benchmark.
• Design fidelity: Of the three, the author rated Opus highest, Astra second, and Carbon last.
• Speed: Astra was the fastest at 68 minutes, about half of Opus’s time.
• Cost: Carbon’s equivalent cost was $10.86, roughly 18% of Opus’s and 12% of Astra’s.
• Cost structure: Agent development is dominated by input tokens, so per-token pricing and caching rules shape the bill just as much.
• Leaderboard reference: Opus leads on both Arena WebDev and the DesignArena overall ranking, though each leaderboard measures things differently.
• Getting started: Use APIYI (apiyi.com) to run a small same-task retest with a single key, then decide on your primary model.

Summary

Comparing Carbon, Opus, and Astra on the same website comes down to three main points:

1. Quality: In this recreation task, Opus’s output got the highest rating from the reviewer, with a more prominent main product and clearer visual hierarchy.
2. Speed: Astra finished in just 68 minutes, which makes it a good fit for projects with tight delivery schedules.
3. Cost: Carbon’s API-equivalent cost was far lower than the other two, so it suits high-frequency iteration and budget-sensitive work.

All three models are now capable of producing high-quality web development work. What differs is the tradeoff among visual fidelity, interaction quality, turnaround time, and cost. Rather than asking which model is the absolute best, it’s more useful to pin down your own development goals and run the same task yourself. We recommend using APIYI (apiyi.com) to retest multiple models through a single unified interface, and basing your final choice on the work that actually ships and what it actually costs.

📚 References

1. Gemini 4 Carbon: No-Hype Full Review & Testing: Pat Simmons / AI for Mortals, a website-clone review using the same prompt across models, 2026-11-11
2. Link: aiformortals.co/blog/gemini-4-carbon-review

3. Notes: The main source for this article’s test setup, timing, token counts, and API-equivalent cost data

4. The three clone pages: Public builds from Carbon, Opus 5.5, and Astra

5. Links: aiformortals.co/builds/agrumea-clone-gemini-4-carbon, aiformortals.co/builds/agrumea-clone-opus-5-5, aiformortals.co/builds/agrumea-clone-gpt-6-astra

6. Notes: You can open these in a browser and check the interactions yourself

7. Agrumea Farm official site: The original site used as the test target

8. Link: agrumeafarm.it/en

9. Notes: Used as the reference for judging how faithful each clone is

10. Arena WebDev leaderboard: A web development leaderboard based on head-to-head voting

11. Link: arena.ai/leaderboard/code/webdev

12. Notes: This article cites data from 2026-11-10

13. DesignArena leaderboard: A comprehensive agentic design leaderboard

14. Link: designarena.ai/leaderboard

15. Notes: This article cites data from 2026-11-11, covering multiple types of design tasks

16. Google official blog: Gemini 4 Carbon availability announcement

17. Link: blog.google/innovation-and-ai/models-and-research/gemini-models/gemini-4-carbon-now-available/

18. Notes: Google’s official positioning of Carbon for front-end design and browser verification

19. OpenAI official introduction: GPT-6 Astra

20. Link: openai.com/index/gpt-6-astra/

21. Notes: Describes Astra’s web development and front-end QA workflow

22. Woofocus test: A comparison of different Claude models for web design, 2026-10-24

23. Link: app.woofocus.com/blog/best-claude-model-for-web-design
24. Notes: Supplementary reference for Opus 5.5 on design and editing tasks; not a direct three-model comparison

Author: APIYI Technical Team
Technical discussion: Feel free to reach out to us on the APIYI homepage. For more integration resources, visit the docs.apiyi.com documentation center.

Related Articles

• A Battle Among Contenders: Comparing Gemini 4 Carbon, Claude Fable 5.2, and GPT-6 Astra on Overall Capability, Professional Delivery, and Task Cost: Based on the AA composite index and MKA professional task evaluations, this compares Gemini 4 Carbon, Claude Fable 5.2, and GPT-6 Astra in terms of capability, delivery quality, time consumption, and task cost, while explaining the statistical methodology and the boundaries of significance.
• Gemini 4 Carbon vs Claude Opus 5.5: Key Differences and How to Choose Across 3 Scenarios: Compare Gemini 4 Carbon and Claude Opus 5.5 across 7 dimensions, including specifications, pricing, thinking mechanism, protocol, and official model card scores, and give selection advice on which type of task to assign to which model.
• Claude Ranks First, Gemini Costs Less Than a Third: Comparing Value for Money Across 13 Models in GDPx: Analyze the inaugural GDPx leaderboard published by SemiAnalysis, comparing the scores and “average task costs” of Claude Opus 5.5, Gemini 4 Carbon, GPT-6 Astra, Sol, Luna, and DeepSeek, and distinguish evaluation costs from official token prices.
• Fable 5.5 vs GPT-6.2 Astra: Which Is More Powerful and How to Choose? 6 Demos and 3 Unfair Comparisons: Fable 5.5 and GPT-6.2 Astra both have public demos but no head-to-head comparison; this article assesses evidence levels for six demos, reviews official specs and pricing for current flagships Fable 5.1 and GPT-6 Astra, and provides a reproducible model selection method.
• Claude Fable 5.2 vs. Claude Opus 5.5: How to Choose: Claude Fable 5.2 vs. Claude Opus 5.5: At twice the standard price, it doesn’t win in every category; this article offers a task-based model selection table covering specs, pricing, default effort level, and release benchmark results.
• Gemini 4 Argon vs. Claude Opus 5.5: Breaking Down Google’s 19-Benchmark Scorecard to See Which Is Stronger Across 4 Dimensions: Based on Google’s official Gemini 4 Argon evaluation table, compare Gemini 4 Argon and Claude Opus 5.5 across 19 benchmarks in knowledge work, agentic coding, long-context tasks, and multimodal capabilities, incorporating independent evaluations from Artificial Analysis and Vals, as well as differences in pricing, output limits, and availability, to offer scenario-based model recommendations.
• What Are the Positioning of Gemini 4 Argon and Carbon Respectively?: Compare the differences between Gemini 4 Argon and Carbon in reasoning effort, response speed, and task cost to help developers choose a "good enough" model and reasoning tier based on task difficulty.
• Kimi K3.1 Pro vs. Claude Opus 5.5: How much do their coding abilities differ, and how many times more expensive is one than the other?: Kimi K3.1 Pro and Claude Opus 5.5 are in the same tier for coding ability, with a 2× difference in input and output prices: compare benchmarks using official and third-party figures, list prices across five tiers, and include per-task cost calculations and a task-based model selection table.
• Claude Sonnet 5.5 vs Claude Opus 5.5: Is Opus Faster While Sonnet Is Only Cheaper? 6 Sets of Data Explain the Best Combination for Enterprise Long-Context Agents: Claude Opus 5.5 is faster than expected; does Claude Sonnet 5.5 only retain a price advantage? This article compares them across six dimensions and offers model configurations for enterprise long-input, long-output scenarios.