No-slop design

Visual AI slop is manageable.

AI builds a screen in minutes, and the default result looks like every other AI screen. It costs credibility the moment a customer, a sponsor or a candidate opens it. Three screens of a broker's assistant for a fictional real-estate brokerage, each built with a small set of rules, next to the version most tools would produce from the same brief. Both are live pages: open them, click, press Tab.

The layout is an operator product a broker opens all day: navigation on the canvas, the work in white cards on a sheet, the numbers of the day in a dark banner. Density and sources matter more than decoration.

See the screens The rules on GitHub

Fictional brokerage, people and numbers. Snapshot of Monday, 13 April 2026, 16:10. Every page is generated from the same data file by one script; nothing is edited by hand.

The broker's portfolio

A broker between two visits, two minutes, laptop or phone: who in my portfolio is waiting on me, and for what?

Built with the rules opens the live page
The generic version most people would accept it

What to notice (numbers are the tells in the list)

  • 1, 2, 6No hero, no icon grid, nothing centered. The first thing on the screen is the portfolio: person, stage, last contact with its date, next step, on real-looking data with its snapshot time.
  • 7Two budgets, one phone and one price read "no data" because the source has none. The generic version rounds the budgets and shows $500,000 for the two empty ones.
  • sourceEvery number in the strip, every proposal and every explore answer carries its source: visit log [1], CRM [2], portal leads [3], listings file [4].
  • 11Empty, loading and error are one click away in the state switcher; a filter with no match shows its own empty state. The generic page has one state.
  • 15The button says what happens in the system: "Create the task", with Undo. Not "Reach out" with a check mark.
  • agentThe assistant's proposal sits in its own column with the visit sentence it is based on. The explore box answers only from the snapshot and says so when it cannot.

One buyer's record

The same broker decides whether to let the assistant write a task and a note into the CRM for one buyer.

Built with the rules opens the live page
The generic version most people would accept it

What to notice (numbers are the tells in the list)

  • 4, 5No "ready to buy!", no intent score with no definition, no fire emoji. Four facts in a banner, each with its source and date.
  • agentEvidence first: the two visit sentences and the CRM line the suggestion rests on, then what it writes, field by field, then the button.
  • 10Two buttons, one quiet one. Approve writes and shows Undo; Edit makes the text editable in place; "Not now" keeps it for tomorrow. Reject is not a red button.
  • agentThe trail at the bottom: what the assistant did before, when, approved by whom, and one entry that was undone.
  • 13Tabs are real tabs: arrow keys move between them, the panel follows, focus stays visible. Try it on both versions.

The broker's day

Late afternoon, before the 16:30 visit: what is on today, what the assistant thinks is late, and how the week stands.

Built with the rules opens the live page
The generic version most people would accept it

What to notice (numbers are the tells in the list)

  • 1, 14No health score, no medals, no confetti. A greeting with the snapshot's time, then the agenda, the priorities and the tasks on real-looking data.
  • 4, 15Each priority says the fact that makes it a priority ("the counter has waited 8 days") and the source. Not "you're crushing it".
  • 7The week's strip reads "no target" where the CRM has none. The generic version invents a score.
  • agentPriorities are proposals: nothing is written until "Create task", and every write shows Undo in the receipt.
  • 6, 9Left-aligned, one spacing scale, one accent. Dense on purpose: a broker opens this screen six times a day.

How these were made

  1. Real-looking data, frozen. Fourteen people, nine listings, twelve visits, five proposals and four portal leads, dated 13 April 2026. Two budgets, one phone and one price are missing in the source, so the screens say so.
  2. One generator, never a hand edit. A single Python script reads the data and the tokens and writes every page here, including the generic twins.
  3. Measured, not squinted. Contrast on every text pair, two widths, keyboard reach, the four states. The tells list is the audit.

The rules: sixteen visual tells and what to do instead. The workflow: from a brief to a validated decision in a thirty-minute session. The worked example behind these screens: brief, data snapshot, audit and session notes. The skills: html-mockup, visual-slop-audit, visual-validation-session, design-tokens-starter. The tokens behind every screen: tokens.css.