# The thirty-second test

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

Module: Spotting AI-default UI · Level: beginner · 8 min · https://school.agents.org.in/design/tells/the-thirty-second-test

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

*[Interactive demo: 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 AI tell (A default choice that signals nobody made a choice: a purple gradient hero, three emoji feature cards, 'Unleash your potential'. One is harmless; several together make a screen look generated), 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

| Tell | Instead |
|---|---|
| Purple, indigo or fuchsia gradient on the hero | Monochrome plus one real accent, taken from the brand or the domain |
| Inter or SF Pro on a marketing page | One distinctive typeface with a reason |
| Gradient text (Text filled with a color gradient instead of one solid color (in CSS, background-clip: text). On a headline it is one of the most common generated-page devices) on the headline | Solid ink |
| Gradient buttons with a colored glow | A solid button |
| Glass (Frosted, see-through panels with a blur behind them. Fine over a photo or a busy canvas; over a plain background there is nothing to frost, so it is pure decoration) with nothing behind it | A plain surface, or real content showing through |
| Blurred orbs and blobs behind the hero | The product itself |
| The same radius on everything | A deliberate radius scale |
| Pure `#000` dark mode | A 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.

> **In plain words.** **Glassmorphism**: frosted, see-through panels with a blur behind them. Fine over a photo or a busy canvas. Over a plain background there is nothing to frost, so it is pure decoration.

## 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:

| Device | Strong sites | Weak sites |
|---|---|---|
| Icon-topped feature cards | 1% | 28% |
| Three or more tiny tracked-caps labels | 6% | 43% |
| Pill label above the heading | 5% | 26% |
| Gradient text | 2% | 13% |
| Emoji | 10% | 26% |
| Gradient fills | 22% | 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:

*[Interactive demo: 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 tabular figures (Digits that all take the same width, so numbers line up in columns and a ticking counter doesn't wiggle. Turned on with font-variant-numeric: tabular-nums), 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 (paste into your agent):**

```text
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.
```

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

- [ ] Green, because the number went up
- [x] Red, because a rise in errors is bad news
- [ ] Gray, because deltas should never be colored
- [ ] A green pill with a sparkline, to match the other tiles

*Why:* Color says good or bad, not up or down. Errors, latency, cost and churn are better when they fall, so a rise is red.

## In the skill

- https://school.agents.org.in/skill/anti-patterns/MOC-anti-patterns.md
- https://school.agents.org.in/skill/anti-patterns/ai-default-tells.md
- https://school.agents.org.in/skill/components/dashboard-tells.md