How to Design a Website AI Agents Can Actually Use

TL;DR: More and more of your traffic is an AI agent reading your site on behalf of a person who will never see it. Most award winning websites are nearly unreadable to those agents, because everything meaningful is locked inside JavaScript, images and visual layout. Designing for agents is not a new discipline. It is accessibility, done seriously, with a few extra files.

What does it mean to design for an AI agent?

An agent is software acting for a person. It opens your page, tries to understand what you offer, and reports back or takes an action. Nobody looks at your hero animation. The person sees a summary, an answer, or a booking that either happened or did not.

So you have two audiences with completely different senses. Humans read layout, contrast and motion. Agents read markup, text and structure. Right now most sites are designed exclusively for the first one and hope the second one figures it out.

Why do beautiful sites fail with agents?

Usually for boring reasons.

  • The content is not in the HTML. If the page arrives empty and JavaScript paints it in afterwards, many agents get a blank room.
  • Meaning is carried by pixels. Price in an image. Value proposition in a video. Headings that are divs styled to look big. All invisible.
  • Structure is decorative. Six h1 tags because they looked right, no landmarks, no order that maps to meaning.
  • Gates and walls. Cookie modals, interstitials, aggressive bot protection. A person clicks through. An agent stops.
  • Slow. Agents often work under a time budget. A page that takes six seconds is a page that did not exist.

The perception is that this is a technical SEO problem. The reality is that it is a design problem, because every one of those failures started as a design decision.

What do agents actually need?

  1. Real content in the first response. Server render it or make it static. If it needs JavaScript to say what you sell, it does not say what you sell.
  2. Semantic structure. One h1, headings in order, lists that are lists, nav and main and footer landmarks. This is free and almost nobody does it properly.
  3. Text for everything visual. Alt text that describes meaning, captions, transcripts for video. If a number matters, it must exist as text.
  4. Structured data. JSON-LD for who you are, what you publish, what you sell, and the answers to common questions. It is the difference between an agent guessing and an agent knowing.
  5. Plain text routes. An llms.txt file that explains what the site is and where the important pages live, and ideally a markdown version of each article. Agents parse markdown far more reliably than a styled page.
  6. An open door. Check your robots file and your CDN. A lot of sites now block AI crawlers by default, which is a valid choice, but you should make it on purpose rather than by accident.
  7. Stable URLs. Agents cite links. A link that moves is a citation you lose.

Does this make the site worse for humans?

No, and this is the part I like. Every item on that list also makes the site faster, more accessible and easier to maintain. Real text instead of text in images helps screen readers. Server rendered content helps people on bad connections in a train tunnel, which in Tokyo is most of my week.

There is no tradeoff to manage here. Designing for agents is just refusing to let meaning live only in the visual layer. That was always good practice. It just finally has a business reason attached.

How do I check my own site?

Three checks, none of them take long.

  • Fetch your page with JavaScript disabled and read what comes back. Whatever is missing is missing for agents too.
  • Ask an AI assistant to summarize your page and list your services and prices. What it gets wrong is your gap list, ranked by importance, for free.
  • View source and look at your headings alone. If the outline does not make sense on its own, neither does your page.

I run these on client sites before touching anything visual. The results are usually humbling.

Is this the same as SEO?

Related, not identical. Search optimization competes for a ranked position and a click. Agent readability competes to be the source that gets read, understood and quoted. You can rank well and still be useless to an agent, and I see it constantly.

If you want the content side of this rather than the build side, I wrote about it in how to get recommended by ChatGPT and Claude.

FAQ

What is agent readable design?

Building a site so that software acting on a person's behalf can read the content, understand the structure and complete tasks, not only humans looking at a screen.

Do I need to rebuild my site?

Usually no. Most of the value is in server rendered content, proper semantic headings, text alternatives and structured data, which can be added to an existing site.

What is llms.txt?

A plain text file at the root of your site that tells AI systems what the site is about and points to the pages that matter, in a format that is cheap for them to read.

Does designing for agents hurt the visual design?

No. It constrains where meaning is allowed to live, not how the page looks. The visual work stays exactly as ambitious.

Carlos Lastres is an Apple Design Award winning product designer and software engineer based in Tokyo, a 3x TEDx speaker and a United Nations speaker. He designs products that turn attention into revenue, and ships his own apps end to end.

Latest Posts