Summary#
Agent-made pages look alike: a centred headline under a pill label, one italic word, a drawing where a photograph
belongs, three cards, a dark band at the end. The list of tells is in [[ui-design#tells]], but a list does not show you
your own page next to them. osy design critique does: your first screen, your nearest references, and the nearest
agent-made pages with what makes each read as generated, plus a measured verdict on which you sit closer to.
Signature#
osy design critique [--shot <png>]… [--refs <dir>] [--out <dir>] [--gallery] [--json]Description#
What it compares#
| set | from | default |
|---|---|---|
| your page | the wide PNGs osy test --pixels wrote, the twelve newest at least 1000 px wide | osy-shots/, or --shot <png> (repeatable) |
| your references | the wide renders osy design look <url> wrote (Looking at a reference site before you design) | design/refs/, or --refs <dir> |
| the anti-references | landing pages models produced for a plain ask, and our own sites and apps | shipped with the CLI; --gallery lists them with their tells |
Each picture's FIRST SCREEN (a 16:10 crop from the top) is reduced to three measures: tone (how light and dark it is), colour (which hues, and how much is grey) and layout (where the light and the dark sit). The distance is the mean of the three differences. A page is compared with the mean of its two nearest references and its three nearest anti-references.
How well that separates designed pages from agent-made ones was measured, not assumed: with each page left out in turn, it placed 19 of the 26 anti-references nearer the gallery and 16 of 21 design-led sites nearer each other: about three pages in four. It cannot tell a plain white app from a white, minimal designed page: both of the gallery's plain eval apps sat nearer the designed sites. That is one reason the sheet, not the number, is the critique.
What it writes#
For every screenshot, design/critique/<shot>-critique.png: the page, then its nearest references, then its nearest
anti-references, each captioned with its tells. Then one line per page:
$ osy design critique --shot editorial-rebuild-1440.jpg
✓ editorial-rebuild-1440.jpg is closer to your references (0.090) than to the agent-made pages (0.134).
nearest agent-made: ours-osyrin-cloud — the same centred pill-label-headline-two-buttons hero as every other page of the site · …
sheet → design/critique/editorial-rebuild-1440-critique.png--json prints every distance, the nearest of each set and the sheet's path.
Reading it#
- Closer to the agent-made pages means the page is BUILT like them, and its colours are not the cause. Go back to the concept ([[ui-design#concept]]): the idea, the grid, the pairing, the signature.
- Closer to your references is necessary, not sufficient. The measure cannot read type or copy, so open the sheet and check each tell the nearest agent-made pages carry against your own page.
- No references means there is nothing to be closer to. Render two or three with
osy design look <url>first.
The sheet needs a browser, found the way osy test --pixels finds one.
See also#
- Designing an app that looks designed — direction, type, colour, composition and motion — the method: the concept before code, the critique after it
- Checking whether a theme is a stock look —
osy design check, the concept and the theme - Looking at a reference site before you design —
osy design look