How to Make Your Website Look Expensive with AI

You can make your website look like a company that paid for design, using two markdown files and one prompt. The trick is giving the AI a real visual reference instead of adjectives. You build a brand file with your colors and fonts, grab a design.md from a site whose look you actually want, and then every page you generate reads both files first.

At my first startup we paid a design agency ten thousand dollars to redesign our website. I am redesigning mine again right now, and I am doing the whole thing myself with this workflow.

Why this matters

Telling AI to make a site "modern and clean" gets you the same beige template everyone else has, because those words mean nothing specific to a model. Telling it "match this type scale, this palette, and this component style" gets you something that looks designed. What separates a cheap-looking site from an expensive one is almost always whether the AI had a real reference to match.

Step 1: Build your brand file first

Start with a brand file, because without one the AI will nail someone else's look and none of your own. A brand.md is a single markdown file holding your colors, your fonts, and your voice, and it is the thing that keeps the output yours instead of a clone of your reference site.

If you do not have one yet, here is the full guide to creating a BRAND.md file. It takes about ten minutes with a free plugin, and everything below assumes you have it.

Step 2: Find a site whose look you actually want

Go to Refero Design and browse until something makes you stop scrolling. Refero catalogs real websites by visual style, so instead of describing what you want, you can point at it.

Pick for design language, not industry. I picked Duolingo and Family, and neither one is remotely in my business. What matters is whether the type, spacing, and color logic are doing something you want.

Step 3: Copy the design.md

Open the style you picked and copy its design.md. Refero writes these out for you, complete with hex codes, font weights, sizes, line heights, and letter spacing, plus a written description of what the design is doing and why.

The Role column is why this works. Its entry for green reads "green text accent for links, tags, and emphasized short phrases, do not promote it further," which is the instruction that stops AI from spraying your accent color across the whole page.

Key insight: You are handing the AI a photo of what good looks like, the same way you would before asking it to make an image. Except the photo is a website, and it comes with the exact numbers.

Step 4: Put it next to your brand file

Save the design.md into your website project, in the same place your brand file lives. Both files need to be inside the folder Claude has open, or Claude will not read either one.

Now you have both halves: your brand file says who you are, and the design.md says what good looks like. The AI applies your brand in the reference file's visual language.

Step 5: Prompt for the page

Ask Claude or Codex to build the page and reference both files. The prompt is short because the files are doing the work.

This is also why the same setup works for decks and graphics, not just landing pages. Anything the AI generates in that folder reads the same two files first, so it all comes out consistent. That is the same principle behind getting ten design options instead of one.

Additional reading

Here are some related guides to check out:

1. How to Create a BRAND.md File for AI Design
2. How to Get 10 AI Design Options Instead of One
3. How to Fix AI-Looking Graphic Design and Posters
4. How to Vibe Code for Beginners
5. How to Set Up Claude Code