Golden Sky AI
Three rows of finished web pages drifting on a tilted plane over a near-black ground: a nautical map for a Ligurian hotel, a trading dashboard in green and black, a children's reading app with a canoe illustration, a navy trattoria page and a yellow hotel page with a cliffside photo.

Guide · DESIGN

How to design web pages with Claude that don't look AI-made

By Ben Lane

Pages: Impeccable's gallery, impeccable.style/gallery, made with Impeccable

Claude can design web pages as clean as Apple's and Stripe's once it has the right help. Ask it for a landing page with no help and you'll get one straight away, and you'll recognise the look. The makers of Impeccable, one of the free tools in this guide, list the usual giveaways: one font (Inter) on everything, purple-to-blue gradients, boxes nested inside boxes, grey text on coloured backgrounds, and a small icon in a rounded square above every heading. On its own, Claude has no design system for your site, meaning no written rules for its colours, fonts, spacing and buttons, and unless you give it a browser it never sees the page it made. This guide gives it both with five free tools and a set order to run them in. Each page is then built from a real design system, checked for those giveaways and screenshotted at laptop and phone size before you see it.

Step 1 of 2

Get the full guide

The steps are free, and they open right here once you've answered one quick question.

We'll email you this guide once you've answered the next question, whether or not you tick the box. See our Privacy Notice.

All product names and marks belong to their owners. No affiliation is implied.