De AI-tells op mijn site, en welke ik zelf koos

Zondag verscheen er een lijst met tien tells van slop-UI, tells zoals bij poker: kleine signalen die verraden wat erachter zit. De lijst opent met een studentenapp die "minor UI improvements" had gekregen. De auteur noemt het resultaat "the most slop-coded user interface I have seen".

Ik zat instemmend te knikken tot punt zeven, over fonts. "It's usually Inter, or if you have a website even remotely programming-related, you get JetBrains Mono." En daarna: "It adds these // whenever anything close to tech is mentioned."

Tot vanavond stond de tekst op deze site in Inter, elk codeblok in JetBrains Mono, en voor elk sectielabel een //. Beide helften van die ene tell klopten hier dus.

Daarna opende ik de design-skill die Anthropic met Claude Code meelevert, frontend-design. Daarin staat een opsomming van de stijlen waar AI-design nu steeds weer op uitkomt. Nummer twee: "a near-black background with a single bright acid-green or vermilion accent". Nummer vijf noemt onder meer: "a tracked-out ALL-CAPS eyebrow label above every heading", "tinted near-black (#0B0B0B, #111) standing in for black" en "a monospace face for small data labels".

De achtergrond van deze site is #08090b. Het accent is #3bff9e. En tot vanavond stonden veel labels in ruim gespatieerde hoofdletters.

Waar de lijst gelijk heeft ​

De meeste van de tien kloppen, en de beste hebben niets met smaak te maken.

Een pulserende "active"-badge op een studentenpas die nooit inactief kan zijn, omdat een verlopen sessie je gewoon uitlogt. Een "verified"-vinkje dat door geen enkele API-call is geverifieerd. Een blogfooter met "Built with Hugo. Written from Neovim", omdat de auteur de agent ooit had verteld in Neovim te willen schrijven. Een opstartscherm met "one campus. one app.", waar je de prompt van een manager zo doorheen ziet schemeren.

Dat is informatie waar niemand om vroeg. Iets in de context bracht het model op het idee, en daarna vroeg niemand zich af of het mocht blijven staan. Dat is het hele probleem in het klein, en een sterker punt dan gradients.

Een ongemakkelijke tijdlijn ​

Dit is wat de git-historie van deze site laat zien:

• Maart: de eerste commit, met Inter voor de lopende tekst.
• April: het design system gaat erin, met JetBrains Mono en #3bff9e op bijna-zwart.
• 15 juni: Anthropic zet "a near-black background with a single bright acid-green or vermilion accent" in de skill, als een van drie stijlen waar AI-design op uitkomt.
• 13 augustus: ik schrijf een architecture decision record dat de donkere achtergrond vastzet. Niet warmer, niet neutraler, niet lichter.
• 1 september: de lijst in de skill groeit tot vijf punten, met onder meer labels in hoofdletters, getint bijna-zwart en monospace voor labels.

In het voorjaar gaf ik deze site een uiterlijk. Twee maanden later beschreef Anthropic precies dat uiterlijk als het gemiddelde dat een model oplevert. En daarna schreef ik een document dat verbiedt het te veranderen. Daarbovenop legden tests de hoofdletters en de // vast.

Dat klinkt slecht, en voor een deel is het dat ook.

Default of keuze ​

In de skill staat ook een zin die zwaarder weegt dan de lijst zelf: "All traits are legitimate for some briefs, but they are defaults rather than choices, and they appear regardless of subject." En direct daarna: "the brief's own words always win, including when it asks for one of these looks."

Een tell is een keuze die niemand gemaakt heeft. Aan het uiterlijk zelf ligt het niet.

Een deel hiervan had ik al gekozen voordat er een agent aan te pas kwam. Ik wilde dat de site aanvoelde als een terminal, en toen ik met een agent over het design ging brainstormen, lagen Inter, JetBrains Mono en groen op bijna-zwart al vast. Wat die brainstorm opleverde, was de aankleding eromheen: een // voor elk label, labels in ruim gespatieerde hoofdletters, en ook het taallabel boven codeblokken in kapitalen.

Voor welke onderdelen een reden op papier staat, kan ik nagaan, en die vraag scheidt de twee groepen netjes.

• De donkere achtergrond heeft er een. Het decision record zegt dat een warme en een neutrale achtergrond meer dan eens zijn geprobeerd en slechter uitpakten, omdat de terminal-look op een warme ondergrond eruitziet als toeval.
• Het groen en de fonts hebben er een: de brief die ik zelf meenam.
• De // en de hoofdletters hadden er geen. Ze kwamen uit de brainstorm, ze zagen er afgewerkt uit, en later legden tests ze vast, waardoor ze eruitzagen als een besluit.

Die laatste stap verdient aandacht. Ik heb eerder gepleit voor drempels die alleen strenger worden, en daar sta ik nog steeds achter. Alleen zet zo'n drempel vast wat je hem geeft. Geef je hem een default, dan heb je een default met een test eromheen, en van buitenaf is dat niet van een besluit te onderscheiden.

Dezelfde avond ​

Eerder vanavond maakte ik van de hoofdletters kleine letters en liet ik de // staan, omdat ik mezelf wijsmaakte dat die uit de terminal-brief volgde. Daarna liep ik de site door en vond ik labels in drie verschillende stijlen, allemaal met een // ervoor. Die marker kwam uit het beeld dat de agent had van wat "terminal" betekent, en ik had hem onder mijn eigen brief geschoven.

Daarom ging de rest er ook uit:

• Elk label staat nu in JetBrains Mono, in kleine letters en zonder marker. De navigatie ook.
• Nummers als 01 zijn weg, bij de startpunten op de homepage en bij de processtappen op de dienstenpagina. De skill staat die toe als "the content actually is a sequence", en de processtappen zijn dat ook, maar de lijst laat de volgorde zelf al zien. In een serie blijft het deelnummer staan, als gewoon getal, want daar zegt het iets.
• Puntjes tussen onderdelen zijn weg. Datum, leestijd en tech-tags worden nu alleen door witruimte gescheiden, en in interface-teksten staan komma's. De skill noemt "meta strings joined with middle dots" als standaardaankleding.
• Pijltjes achter knoppen en links zijn weg, ook bij het bladeren door pagina's. "Volgende" zegt zonder pijl al waar je heen gaat.

Daarna heb ik IBM Plex geprobeerd voor zowel de tekst als de code, en het naast de oude fonts gelegd. Binnen het uur ging ik terug. Inter en JetBrains Mono lezen voor mij prettiger. Dat is een reden, en die staat nu in de stylesheet, naast de font-instellingen.

Wat je met zo'n lijst doet ​

Schrijf de brief voordat je de agent opent. De agent levert graag een richting aan, en dan krijg je de gangbare. Wat je vraagt is nog geen specificatie, en bij design vult het gemiddelde dat gat op. Alles wat ik van tevoren had besloten, heeft deze avond overleefd, en alles wat de brainstorm eroverheen had gelegd, is eruit.

Vraag bij elke tell naar de reden. Kun je in één zin zeggen waarom het er staat? Zo ja, schrijf die zin dan op, ergens buiten je eigen hoofd. Zo nee, dan is het een default, wie het ook heeft ingetypt.

Ren niet achter de lijst aan. Die van Anthropic groeide in elf weken van drie punten naar vijf. Alles wat gangbaar wordt, komt erop, ook de stijl waar iedereen hierna op overstapt. Een site die je herontwerpt om de tells van vandaag te ontlopen, komt op de volgende versie te staan.

Wantrouw tekst die herhaalt wat er in de chat stond. Van de tien zou ik bij elk product als eerste de overbodige tekst aanpakken, want dat is de tell die gebruikers echt moeten lezen.

De auteur van de lijst sluit af met de opmerking dat de site waar de lijst op staat zelf ook vibe-coded is, "it looks cute tho". Eerlijk is eerlijk. Elke site staat wel op iemands lijst. Het enige wat je zelf in de hand hebt, is of je kunt zeggen waarom.