How to design websites with Claude Code, Codex and Cursor

Give it a brief, write your design rules down once, make sure it actually reads them, and check the built page in a browser before you believe it. When Claude Code, Codex or Cursor turns out the same hero, the same three cards and the same purple gradient, one of those four steps is usually missing.

I can't read code, so I build iter0 by briefing coding agents all day. The steps below go in the order I'd fix them. Each one is short and links to the full guide, with worked examples and files you can download.

An agent can build a plausible homepage from one sentence, but it will be a guess. Before you ask for any design, write three lines: the decision the page helps a visitor make, who that visitor is, and the questions they ask on the way, in order. The agent should only add a section when it answers the next question on that list.

Mark what's a fact you can publish, what's an idea that still needs a yes, and what's missing. If you don't, the agent fills gaps with made-up quotes and numbers, because that's what other sites have.

DESIGN.md is a plain file in your project that tells the agent how to design with what you already have: who the page is for, the colours and fonts the site uses, what each component is for, and the things you keep deleting. Exact values belong in your stylesheet. DESIGN.md is for the calls a person has to make.

The most useful lines are refusals: no logo cloud, no invented stats, no dashboard screenshot as the hero. 'Keep it clean' does nothing, because almost any layout passes it. End the file with checks that can fail, like 'at phone width the first screen shows the price and the button'.

Saving a file called DESIGN.md doesn't make any tool open it. Each agent reads its own instruction file: Codex reads AGENTS.md, Claude Code reads CLAUDE.md, and Cursor reads its rules folder. Add one line to that file telling the agent to read DESIGN.md before any UI work.

Keep the instruction file short. Codex stops reading AGENTS.md at 32 KiB by default, so a long design essay pasted in there can push your most important rules out. Put project rules in the instruction file, design decisions in DESIGN.md, and step-by-step procedures in a skill.

If you keep typing the same review steps, make them a skill. A skill is a folder with a SKILL.md file that the agent opens only when the task matches, like 'review this page at desktop and phone widths'. That keeps the steps out of every unrelated edit.

The description at the top decides when it opens. 'Helps with design' opens on the wrong tasks or never at all. Say what it does and when not to use it. If a skill needs to reach something outside the project, like a browser, that's where MCP comes in, with the smallest permission that does the job.

A reference site is great for layout and terrible for content. Write down what you want to keep: section order, spacing, how big the images are, what gets the emphasis. Then write your own content next to each borrowed decision, and say 'leave empty' where you have nothing, or the agent will copy their testimonials and invent names.

When you swap one of their components for one of yours, check the first screen still reads in the same order. If you can't fill a block with something real, drop it rather than making up a smaller number to put in it.

Choose each section by what the visitor needs to decide and the proof you actually have. A new business with no customers yet doesn't need a testimonial carousel. It needs a clear offer, a price and a plain account of what happens next.

Images work the same way. Use your own photos where trust matters: you, your team, your work, your product. A generated image is fine for a mood or a background. Brief each image for the space it sits in, decide the crop, and write alt text that says what the picture is for.

Claude knows design words well, and so do the other agents I've used. Say the exact thing you want changed, like 'tighter letter spacing on the headline' or 'one accent colour, used only on the button', and you'll usually get it. Say 'make it pop' and the agent guesses.

The other fix is tokens. Name your colours, fonts and spacing in one theme file and tell the agent to use only those names. A lot of the purple-gradient look comes from an agent picking its own values because nobody gave it any.

An agent will tell you the page is done after reading its own code. Don't take its word for it. A few months back an agent deployed an old copy of my site live, and because I had no customers, nobody noticed. Open the page in a browser yourself, at desktop and at phone width, and check it against your three lines from step 1. Can a visitor answer their questions in order? Does a tall photo push the price below the fold on a phone? Can you reach the button with the keyboard? Does the form actually send?

When you add a second page, check it shares the same header, footer and colour names as the first. When the same mistake shows up twice, add a line to DESIGN.md so it doesn't come back.

iter0, the builder I make, does most of these steps for you. It reads your competitors' sites, works out who the page is for and what order it should go in, shows you three designs and builds the one you pick. You can also connect it to Claude, ChatGPT or Codex through its MCP server. If you'd rather do it all yourself in your own repo, everything above works without it.