Make Claude Build Websites That Don't Look AI-Made

Give Claude Code real design references, written rules, and proper building blocks so its sites stop looking generic

Websites built by AI tend to look alike: a purple gradient, centered text, three identical cards, and rounded everything. This happens because the tool falls back on its defaults when you give it no design direction. Claude Code follows specific direction well when you supply it.

By the end of this guide, you will have a set of design references, a design rules file that Claude Code reads on every task, and a page that has passed an audit for generic AI patterns.

Who This Is For

  • Your Claude Code sites work but look like every other AI-built page

  • You have a brand or a taste level that the default output does not match

  • You build sites for clients who expect a custom look

  • You want a setup you can reuse across projects

What You'll Build

  • A small library of screenshots from sites you admire

  • A design rules file covering type, color, spacing, and things to avoid

  • A page built from real components and real assets

  • An audit checklist for spotting generic AI patterns

What You'll Need

  • Claude Code installed and a project to work on

  • Screenshots of three to five websites whose design you like

  • Your brand colors, fonts, logo, and real photos or product images

  • A browser to review the result

Going Further

  • Reuse the same design rules file in every new project and refine it as you go

  • Add screenshots of your own finished pages to the reference library

  • Ask a designer or a trusted peer to review one page and add their feedback to the rules