Make AI-built sites look made.

Models are very good at layout and very bad at guessing what the page is for. Spend your first three sentences on three things:

• Who is looking, and what are they worried about?
• What should they do next, and what is the one thing that stops them?
• How should they feel when they leave: reassured, impressed, curious?

Layout words come last, and only when you have a strong opinion. If you do not, say so: "choose the structure that fits this goal and tell me why."

Left alone, a model reaches for the average of every landing page it has seen: purple gradient, three feature cards, a testimonial carousel. Name the defaults you refuse.

Useful constraints are specific and checkable:

• "No emoji, no stock-photo clichés, no gradient text except in the logo."
• "Radius 12px at most. One accent colour. Two font families."
• "Animate transform and opacity only. Respect prefers-reduced-motion."
• "Do not invent reviews, ratings, client logos or numbers. Mark missing facts as fill-ins."

Put the list in a file the agent reads every time (AGENTS.md), not in each prompt.

"Make it look like Linear" is a vibe, and the model will copy the wrong thing. Attach the screenshot and name the borrowed quality:

Naming a library piece (a Motion component, a shadcn block) is the strongest reference of all: it is exact, and it is code the model can install instead of imitate.

Agents are eager. If you ask for a site, you get a site, including the five decisions you would have changed. Split the work:

1. Plan. "Do not write code. List the pages, the sections on each, the content you need from me, and the risks."
2. Approve or edit the plan in your own words. This is where taste enters.
3. Build one slice (the home hero), review it, then continue.

Keep the plan in the repo (docs/plans/). It becomes the memory the agent re-reads when the conversation gets long.

A headline of three words and a headline of eleven words need different designs. When the agent invents the copy, the design fits the invention, then breaks on yours.

Give it, in this order: the business facts (name, services, prices, hours, address), the actual headline and sub-line, two or three real photos or an honest instruction to use neutral stand-ins, and the testimonials you really have (or none).

Say plainly: "Where a fact is missing, show a visible fill-in. Never invent it." A site that is honest about gaps is better than a polished lie, and it tells you exactly what to collect next.

The more specific the target, the smaller and safer the diff. Include:

• the file or component, and the viewport you are looking at,
• the design token to use (--spectrum-3, text-muted-foreground), never a raw hex,
• what must not change ("leave the layout and the copy alone"),
• how you will check ("I will look at 390px and 1440px").

If a change should be a rule across the site, say so, and ask the agent to fix the token or the shared component instead of patching one page.

Give the agent eyes: a dev server it can start, a browser it can drive, and a checklist. Then ask it to verify before it reports back.

A good verification pass costs a minute and catches most of what you would otherwise report by hand:

• screenshot at 390px and 1440px, light and dark if you support both,
• look for overflow, clipped text, overlapping layers and tap targets under 44px,
• check the console and network for errors,
• tab through the page once.

Ask it to describe what it sees before it changes anything. A wrong description tells you the agent is not looking at what you think it is.

Every movement should answer one of four questions: where did that come from? (entrance), did it work? (feedback), what changed? (state), or where am I? (continuity). If it answers none, cut it.

Give the agent numbers, not adjectives:

• 140ms for hover and press, 320ms for reveals, 520ms for section changes,
• ease-out for things arriving, ease-in-out for things moving between places,
• transform and opacity only; never width, height, top or left,
• one hero-level effect per screen, and a still frame under reduced motion.

For something richer than CSS, install a piece that already meets those rules instead of asking for a fresh shader.

A redesign fails when it starts with the pretty part. A reliable order:

1. Inventory. Crawl the current site: every URL, its title, its purpose, its traffic if you have it. Ask the agent for a table.
2. Keep, merge, kill. For each page decide. Pages that rank or convert stay (and keep their URLs); thin pages merge; dead pages redirect.
3. Find the real problem. One sentence: "visitors reach pricing and leave", "mobile is unusable". Design for that sentence.
4. Direction before pixels. Write a one-page brief: audience, tone, three adjectives, two reference sites, tokens (colours, type, radius).
5. Rebuild the home page first at 390px, then desktop. Review. Then every other page reuses the same blocks.
6. Redirect map and checks. 301s for changed URLs, metadata, sitemap, a Lighthouse pass, then launch.

Never delete the old site until the redirect map is verified.

The best prompt you will write is a conversation. Ask the agent to interview you before it designs:

• Business: what do you sell, to whom, at what price, and why you instead of the alternative?
• Proof: what evidence do you really have (work, numbers, quotes)?
• Voice: how would you talk to a customer in person? Give three real sentences.
• Scope: which five pages, which one action, what is out of scope for launch?

Then, in order: positioning (one sentence), sitemap, page outlines (sections with a purpose each), copy for the hero and calls to action, moodboard and tokens, and only then the first section in code. Save each as a file; the next step reads the last.

Writing a shader or a 3D scene from a sentence is slow and rarely good. Choosing one that exists is fast, and then you can spend your time on the words.

1. Open the backgrounds, filter by what your site is for, and hover the candidates.
2. Pick the look that matches the feeling, then change its colours to your brand with the colour picker.
3. Copy the AI prompt (it includes the colours as they appear on screen) or the code, and paste it into your project.
4. Put the headline and one action over the calm part of the frame. Keep the contrast.
5. One animated background per page. Let reduced motion show the still frame.

Before you change a pixel, check that components use tokens (--primary, text-muted-foreground) and not literal values. Ask the agent to find every hard-coded colour, font and radius and move them to the token sheet. That one refactor is what makes later changes cheap and safe.

Then the rebrand is: new palette with contrast ratios checked, new fonts, one radius, one spacing scale. Review it on three pages (home, a long article, a form) at 390px before rolling out.

Re-explaining your preferences each session is the slowest way to work. A skill (a SKILL.md plus reference files) is loaded when its description matches the task, so the agent follows your system without being reminded.

What belongs in a design skill:

• the tokens and how to use them,
• composition rules: how sections alternate, how much space, what a good hero contains,
• motion rules: durations, easings, what is allowed to move,
• a checklist to run before calling something done,
• two or three do and don't examples with reasons.

Anthropic's frontend-design skill is a good start for visual direction; layer your own on top, and where they disagree, yours wins. VibeBox projects ship a vibebox-design skill filled in with the client's tokens.

Keep a short skill that runs the boring-but-decisive checks:

• Accessibility: one h1, heading order, alt text, contrast, focus rings, a keyboard-only walk-through, axe with zero violations.
• Performance: Largest Contentful Paint under 2.5s on a mid-range phone, no layout shift, images sized, third-party scripts justified.
• SEO: title and description per page, canonical, Open Graph, sitemap, structured data that matches visible content.
• Honesty: no invented numbers, names or reviews.

The point is not the tooling; it is that the agent states a pass or fail for each line, with evidence.

Create AGENTS.md (and a one-line CLAUDE.md that says @AGENTS.md) in the first hour. Cover:

1. Commands: install, dev, build, lint, test.
2. Folder map: where pages, components, content and tokens live.
3. Rules: tokens only, server components by default, content in src/content, no new dependencies without a reason.
4. Where to read first: the design skill, the block list, the brief.
5. Definition of done: what must be true before a change is reported complete.

When the agent makes the same mistake twice, the fix is a new line in this file, not a louder prompt.

Squint at the page. You should still be able to say what it is, who it is for and what to do next. Give each screen one headline, one supporting line and one primary button; everything else is quieter.

Use three levels of emphasis (size, weight, colour contrast) and use them consistently. If two elements compete, make one smaller rather than the other bigger.

• Two families at most: one for display and text, one for labels or emphasis.
• A modular scale (for example 12, 14, 16, 20, 28, 44, 64) and nothing between.
• Tighten display type (-0.03 to -0.04em tracking, line-height 1.0 to 1.1); loosen small uppercase labels (+0.1em).
• Measure: 55 to 75 characters per line for body copy; text-wrap: balance on headings.
• Weight over size: 600 for headings reads cleaner than 800.
• Body text at 16px minimum on phones.

Choose one accent and let neutrals carry the rest. Add semantic colours (success, warning, error) only where they mean something. A spectrum or gradient is an accent, used in a logo, an underline or one hero, never behind body copy.

Check contrast, do not eyeball it: 4.5:1 for body text, 3:1 for large text and UI borders. Test the dark and light versions separately; a colour that works on ink often fails on paper.

Use a base unit (4 or 8px) and a short scale. Give sections 64 to 160px of vertical room on desktop, half that on phones. Group related things tightly and separate groups generously: proximity is the grammar of layout.

Alternate section tones (page, slightly lifted, page) to make rhythm without lines. Align to a grid and let one element per section break it on purpose.

Start with one column and a thumb. Rules that hold up:

• tap targets 44px or more, with space between them,
• primary actions in the lower half of the screen where a thumb rests,
• no horizontal scroll, ever; check long words and tables,
• heavy effects (video, WebGL) start only when on screen and stop when they leave,
• test with the keyboard open and with large system text.

Take a screenshot at 390px of every page before you call it done.

Spend motion where it clarifies: a button that answers your press, a panel that arrives from where you tapped, a number that counts to its value, one hero that makes the page feel alive. Everywhere else, be still.

Budget it: one signature effect per screen, everything else under 300ms. Animate transform and opacity. Always offer a calm version for prefers-reduced-motion; it should be a complete page, not a broken one.

If you have no testimonials, do not write some. Use your process, your guarantees, your real work, or leave the section out. Use real photography where you can, or clearly neutral artwork where you cannot. Say what you do and what you charge. Visitors read honesty as competence.

Taste is a library of comparisons built from experience. Build it deliberately:

• Spend 20 minutes a day on sites that are well regarded in your field and on sites that are not, so you learn the difference.
• Keep a swipe file (screenshots with one sentence each: what is working, what you would steal).
• Write the why in plain words: "the spacing rhythm", "the type scale", "the restraint". If you cannot say why, you have not seen it yet.
• Rebuild one piece you admire from scratch, at the pixel level, to learn what it is made of.

Within a few months you will notice the small things before you can name them. That is taste forming.

Agents add. Your job is to remove: the third gradient, the second icon set, the animation that does not answer a question, the paragraph that says the same thing twice.

A practical pass: take a section, delete a third of what is in it, and look again. If the section still does its job, keep the deletion. Then add back the one detail that gives it character.

Open your page and a reference you respect at the same viewport and zoom. Look for the gap in three places: spacing, type and alignment. Then try the squint test (blur your eyes: does the hierarchy hold?) and the 50% test (zoom out: do sections have a rhythm?).

Ask the agent to measure rather than guess: "list the font sizes, line-heights and spacing values on this page; flag values that are not on the scale."

The details that make a page feel made:

• the same radius everywhere (and inner radius = outer radius minus padding),
• text optically centred in buttons, icons aligned to the cap height,
• borders that are 1px at low contrast instead of heavy shadows,
• focus states you would be proud to show,
• empty, loading and error states that someone designed,
• real content lengths: the longest name, the shortest, no name at all.

None of these are visible in a screenshot at a glance. All of them are felt.