# Critiquing a page against the agent-made pages

> `osy design critique` puts each wide screenshot of your app beside the references you chose (`design/refs/`) and beside a gallery of typical agent-made pages that ships with the CLI, writes a contact sheet per page into `design/critique/`, and says which set the page's first screen sits closer to. A page closer to the agent-made pages than to its own references goes back to the concept.

<!-- id: local-critiquing-a-design · area: local · stability: preview · html: https://osysharp.com/reference/local/critiquing-a-design/ -->

## Summary        {#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      {#signature}

```console
osy design critique [--shot <png>]… [--refs <dir>] [--out <dir>] [--gallery] [--json]
```

## Description    {#description}

### What it compares    {#inputs}

| 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](https://osysharp.com/reference/local/looking-at-a-reference/)) | `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    {#output}

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:

```console
$ 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    {#reading}

- **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       {#see-also}
- [Designing an app that looks designed — direction, type, colour, composition and motion](https://osysharp.com/reference/ui/design/) — the method: the concept before code, the critique after it
- [Checking whether a theme is a stock look](https://osysharp.com/reference/local/checking-a-look/) — `osy design check`, the concept and the theme
- [Looking at a reference site before you design](https://osysharp.com/reference/local/looking-at-a-reference/) — `osy design look`