design.md: how to use Vercel’s file to remove AI slop from interfaces built with Claude Code and Codex

design.md is a Markdown file that gives AI agents precise design rules: colors, fonts, sizes, borders, spacing, section structure, image usage and, above all, what not to do. Put it in your project and Claude Code and Codex stop generating the usual "made by AI" page and follow a consistent visual language.

I tested it on two landing pages, both built with Claude Code. The first had no design rules. The second had a design.md file. The difference is obvious at a glance, and it’s why I use it today.

What is AI slop in interfaces?

AI slop is the set of patterns that immediately tell you a site was generated by AI. In web apps the most recognizable ones are:

• identical cards repeated in a grid;
• purple gradients everywhere.

When you ask Claude Code to "make me a nice page", the model fills the gaps with the most common choices it has seen. The result is correct but anonymous. And it looks exactly like everyone else’s who wrote the same prompt.

Where does design.md come from?

I didn’t invent design.md. It’s becoming more and more popular in product development, and a strong push came from Vercel, the company behind the Next.js framework and very focused on building with AI agents.

On August 31, 2026 Vercel published how it uses design.md: a single public file any agent can load to create pages consistent with Vercel’s brand. The file guides the agent on hierarchy, copy, layout, typography and color, and lists the generated-design patterns the team never wants to see.

Vercel also measured the effect. In its six-page test, pages built with design.md had 39 known failures, versus 91 without it: about 57% fewer. The team itself notes that six pages is a small sample and the test only counts failures already documented. The signal is still clear: written rules beat a generic description.

What should you put in design.md?

In design.md you define every rule you want AI agents to follow:

• colors: palette, accent colors, when to use them;
• fonts and sizes: families, weights, type scale;
• borders and spacing: radii, margins, distance between blocks;
• sections: how to build them and in what order;
• images: when to use them and in what format.

The most useful part is the list of what you don’t want to see. Writing "no identical cards, no purple gradients" explicitly takes away the shortcuts that produce AI slop. Vercel also chose to name the banned patterns instead of only describing the desired style.

How do you create a design.md without being a designer?

You don’t need to be a designer to create a design.md. This is the method I recommend:

1. pick a site or an app you like;
2. send the link to Claude Code or Codex;
3. ask something like: "Create a design.md file with the design rules of this web app and recreate its visual language.";
4. wait for the agent to generate the file and save it in your project.

From then on, AI agents follow it for every page they build. If you don’t like the result, fix the file, not the single page: the rule applies to every future run.

Why does a rules file change the result?

With design.md you stop asking the agent to "make me a nice page" and give it structural rules to follow. It’s the same principle as spec-driven development, applied to design: the more specific the request, the less the agent has to guess.

For people building software with AI without being developers, this matters a lot. Design is the first thing a user sees, and a generic interface signals little care even when the product works well. I cover this in the guide on how to build software with AI without coding.

If you’re building a web app with Claude Code or Codex, a design.md is the fastest way to give your pages a recognizable identity. Your next project is the right moment to try it.