Your AI builds UIs that look like someone actually finished them.
A UI/UX skill for Claude Code, Codex and Cursor. Polished, plain, no AI slop.
Oxfords, not brogues. An Oxford is the plain shoe, and a brogue is the same shoe with a bunch of decoration punched into it.
So this skill won't make your site look insane, and it won't give you crazy animations. There are good skills for that already. What I wanted was the boring part done properly: a screen that's clear, that's finished, and that doesn't have the stuff on it that tells everyone an AI made it.
Same one-paragraph brief. First with no skill, then with Oxfords.
The half that gets skipped. AI builds the happy path and then stops. Oxfords makes it keep going, so you get the button states, the feedback when you click something, the empty screen, the error screen, what happens with a really long name or 10,000 rows, keyboard focus, and tap targets that work on a phone.
A screen you can actually scan. Nobody reads a UI. You land on it with one question and you hunt for the answer. So Oxfords lines things up on edges, lets the data decide what component to use, and makes one thing on the screen important instead of all of it.
No AI slop. I kept seeing the same tells in everything AI builds, even with good design skills loaded, so there's a strict list of them and what to use instead:
| Out | In |
|---|---|
| A coloured bar down the side of the active nav item | A full-row fill |
| A card around everything, cards inside cards | Space, alignment, one hairline |
| A small uppercase label above every heading | The heading |
| Inter, Geist, Poppins, Instrument Serif, Playfair | The system font, or a face you can give a reason for |
| Emoji as icons, the stock icon set at default stroke | One icon set, one weight, matched to the text |
| Bone and orange, white and blue, purple gradients | A palette chosen for the product, with a reason |
| Gradient text, glows | One accent, used for action and state |
| A tinted pill on every status | Colour only where something needs attention |
| Bounce, fade-up on everything, pulsing dots | Short ease-out transitions that explain a change |
| "Seamless", "Get started", Acme, 99.9% | The plain sentence and believable data |
Colours somebody actually picked. You've probably noticed Claude goes for the same bone background with an orange accent on pretty much everything now. Before that it was purple gradients, and if you tell it to be "clean" you get white, grey and one blue button. They're all the same problem, the colour got picked by default. So Oxfords comes with 26 palettes, three colours each, and the agent has to choose one for your product and say why. The palette goes on top of proper neutrals though, white, black and greys still do most of the work, so you don't end up with a page that's cream from edge to edge. On a phone it sits on pure black or pure white, with the navigation in Liquid Glass.
A checker, so it's not just vibes. One script, no dependencies:
node skills/oxfords/scripts/check.mjs ./srcsrc/components/Sidebar.tsx
FAIL accent-rail coloured bar on the side of an element; use a full fill or nothing (line 42)
border-left: 3px solid
FAIL default-font default font nobody chose; use the system stack or a face with a stated reason (line 7)
WARN viewport-100vh 100vh jumps on phones; use dvh or svh (line 18)
1 file, 2 fail, 1 warn
It exits with an error when something fails, so you can put it in CI or a pre-commit hook.
Claude Code, Codex and other agents that read skills
npx skills add arhamhi/oxfordsOr copy skills/oxfords into your skills folder (~/.claude/skills/ for Claude Code,
~/.agents/skills/ for Codex and others).
Cursor
Copy skills/oxfords into your project and adapters/cursor/oxfords.mdc into
.cursor/rules/.
Anything that reads AGENTS.md
Copy skills/oxfords into your project and paste adapters/AGENTS.md into your AGENTS.md.
You don't have to do anything special. Ask for UI work the way you already do and the skill loads when the task is a UI.
Build the orders dashboard.
Review this settings page with oxfords.
This looks AI-generated. Fix it.
It works in three modes:
| Mode | What happens |
|---|---|
| Build | Works an eight-step build order from intent to finished states, then fills a done gate |
| Review | Looks first, runs the checker second, reports each finding as symptom, fix and reason |
| Fix | Changes only what a finding names and leaves your copy and identity alone |
skills/oxfords/
SKILL.md build order, done gate, slop floor, numbers
references/
app-ui.md dashboards, tables, charts, settings
mobile.md app screens, navigation, sheets, gestures
landing.md message, structure, what to leave out
states-forms-copy.md every state, forms, errors, copy, accessibility
palettes.md neutrals, 26 palettes and how to apply them
slop-floor.md the full ban list with replacements
motion.md timing, easing, gestures, reduced motion
review.md the two-pass review and severity scale
scripts/check.mjs the slop checker
The main file is short on purpose. Your agent reads it every time, and only opens a reference file for the thing it's actually building.
- It won't replace your brand. If your project already has colours or a design system, those win. The palettes are for when you've got nothing.
- It won't give you a look. If you want a landing page with a signature animation, use a design skill built for that and let Oxfords check the result after.
- It can't see everything. The checker reads text, so it can't tell if a label is clipped or if you've got a card inside a card. Those are on a short list you check by eye.
One thing I had to be careful with: plain doesn't mean empty. If you strip all the slop out and add nothing, you get a grey page with one accent colour, and that's just a different kind of generic. So Oxfords asks for real content, one clear thing to look at first, and choices you can give a reason for.
Same deal as the dashboard up top. Same brief, first with no skill and then with Oxfords.
A startup landing page
The one without the skill looks fine at first, I'll be honest. But it's the bone background again, with a little uppercase label over every section, numbered steps and an italic word in the headline. You've seen that page a hundred times. The Oxfords one sits on white, shows the actual product, and keeps the colour for one section, one button and the number you owe.
A calorie tracking app
Pure black, so it looks right on an OLED screen. The add button comes out of the middle of the tab bar, the tab bar is glass with the list scrolling under it, and only the things that matter get colour.
Each example got the same one-paragraph brief twice, once with no skill and once with
Oxfords. All six builds are in docs/builds and you can run the checker on
them yourself:
dashboard-no-skill.html 1 fail, 3 warn
landing-no-skill.html 1 fail, 3 warn
mobile-no-skill.html 2 fail, 3 warn
the three Oxfords builds 0 fail, 0 warn
To be straight about it, this isn't a fair fight and I'm not going to pretend it is. The no-skill builds are first attempts from Claude Sonnet. The Oxfords ones went through a few rounds while I was fixing the skill, mostly the colour rules, and the final dashboard and landing page were built by a stronger model with some colours ruled out so the three examples wouldn't look alike. So take them as what the skill is going for and not a benchmark. And the checker only catches the mechanical stuff. Most of what's different in those GIFs is the part it can't see.
I didn't come up with most of this. The usability side I learned from Kole Jain's videos, and you should watch them. I also studied impeccable by Paul Bakaus, taste-skill by Leonxlnx, and apple-design by Emil Kowalski, and took ideas from each. Everything here is written in my own words, and what came from where is in CREDITS.md.
The paintings in this repo were made in code, stroke by stroke. They're all in art.
MIT. See LICENSE.