Claude Design Tips: How to Stop AI Landing Pages From All Looking the Same

Source: Author

You can spot most AI-made landing pages in a second: a purple-to-blue gradient, Inter everywhere and a rocket emoji on the button. So when Claude rebuilt one with warm cream paper, a high-contrast serif headline and a terracotta accent, it felt like a real upgrade. It even scored 100 out of 100 on a linter that checks the page against its design tokens.

Then came the twist. Anthropic's own frontend-design skill, the one Claude loads for this kind of job, now lists that exact look among the defaults to avoid, along with numbered 01 / 02 / 03 markers, eyebrow labels and the big-number hero. The full article shares eleven habits for designing with Claude, tested on a made-up cash-forecasting product called Tallyhaus. Here are the main ideas.

Why AI design keeps drifting to the same look

Anthropic calls the cause distributional convergence. A model samples from patterns in its training data, so a vague brief lands in the safe middle. Ban the old tells and it moves to the next most likely choice, which soon becomes a fingerprint of its own. The skill listed the cream-and-serif look by June 2026, and the September 2026 rewrite kept it at the top.

A prettier style you copy will date within months. The durable fix has two parts: take your design choices from somewhere the average can't reach, and check every new section against them.

One landing page in three generations: the default, the copied premium fix, and a design drawn from the product's own world

A date to note: Claude Design is moving

The standalone site at claude.ai/design closes on December 14, 2026, and new designs are now made as artifacts in a normal Claude chat. Chats and comments don't come across, so save what you need. Once a design system has moved, the standalone copy turns read-only.

Six habits you can use today

• Hand Claude numbers instead of adjectives. Measure the type scale and spacing of a site you admire and give Claude those values. Borrow proportions, never logos or copy.
• Nest your corners. Inner radius equals outer radius minus padding.
• Pick colours in OKLCH. Six hues at one HSL lightness ranged from 0.49 to 0.90 in perceived lightness. In OKLCH they stayed within 0.01.
• Be loud in one place. Choose one signature element and keep everything around it calm.
• Squint at every screen. Blur and grayscale screenshots at three widths and check what the eye hits first.
• Write specific copy. Every headline should hold a date, a number or a noun only your product can say.

The two habits that changed the result

Design from the customer's world. Tallyhaus serves small studios, so the design came from their money desk: an adding-machine tape, ruled ledger paper, a carbon-copy invoice book and a rubber stamp. The tape became the hero, the ledger lines a 32px baseline grid, and the stamp red appears exactly once.

Each object from a small studio's money desk and the design token it became

Make taste executable. A token linter runs as a Claude Code PostToolUse hook after every Write or Edit. A sloppy test section scored 72 out of 100 with 14 findings, then 100 once it was rebuilt on the tokens.

Worth knowing

A token score only measures consistency. The premium version scored 100 and still tripped six generated-design tells, so the article adds a separate tells check. The skill also doesn't call these looks bad: if a brief asks for one, the brief wins. And the list will age, so reread it every few months.

Read all 11 Claude design secrets on Medium →

The measuring snippet, OKLCH and spring-motion code, the world-brief prompt, a ten-tool kit with the catch on each, and the full hook setup.