On Sunday someone published ten tells of a slop UI. It opens with a college app that received "minor UI improvements", which the author calls "the most slop-coded user interface I have seen".
I nodded along until item seven, on fonts. "It's usually Inter, or if you have a website even remotely programming-related, you get JetBrains Mono." And then: "It adds these // whenever anything close to tech is mentioned."
Until this evening, this site set its text in Inter, put a // in front of its section labels, and showed every code block in JetBrains Mono. I managed both halves of the same tell.
So I opened the design skill Anthropic ships for Claude Code, frontend-design, which has a section listing what AI-generated design clusters around right now. Number two is "a near-black background with a single bright acid-green or vermilion accent". Number five includes "a tracked-out ALL-CAPS eyebrow label above every heading", "tinted near-black (#0B0B0B, #111) standing in for black" and "a monospace face for small data labels".
This site's ground is #08090b. Its accent is #3bff9e. Until this evening many of its labels were tracked-out capitals.
What the list gets right
Most of the ten are fair, and the best ones have nothing to do with taste.
The pulsing "active" badge on a student ID that is never inactive, because an inactive session just logs you out. The "verified" tick that no API call ever verified. A blog footer that says "Built with Hugo. Written from Neovim", because the author once told the agent they wanted to write in Neovim. A startup screen reading "one campus. one app.", where the author can smell the management prompt behind it.
That is information nobody asked for. Something in the context made the model produce them, and nobody downstream asked whether they should stay. That is the whole problem in miniature, and it is a better point than gradients.
The uncomfortable timeline
Here is what the git history says about this site:
- March: the first commit, with Inter for the body text.
- April: the design system goes in, with JetBrains Mono and
#3bff9eon near-black. - 15 June: Anthropic adds "a near-black background with a single bright acid-green or vermilion accent" to its skill, as one of three looks AI design clusters around.
- 13 August: I write an architecture decision record that locks the dark ground in place. Not warmed, not neutralised, not lightened.
- 1 September: the skill's list grows to five items, adding among other things all-caps eyebrow labels, tinted near-black and monospace labels.
So I built a look in the spring, the vendor catalogued it as the machine's median two months later, and I then wrote a document forbidding anyone to change it. Tests pinned the capitals and the // in place as well.
That sounds bad, and for part of it, it is.
Default or choice
The skill also has a sentence that matters more than the list itself: "All traits are legitimate for some briefs, but they are defaults rather than choices, and they appear regardless of subject." And straight after: "the brief's own words always win, including when it asks for one of these looks."
A tell is a choice nobody made. The look itself is not the issue.
Some of this I chose before any agent was involved. I wanted the site to feel like a terminal, and I walked into a design brainstorm with an agent with Inter, JetBrains Mono and a green on near-black already decided. What came out of that brainstorm was the chrome on top: a // in front of every label, labels in tracked-out capitals, the language tag on code blocks in capitals too.
Which parts have a reason written down is something I can check, and it sorts the two groups cleanly.
- The dark ground has one. The decision record says warm and neutral grounds were tried, more than once, and read worse, because a warm ground turns deliberate terminal chrome into accidental terminal chrome.
- The green and the fonts have one: the brief I brought with me.
- The
//and the capitals had none. They arrived with the brainstorm, they looked finished, and tests later pinned them, which made them look decided.
That last step is worth dwelling on. I have argued before for baselines that only tighten, and I still do. But a ratchet pins whatever you hand it. Hand it a default and you get a default with a test around it, which looks exactly like a decision from the outside.
The same evening
Earlier this evening I made the capitals lowercase and kept the //, telling myself it followed from the terminal brief. Then I went through the site and found labels in three styles, all behind a //. The marker came from the agent's idea of what "terminal" means, and I had filed it under my own brief.
So the rest went too:
- Every label is lowercase JetBrains Mono now, with no marker. The navigation as well.
- Numbered markers like
01are gone, from the home page picks and from the process steps on the services page. The skill allows them when "the content actually is a sequence", and the process steps are one, but the list already shows their order. In a series, the part number stays as a plain number, because there it tells you something. - Middle dots are gone. Dates, reading times and tech tags now stand apart on spacing alone, and interface strings use commas. The skill lists "meta strings joined with middle dots" as template chrome.
- Arrows after buttons and links are gone, pagination included. "Next" says where it goes without one.
Then I tried IBM Plex for both the text and the code, side by side with what was there, and went back within the hour. Inter and JetBrains Mono read better to me. That is a reason, and it now sits in the stylesheet, next to the font tokens.
What to do with a list like this
Write the brief before you open the agent. The agent will happily supply a direction, and it will be the common one. What you ask for is not the same as what you specified, and in design the gap fills with the median. Everything I had decided beforehand survived this evening, and everything the brainstorm added on top went.
Ask each tell for its reason. Can you say, in one sentence, why it is there? If you can, write the sentence down somewhere outside your head. If you cannot, it is a default, whoever typed it.
Do not chase the list. Anthropic's grew from three items to five in eleven weeks. Anything that becomes common gets on it, including whatever everyone switches to next. A site redesigned to avoid today's tells will be on the next version.
Distrust anything that says what the chat said. Of the ten, the tell I would fix first on any product is the redundant text, because it is the one users actually have to read.
The author of the list closes by saying their own site is vibe coded, "it looks cute tho". Fair enough. Everyone's site is on somebody's list. The only part you control is whether you can say why.