Web design test · 2026

Same brief, five models

Opus 5.5, Sonnet 5.5, Sonnet 5, Grok 4.7 and GPT 6.1 Sol each built a one-page site for Low Tide, an outdoor screening of three short films on a beach. Same content, one attempt each. Scroll inside each page, since they're fully interactive.

Open full page ↗
Opus 5.5Open ↗

The verdicts

Opus 5.5 came out on top of the first three. Sonnet 5.5 came close, for about 30% less money, and Sonnet 5 fell well behind both. Grok 4.7 and GPT 6.1 Sol are the same brief, shown beside those three. They don't have a place in that ranking.

Opus 5.5

1st · best style, best motion

  • The opening screen looks like a poster: a soft, oversized title over a sunset, with the type and the sun reflected in the water.
  • It has the most motion, and it all fits the dusk-on-the-beach mood.
  • A scrubber and play button let you step through the evening's schedule.
  • Of the Claude runs, it had the most careful accessibility work.
View Opus 5.5 ↑

Sonnet 5.5

2nd · very close, best value

  • It took its own direction, a light cream-and-navy look that feels like print. It doesn't copy the Opus design.
  • The typography is just as strong as Opus's, with a roman "Low" and an italic "Tide".
  • On its own it hit on the same idea as Opus: a slider you drag to move through the evening.
  • It has less motion than Opus, but the animations it does have are well chosen.
View Sonnet 5.5 ↑

Sonnet 5

3rd · good idea, weak execution

  • It has a real concept: film-reel framing with sprocket holes and sections numbered as reels.
  • The layout is a plain stack of boxes, and there's no image in the opening screen.
  • It has almost no motion.
  • It adds a live countdown to the gates opening, which is a useful touch.
View Sonnet 5 ↑

Grok 4.7

Evening slider, different type

  • The title is set in Anybody, a compressed sans, with a small sun beside the tagline. Body text is Literata. It also has a dark theme.
  • Drag the slider and the sun settles as the clock moves from the gates to the last film. The film that's on gets a highlight.
  • Buttons jump to the gate time, sunset, and each screening.
  • The FAQ is the three answers on the page. There is no accordion, and no keyframe animation.
View Grok 4.7 ↑

GPT 6.1 Sol

A printed poster

  • Huge Fraunces type, "Low" in roman and "Tide" in italic, a flat orange sun, and a thin wave along the bottom of the poster.
  • It picked Fraunces, same as the three Claude models. Body text is DM Sans.
  • The only motion is that wave, drifting slowly. It stops if you prefer reduced motion.
  • The FAQ opens and closes. There is no evening slider and no countdown.
View GPT 6.1 Sol ↑

The numbers

File size, animations and fonts are measured from the HTML. Cost, time and output tokens come from the Claude Code usage report, so those rows only cover the three Claude sessions.

Opus 5.5Sonnet 5.5Sonnet 5Grok 4.7GPT 6.1 Sol
Cost$1.94$1.35$1.08——
Wall time9 min8 min6 min——
Output tokens45.1k57.8k25k——
File size34 KB23 KB17 KB19 KB12 KB
CSS animations94101
FontsFraunces, JetBrains MonoFraunces, DM MonoFraunces, IBM Plex MonoAnybody, Literata, IBM Plex MonoFraunces, DM Sans, IBM Plex Mono

Sonnet 5.5 wrote the most code of the Claude sessions and still cost about 30% less than Opus 5.5.

Keep in mind