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.
Here is a landing page. Tap everything on it that a model would produce if nobody told it otherwise.
Tap any detail that a model would produce by default. Each find is numbered and explained here.
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
| 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 |
| on the headline | Solid ink |
| Gradient buttons with a colored glow | A solid button |
| 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-upon 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:
| 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:
Tap any detail that a model would produce by default. Each find is numbered and explained here.
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.
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?
In the skill
The nodes your agent reads when it does this work.
- MOC — Anti-PatternsWhat "AI default" looks like, and what to do instead.
anti-patterns/MOC-anti-patterns - AI-default tellsPurple gradients, Inter, pure black dark mode, Lucide icons, lorem ipsum. The full list.
anti-patterns/ai-default-tells - Dashboard tellsAn app screen is not a landing page. Headline numbers without icon circles or sparklines, at 16–40 px; deltas coloured by good or bad rather than up or down; zero change in grey; numbers right-aligned in tabular figures; one grotesk, 4–9 sizes.
components/dashboard-tells
Connected lessons
What this lesson builds on and leads to, across every course.