Claude is the most distinctive web designer we have tested, and the two current Claude models design in recognisably different voices. Below are their pages for four briefs: a landing page, an analytics dashboard, a phone app and a website for a product each model invented. Same prompts as every other model, one attempt, no edits.
How does Claude design a landing page?
As a product demo. Claude Opus 5.5 built a working booking calendar into the hero, with a floating "focus guard" card and buffer reminders, under "Easy to book. Hard to interrupt." in Fraunces and Geist. Claude Fable 5.1 went the other way: one large Instrument Serif headline, "Get booked without giving up your best hours", over a soft gradient, with an animated cursor booking and paying for a session below it. Both pages work on a phone and both pricing switches change every price.
How does Claude design an interface?
With annotation and warmth. On the dashboard brief both Claude models chose Inter with Instrument Serif and warm orange accents on white cards, and both added touches that help you read the data: Opus labels the revenue peak and draws the average line, Fable labels the best day and lets you flip the chart into a table.
How does Claude design a phone app?
Like a native app, with feedback for every step. On the phone finance brief, Opus 5.5 drew a sparkline of the month's balance inside the balance card and ended the send-money flow on a full-screen green confirmation reading "$42.50 sent". Fable 5.1 added money-in and money-out chips under the balance and confirmed the transfer with a "Sent!" overlay while the new balance counted down to $4,783.69. Both kept the brief's bottom tab bar and safe areas, and both updated the transaction list after sending.
What does Claude design when nothing is specified?
Something with a story. Given a brief to invent a product and make its website memorable, Opus 5.5 created Nod, a sleeper train that loops through the night and returns you to the same platform, with a flip-clock headline and a section of synthesised train sound. Fable 5.1 created Yonder, a lamp that shows the sky over someone's faraway city, on a dusky page with a glowing globe. Both chose night, distance and a single emotional idea, and both set their pages in Fraunces.
Which Claude should you use for web design?
Opus 5.5 when the page has to sell a product by showing it; Fable 5.1 when it has to set a mood. Opus is cheaper per token, $4 and $20 per million against Fable's $10 and $50 on Anthropic's pricing page, though it works longer and so costs about the same per page. Both took between 25 and 74 minutes per site on our briefs, against 9 to 13 minutes for the GPT models. To compare Claude's designs with GPT's on the same briefs, see best AI for web design.
Can you spot the Claude designs without labels? Four sites, names hidden.
Take the blind test
Frequently asked questions
Is Claude good for website design?
Yes. Claude Opus 5.5 and Claude Fable 5.1 produced the most distinctive designs of the four models we tested, with working interactions and responsive layouts, from one prompt and with no edits. They took longer than the GPT models: 25 to 74 minutes per site.
What Claude model is best for web design?
Claude Opus 5.5 for rich, product-led pages with interactive demos; Claude Fable 5.1 for calmer, editorial pages with fewer elements and more space. Opus is also the cheaper of the two per token.
Can Claude design a website without code?
Claude writes the code for you. In the Claude app you can preview a page as an Artifact on any plan; in Claude Code, available from the Pro plan, it writes the files, opens the page in a browser and refines it, which is how these designs were made.
Do Claude's two models design differently?
On the landing page, clearly: Opus put a working booking calendar in a dense hero, Fable a single large serif headline over a quiet gradient. On the dashboard they converged, with the same typefaces and similar warm orange accents.