AI-built websites all look the same: 4 design references to give Claude Code, Codex and Cursor

AI-built websites all look alike because the AI gets a generic request. If you type "make me a nice website", Claude Code, Codex or Cursor hand you the average of every website they have seen. The fix is to give the AI a precise reference: a style, a design system, an existing component. I use four websites for that.

• Scrolltide: templates with scroll-driven animations, for the hero.
• designmd.ai: hundreds of design systems in a single DESIGN.md file.
• Refero Styles: more than 2,000 styles taken from real websites.
• Kage: single components from real products, ready to turn into prompts.

Why do AI-built websites all look the same?

An AI model with no design constraints picks the most likely options: the same colors, the same fonts, the same block layout. The result works, but it has no identity. A concrete reference moves the choice from the model to you. Instead of describing what you want in words, you show the AI an example to start from.

Scrolltide: how do you build an animated hero with AI?

Scrolltide is a library of website templates with scroll-driven animations: text that assembles itself, moving backgrounds, sections that slide in as you scroll down the page. Every template is a ready-made prompt for Claude, Cursor or Codex. You copy it, paste it in and get a working web app.

Scrolltide is paid, but it has a section of free templates you can start from. My advice is to use it for the homepage hero, because that is the first screen your client sees.

designmd.ai: what is a DESIGN.md file and how do you use it?

designmd.ai collects hundreds of design systems in DESIGN.md format. A DESIGN.md file holds colors, fonts, spacing and component rules in one place.

The workflow is simple:

1. download the DESIGN.md file;
2. put it in the root folder of your project;
3. tell the AI: "Use the DESIGN.md file for the design".

From then on, every page the AI builds stays consistent with all the others. If you use Claude Code or Codex, designmd.ai also has an MCP: you create a free API key and ask the agent to search for and download the design system you need.

If you build websites for clients, designmd.ai has ready-made design systems for specific niches: dentists, restaurants, barbers and gyms.

Refero Styles: how do you copy the style of a well-known website?

Refero Styles collects more than 2,000 styles taken from real websites such as Apple, Linear, Vercel or Mercury. Open the style you like and you get the palette, the typography and a DESIGN.md file ready to copy.

If you want your SaaS to look like Linear, start from Refero Styles instead of describing to the AI in words what you want. A DESIGN.md file built on a real website is far more precise than any description.

Kage: how do you build a single component from a real example?

Kage works at the component level: hero, pricing, footer, FAQ, taken from real products and browsable by style and color. You find a pricing table you like, turn it into a prompt and have Claude Code build it.

Kage also has a free MCP, with no account and no keys. In Claude Code you connect it with a single command:

claude mcp add --transport http kage https://kage.design/mcp

Then you can ask Claude Code: "Make me a landing page like Linear, but for a dental practice".

How do you use the four websites together?

The four websites cover different layers of the same site, so they combine well:

1. Style: take the DESIGN.md from Refero Styles or designmd.ai and put it in your project.
2. Sections: build each section starting from Kage components.
3. Motion: add animation to the hero with a Scrolltide template.

This way the AI works inside clear constraints, and your website stops looking like every other one.

Save these four references: the next time you ask an AI for a website, you will have something precise to show it.