Design for the Reader Who Pastes Your Page Into an AI Chat

What happens to my page when someone pastes it into an AI chat?

It becomes plain text. The layout goes, the styling goes, the images go, anything hidden behind a click goes, and what is left is the words in the order the markup put them. Whatever meaning your design was carrying visually has to survive that flattening or it simply does not arrive.

This is a behaviour that barely existed a few years ago and is now ordinary. People select a page, copy it, paste it into a chat window, and ask for a summary, a comparison, or a translation into terms they understand. Your page is being read, just not by a person and not in the shape you designed.

I think this deserves to be treated as a design constraint rather than a curiosity, in the same way that print stylesheets and screen readers are design constraints. Here is what actually breaks.

Why is this a design problem rather than a content problem?

Because the failures are structural. The writing can be excellent and still arrive as an unreadable block, if the design put meaning into position, colour, proximity, or interaction instead of into words and markup. Those are design decisions, made in the design file, long before anyone wrote the copy.

The clearest example is a comparison laid out as two columns with a visual highlight on the better option. A reader sees the recommendation instantly. Pasted as text, the two columns interleave, the highlight disappears, and the recommendation that was obvious on screen is now absent from the text entirely.

What makes this worth attention is that the same decisions affect other things you probably already care about. Content that survives copy and paste also tends to survive being read aloud, being printed, and being retrieved as a passage, which is the mechanism I described in what a reranker is and why it decides whether your page gets quoted.

What gets lost first?

Anything expressed only in styling. Emphasis carried by colour alone, meaning carried by an icon, grouping carried by a card boundary, ordering carried by visual position rather than document order. All of it reduces to nothing when the styling is stripped away.

The second casualty is anything behind an interaction. Content inside collapsed accordions, hidden tabs, hover tooltips, or modals may not be in the copied selection at all, depending on how it is implemented. A page whose substance lives inside its interactive components can arrive almost empty.

The third is order. Designs that use grid positioning to place things visually can end up with a document order that differs from the reading order on screen. On a well-built page those match. On a page where someone moved a block visually to fix a layout, they often do not.

How do you make comparison content survive?

Put the conclusion in a sentence, not only in the visual treatment. If one option is better for a particular reader, say so in words next to the comparison. The visual design can still do the fast communication; the sentence is what survives every other way the content gets consumed.

For genuinely tabular data, keep it as a real table in the markup rather than as a grid of styled boxes. Real tables carry their structure into plain text reasonably well, because the relationship between a cell and its header is in the markup rather than in the positioning.

What does not work is a table whose meaning depends on a coloured cell or a tick icon. If the difference between two rows is a green background, that difference does not exist once the styling is gone. Say it in a word, even a short one, in the cell.

Should important information ever live only in an image?

No, and this was true long before anyone was pasting pages into chat windows. Text in an image is invisible to text extraction, to screen readers, to search, and to translation. An image should illustrate something the text already says, not carry information the text omits.

The common violation is a diagram that explains a process the surrounding prose never describes. On screen it looks like thorough documentation. As text it looks like a page that mentions a process and then changes the subject, because the explanation was in the picture.

Alt text helps and is not a substitute. Alt text is a description for someone who cannot see the image, and it is usually short by design. If a diagram carries a whole argument, the argument belongs in prose, with the diagram as reinforcement.

What about content that only appears after a click?

Decide whether it is essential. If a reader needs it to understand the page, it should be visible in the document rather than hidden behind an interaction. If it is genuinely supplementary, hiding it is fine, and losing it in a copy is fine too.

The pattern I have come to dislike is the page where a frequently asked questions section holds the real explanations, collapsed by default. It looks tidy and it means the substance of the page is invisible on arrival, invisible in a copy, and often invisible to anything reading the document.

The version that works is content visible in the document with the collapse purely visual, so the text exists whether or not the component is open. That is an implementation detail with a large effect, and it is worth asking your developer which one you have.

How do you design headings so the outline survives?

Make every heading a full statement rather than a label, and use real heading levels in order. When a page is flattened, the headings are the only remaining structure, so an outline of vague labels leaves a reader with no map at all.

The difference is visible if you strip your own page down to headings and read them in sequence. If that sequence reads like a summary of the argument, the flattened version will be usable. If it reads like a list of nouns, the flattened version will be a wall of text with occasional single words in it.

This is also why I write headings as questions. A question carries its own context, so it makes sense in isolation, whereas a label like Implementation only means something when you can see what it is sitting underneath.

Does a last updated date help?

Yes, if it is in the text rather than only in a visual badge, and if it is honest. A reader pasting a page into a chat window often wants to know whether the information is current, and a date in the text is the cheapest way to let them find out without going back.

The date needs to mean something. A timestamp that changes when a template is edited tells a reader nothing and, worse, tells them something false. If you cannot make the date reflect real content changes, it is better not to show one.

How to present that honestly on a CMS-driven blog is its own small design problem, and I worked through it in handling last updated dates on blog posts.

How do you test this in five minutes?

Select your most important page, copy it, and paste it into a plain text editor. Read what you get. Everything missing or nonsensical is something your design was carrying that the words were not, and now you have a list.

The second check is to paste it somewhere that preserves some formatting but not your styling, such as a document editor or a chat client. That shows you which structure survives partially, which is often more informative than the plain text version because it reveals where your heading levels are wrong.

If you want to make the copying itself deliberate rather than accidental, a copy button on the sections people are most likely to take is a reasonable affordance, and the mechanics are straightforward, as I set out in adding a copy to clipboard button.

What should you do next?

Do the paste test on one page today, ideally the page you would most hate to be misunderstood. Fix the first three things that vanished. That is usually enough to move the page from unusable when flattened to perfectly readable.

Then add one rule to how you review designs: before anything ships, somebody reads the page as text. It takes a minute, it catches the meaning that got trapped in the styling, and it improves the page for several audiences at once.

If you want a second opinion on whether your most important page survives being flattened, paste it into a text file and send me what comes out. I will tell you what I think is missing. Let's chat.