In a visual that shows a product, the screen must be a real screenshot. When I let Claude redraw an interface in HTML, it invents: counters, charts, labels that don’t exist. My rule: a real screenshot, edits limited to names, or no visual.
Two rejected visuals
I asked for visuals for a product page. Claude redrew in HTML a segments screen, with counters, and a workflow screen, with nodes and a number of sends. Both looked credible. The feedback was blunt: “it is forbidden to modify the platform’s elements, you did it your own way”.
Later, on another page, a carbon footprint breakdown bar had been reconstructed even though the product doesn’t display that chart. I replaced it with the real ring, taken from an image in the documentation.
A fake screen is a promise the product doesn’t keep. A reader who looks for that bar in the tool won’t find it.
The rules
- Start from a real screenshot, taken from a bank of screenshots, or from an image in the official documentation.
- Edit only the names. Two fictional people, first names only: Emma is the tool’s user, Lucas is the message recipient, Lumen is the brand. Never the user as the recipient. An off-topic label is neutralized at the same coordinates, in the same font.
- Demo figures may be adjusted, in the exact format of the screen. In that case, the media description says “demo data”, never “real screenshot”.
- What isn’t the interface may be created: a fictional email or SMS from a fictional brand, a phone frame.
- The screenshot alone. No caption boxes or badges on the image, no photo-plus-screenshot montage: the explanatory text goes in the page.
- No generated images. Neon AI illustrations are dropped, even if they are already online: they get replaced.
- The same rigor for text: a feature is only claimed if it appears in the documentation. Undocumented tracking parameters aren’t cited, a display mode absent from the documentation is only mentioned where it is proven.
How I apply it with Claude
- A memory note carries the rule, with the why (the two rejected visuals) and the how, so the agent doesn’t rediscover it every session (see how I organize this memory).
- The page rebuild skill repeats the rule at the visuals step: a rebuilt card copies the shape and values of a real screen.
- I look at every image before it goes out. When a screenshot is too small, the request is a new screenshot, not a redraw.
The limits
The rule costs time: you need an up-to-date bank of screenshots and, sometimes, to ask for a new one. It also rules out “clean” visuals that AI produces in ten seconds. That is the price: a true visual beats a pretty one.
Key takeaway
Let AI create what isn’t your product (a fictional email, a phone frame, a layout) and never what is. An invented screen, even a plausible one, ends up showing.