02UI
Sep 30, 2026
Murat BayralMurat Bayral5m read

Sonnet 5.5 vs Opus 5.5: which model clones an award winning website better?

Sonnet 5.5 vs Opus 5.5: which model clones an award winning website better?

We gave 2 Claude models a website from an awards gallery each and 1 prompt to rebuild it. One page, close to pixel perfect, animations included. The Sonnet 5.5 run took 1 hour 6 minutes and would have cost about $20 at API prices. We guessed wrong about which clone came from which model, so we went to the numbers.

I checked the research before writing this, and 2 things changed. On camera we said Sonnet 5.5 is 30% faster and 30% cheaper than Opus 5.5. Anthropic's launch page (28 September 2026) makes those claims against Sonnet 5. The coding benchmark lead also changes with the effort setting. Both are below.

How much does Sonnet 5.5 cost compared with Opus 5.5?

Sonnet 5.5 costs $2 per million input tokens and $10 per million output tokens. Opus 5.5 costs $4 and $20 (Anthropic and Kingy AI, 28 September 2026). The list price of Sonnet 5.5 is half.

Correction: the 30% figures are against Sonnet 5. Anthropic says Sonnet 5.5 runs 30% faster and costs up to 30% less per task than its predecessor. Against Opus 5.5, the confirmed gap is the 50% list price. What a task costs depends on how many tokens the model spends, and that changes from run to run.

Is Sonnet 5.5 better than Opus 5.5 at agentic coding?

Agentic coding means the model works through many steps alone: it reads files, runs commands and fixes its own errors. On Terminal Bench 4.0, Sonnet 5.5 scores 70.6% at Max effort and Opus 5.5 scores 66.4% at Xhigh effort. Those are different effort levels. At matched Xhigh effort, Sonnet 5.5 scores 61.5% and Opus 5.5 scores 66.4% (Kingy AI, 28 September 2026).

On FrontierCode 1.1, Sonnet 5.5 scores 46.2% and Opus 5.5 scores 54.4%. On CursorBench 4.0 it is 55.5% against 57.8% (Anthropic, 28 September 2026). Anthropic says Opus 5.5 remains clearly stronger at complex, open ended work. Our result is 1 data point: a Sonnet 5.5 build that looked like the harder job. It does not show that Sonnet wins every time.

What does a Claude Code run cost on a Max plan?

Build This Now reports that Max 5x costs $100 per month and gives 5 times the usage of Pro. The same source says Max 5x pays for itself once your API usage would pass about $3.33 per day. Check the current numbers on Anthropic's pricing page before you decide, because plan limits change.

Our Sonnet 5.5 run would have cost about $20 at API prices, which is 20% of the $100 monthly price. On our plan it used most of a 5 hour usage window. The dollar figure and the plan usage are 2 different measures, so write down both.

Why do AI website clones stop at about 90%?

The Design2Code benchmark (arXiv, March 2024) tested multimodal models on 484 real webpages. It found the models lag mostly at recalling the visual elements of the page and at generating the correct layout. The models in that paper are old and they saw static pages. Newer models do better, but the type of gap matches what we saw.

In our first clone, the original portfolio reacted to scroll speed and squeezed its shapes. The clone stayed static. Our read: a model that rebuilds a page from screenshots or frames has to guess behaviour that no single frame contains. That guess is where the last 10% goes missing.

How do you test an AI website clone with real numbers?

Judging a clone by eye worked for our video, but it does not scale. So we built a skill for Claude Code that measures the original site and your clone with the same scripts, then fails the clone when the numbers do not match. It checks 50 style properties on every meaningful element, plus position, size, hover states and a pixel diff.

It started as a review of a public skill, clone-app-pat-pro-public by per-simmons. We tested it and found 20 problems, for example a gate that passed a wrong shadow because it only compared the first number. We rebuilt it. The rebuilt version runs 18 checks on a local sample app with npm test, and all 18 pass. It is not tested on a real logged in app yet, and it cannot block writes over WebSockets. Fonts and images belong to the site owner.

The skill is free on GitHub: github.com/02ui/clone-app-claude

You need Claude Code and Node.js 20 or newer. It does not work in the Claude web or mobile app, because it runs a browser on your computer.

Step 1: install the skill

Paste this into Claude Code. It does the rest.

Install the skill from https://github.com/02ui/clone-app-claude into ~/.claude/skills/clone-app-claude. Then run: cd ~/.claude/skills/clone-app-claude/scripts && npm install && npx playwright install chromium && npm test. Tell me when it says "all checks passed".

Step 2: run the Awwwards challenge

Paste this into Claude Code after Step 1 passes. It picks 1 award winning site, rebuilds the home page, and proves the match with numbers. It works on its own and reports once at the end, so give it time.

Use the clone-app-claude skill to rebuild the home page of one Awwwards Site of the Day winner that impresses you. If the skill is not in ~/.claude/skills/clone-app-claude, install it from https://github.com/02ui/clone-app-claude first.

Rules:
- Pick a public site with no login or paywall. Tell me the URL, the award and why you chose it.
- Work alone. Do not stop to ask me questions. Report once, at the end.
- Put everything in ~/Developer/awwwards-clone/. Never change the skill folder.
- Rebuild the motion too: loading, scroll and hover animations.
- Do not copy the site's images, videos or fonts. Draw them in code or use free ones, and list every swap.
- Do not change the skill's pass marks. Keep fixing until the skill says PASS, or it says it is stuck.
- Never claim a PASS the numbers do not show.

At the end, show me: how to open the clone, the final PASS or FAIL line, and the original and the clone side by side at desktop, tablet and mobile sizes.

Or clone a site you choose

Change the URL and the project name, then paste it into Claude Code.

Use the clone-app-claude skill from https://github.com/02ui/clone-app-claude to clone https://example.com. If it is not installed in ~/.claude/skills/clone-app-claude, install it there first and run its setup. Call the project example-clone. Start with the home page at desktop, tablet and mobile sizes. Stop after each stage and show me what you have.

How to run your own website clone test

  1. Pick 1 site from an awards gallery that uses scroll animation. Give the same site to both models. Our 2 clones came from different sites, so our comparison is not like for like.
  2. Write 1 prompt with the link and the rules: one page only, near pixel perfect, animations included.
  3. Start a timer when you send the prompt. Stop it when the model stops.
  4. Record usage from your plan meter or your API bill. Note tokens and dollars.
  5. Open the original and the clone side by side. Scroll slowly, then fast.
  6. Split the gaps into 2 lists: static gaps (spacing, type, colour) and motion gaps (speed reaction, easing, transitions).
  7. Score each clone out of 100. We put our first clone at about 90.

I expected the bigger model to take the harder site and win it. The build I picked as Opus work came from Sonnet 5.5. A 90% clone from 1 prompt is impressive, and the last 10% is still the difference between a page you scroll past and a site that wins an award. The next test should give both models the same site.

Sources

Related posts