Skip to content
ExamsLibraryFor agentsConnect your agent

The thirty-second test

beginner·8 min·Markdown for agents

What this lesson teaches

Recognize the visual, layout and dashboard defaults that make a screen look generated, and know which ones to delete on sight.

  1. 1Why generated UI looks the same
  2. 2The visual tells
  3. 3Layout, content, motion, words
  4. 4What the numbers say
  5. 5Dashboards have their own tells

Here is a landing page. Tap everything on it that a model would produce if nobody told it otherwise.

Tap everything that looks generated 0 of 7 found

Tap any detail that a model would produce by default. Each find is numbered and explained here.

Seven tells on one hero. Tap each to see why it reads as generated, and what to do instead.

You probably found most of them before reading a word of explanation. That is the point. Nobody can name the one pixel that makes a screen look generated; people recognize the accumulation. The question this module trains is simple:

Could this have been generated in 30 seconds with a prompt? If yes, fix it.

Why generated UI looks the same

A model picks the most common option for every decision on the page, all at once. Fifty median choices do not average into a neutral design. They compound into a very recognizable one: the indigo gradient, the centred headline, the three cards. Each of these is an , a default that signals nobody made a choice.

This list is not anti-AI. It is anti-default. Plenty of generated interfaces are excellent, because the person prompting knew to specify these things. The tells appear when nobody specified anything.

The visual tells

TellInstead
Purple, indigo or fuchsia gradient on the heroMonochrome plus one real accent, taken from the brand or the domain
Inter or SF Pro on a marketing pageOne distinctive typeface with a reason
on the headlineSolid ink
Gradient buttons with a colored glowA solid button
with nothing behind itA plain surface, or real content showing through
Blurred orbs and blobs behind the heroThe product itself
The same radius on everythingA deliberate radius scale
Pure #000 dark modeA near-black with a hint of hue, like #18181b
The default shadow, 0 2px 8px rgba(0,0,0,0.1)Layered shadows at 4 to 6% opacity

Layout, content, motion, words

  • Layout. Hero, then three feature cards, then an FAQ. A single centred column top to bottom. The same card for unrelated content. "Trusted by" with six gray logos.
  • Content. Lorem ipsum, "100+ customers", "John Doe at Acme Inc", "Unleash your potential", stock photos. (Next lesson.)
  • Motion. fade-in-up on every block, the same easing everywhere, a bouncy spring on a button you press all day, hover effects on a phone.
  • Microcopy. "Get started" as the main button, "Awesome!" on success, "Oops!" on errors, "Click here to view…" in a tooltip.
  • Sound. A click on every button, a whoosh on every transition, a recognizable stock ping.

What the numbers say

Leonxlnx's taste-skill measured 246 gallery sites and split them into strong and weak by a panel's scores. Some devices are far more common on the weak ones:

DeviceStrong sitesWeak sites
Icon-topped feature cards1%28%
Three or more tiny tracked-caps labels6%43%
Pill label above the heading5%26%
Gradient text2%13%
Emoji10%26%
Gradient fills22%52%

Delete those on sight. But some popular devices are not tells: backdrop blur, an italic serif accent word and thin rules show no real difference, and monospace labels are actually more common on strong sites. Those are choices, not defects.

Most pages carry three to five tells. Removing them changes the feel more than any new effect would.

Dashboards have their own tells

An app screen is not a landing page. The generated dashboard is a landing page with numbers on it. Find its tells, then flip to the product version:

Tap everything that looks generated 0 of 5 found
↑ +6.2%
Error rate1.8%
New workspaces4
Refunds$0

Tap any detail that a model would produce by default. Each find is numbered and explained here.

Icon circles, giant figures, sparklines, green errors. Then the same numbers on a real product screen.

taste-skill also measured 23 real product screens from 17 products, and they share none of the generated habits:

  • No icon circles and no sparklines on headline numbers: zero of 23.
  • Often no tile at all. Many put the numbers as bare text, or in one container split by thin dividers.
  • Modest sizes. Values 16 to 40px (median 26), labels 12 to 16px in gray sentence case above the value. Nothing at 48px.
  • Color means good or bad, not up or down. Errors, latency, cost and churn are better when they fall. A rise in errors in the same green as a rise in visits hides the screen's only bad news.
  • Zero is gray. A change from nothing is "+4 (new)", not a green "+100%". No change is a gray dash, never a bold red "0.00%".
  • Tables: numbers right-aligned in , fixed decimals per metric, a sign on every change, no zebra rows, no uppercase headers.

The sample is small and hand-picked, so treat the sizes as a guide. The two color rules don't need a sample: they are logic, so enforce them first.

Spot the tells· for your agent
Audit this screen for AI-default tells. Check: purple/indigo gradients, gradient text, Inter on a marketing page, glass with nothing behind it, blurred orbs, pill labels above headings, icon-topped feature cards, emoji bullets, "Trusted by 10,000+" logo walls, the default shadow, one radius everywhere, fade-in-up on every block.
For app screens also: icon circles or sparklines on KPIs, values over 40px, deltas colored by direction instead of good/bad, "+100%" from zero, red 0%.
Return a deletion list first, then what to replace each survivor with. Don't add new effects.

Quick check

On an ops dashboard, the error rate rose from 1.2% to 1.8%. How should the delta look?

What this lesson builds on and leads to, across every course.

  • Cards, icons, avatars and APIs
  • Your first review
  • Delight has a budget
  • The unslop pass
  • Real content beats fake proof