Giving A Coding Agent Real Design References

"Modern and clean" is not a design

Ask a coding agent for a modern, clean interface and you get a recognizable house style: a centered hero, a rounded card grid, a gradient button, generous whitespace. It is not ugly. It is also not yours, and if you have seen one AI-generated landing page you have effectively seen most of them, because "modern and clean" describes almost nothing. The model fills in every detail you did not specify from the safest, most common pattern in its training data, and that pattern is the same one every other unguided prompt lands on.

This is the same underlying mechanism covered in why AI writing sounds generic: a model with no concrete reference defaults to a safe average, and a safe average has no distinguishing character by definition.

What a reference actually replaces

An adjective asks the model to imagine a design. A reference gives it one to copy from. Those produce different quality output because copying a specific, well-made thing is a task the model is genuinely good at, while inventing taste from a one-word brief is not.

Three kinds of reference work in practice, in roughly ascending order of how much control they give you:

• A screenshot. Multimodal models can look at an image and describe, then replicate, its layout, spacing, and color logic. Point one at a page whose look you want and ask for a breakdown before asking for code; the breakdown step catches misreadings before they get built.
• A token file. A short file naming your actual color hex values, font stack, spacing scale, and border radii turns "pick colors that look nice" into "use these colors." Tailwind's config file already is this for any project using it, and pointing an agent at tailwind.config.js or a design-tokens JSON file is enough for it to stop guessing.
• A component library. Open-source libraries like shadcn/ui ship real, accessible, production-tested components rather than asking the model to build a button from first principles. An agent that can copy an existing button implementation produces a more consistent result than one asked to imagine what a button should look like.

Old prompt, new prompt

The difference is concrete, not stylistic. "Build me a pricing page" produces a guess. "Build me a pricing page using the tokens in design-tokens.json and the card, button, and badge components already in src/components/ui" produces an instruction the model can follow literally, because every ambiguous decision, the exact blue, the exact corner radius, the exact button shadow, has already been made somewhere it can read.

Tools built around this idea exist for a reason. v0 generates against a component system rather than free-form HTML, which is a large part of why its output looks less generic than a blank prompt to a general-purpose model. The lesson generalizes past any one tool: give the agent a system to work inside, not a blank canvas to guess at.

Where to point a coding agent

The honest summary

An agent's UI output looks generic when it has nothing but an adjective to build from, and it stops looking generic the moment you hand it something concrete: a token file, a component library, or a screenshot it can name and copy. None of this makes the model more creative. It makes the model's very real ability to follow a specific reference actually load-bearing, instead of leaving it to invent one from the most average pattern it has seen.

For the setup habits around a coding agent more broadly, see CLAUDE.md in practice and scope control for AI coding agents. Tool pages: v0, Cursor, and Claude Code.