Skip to content

Oxfords v2

Choose a tag to compare

@arhamhi arhamhi released this 31 Oct 16:56
· 2 commits to main since this release

The big one this time was colour. v1 told the AI how to pick colours and it still picked them by hand, and you could tell. So now it doesn't pick them at all. A script makes them.

What's new

  • Colours come from a script. palette.mjs has 26 palettes, or you give it your client's brand colour and it builds the rest around it. Text colours, button states, chart colours and the dark mode values all come out already checked for contrast, so nothing gets hand-written.
  • Dark mode gets its own values. Fills keep their hue, layers get lighter as they rise and the colour calms down a bit, instead of everything just getting inverted.
  • It looks at the page now. shoot.mjs opens what it built in a real browser at phone and desktop size, light and dark, and measures text contrast (even over images and gradients), tap targets, keyboard focus, clipped or overlapping text and how much of the screen is colour. If you don't have Playwright it tells you it couldn't check.
  • Redesign mode. You write down what has to stay, and keep.mjs checks the new screen didn't lose a link, a nav label, a form field or a number people rely on. Your brand colour stays, the cream background and the tinted sidebar go.
  • Delete is always red. Delete, revoke and cancel plan use the danger colour even when your brand is red, so a delete never looks like the main button.
  • A proper review. It looks at the screenshots first and runs the checkers after, so the tools don't steer what it sees. Every finding gets a P0 to P3 and there's a point where it stops polishing.
  • The checker got stricter. check.mjs now catches cream and bone pages, hand-written colours, see-through text and delete buttons in the brand colour, and it throws a lot fewer false alarms.
  • A bunch of smaller rules. Tabular numbers in tables, labels that get shortened before they get cut off, dialog buttons that stay on one row, FAQ answers that stay open, counts like "Late 1" that work as filters, and one bar in a chart marked without dragging in a new colour.

Did it actually get better?

I tested it blind. Four briefs, the same model built each one twice, once with v1 and once with v2, then a judge on a different model picked one without knowing which was which.

v2 won three out of four and the checker warnings went from 49 to 0. v1 won the landing page, mostly because of a muddy brown that came from a bug in the colour engine, and that's fixed now. Everything the judges picked on, on both sides, is a rule now, and I haven't re-run those yet. Every brief and build is in docs/test-run and the numbers are in the README.

Upgrading

Same install as before. If you copied the folder, copy skills/oxfords again. references/palettes.md is gone, references/colour.md replaces it. Playwright is optional, shoot.mjs just uses it if it's there.

Thanks to Kole Jain and Sajid, whose colour videos started this round.