# ux-skill

A design intelligence engine for AI coding tools. One brand colour in, a WCAG-checked design system out. Offline, no LLM, MIT.

https://laithjunaidy.com/research/ux-skill
By Laith Aljunaidy. Published: 2026-06-04. Updated: 2026-11-09.

- Status: v4.0.0 Foundations, live, MIT
- Open the project: https://uxskill.laithjunaidy.com

ux-skill is an open-source design intelligence engine that plugs into Claude Code and 16 other AI coding tools so the interfaces they build stop reading as AI-made. Version 4.0, Foundations, builds a full design system from one brand colour and a brief, checks every colour pairing against WCAG, and writes only what passes, with Arabic and right to left built in. It runs offline, never calls an LLM, and is free under MIT. Built and maintained by Laith Aljunaidy in Amman.

---

## Why I built it

AI coding tools can build a whole product in an afternoon, and every one of them comes out looking the same. The same purple gradient, the same three cards, the same stock hero, the same type. You can spot an AI-built page from across the room.

I design for a living, and I build with these tools every day. I wanted them to design the way a designer would: start from the brand and the brief, refuse the patterns that read as machine-made, and check the work before it ships. And I wanted Arabic and right to left to be part of the system from the first token, not a fix at the end, because that is where most tools fail the people I design for.

So ux-skill does not paste a template. It compiles a design language for the brief in front of it, from real brand specs treated as training data, and a linter that rejects the slop.

![A landing page built with ux-skill: a real construction photo under a dark scrim, an editorial headline and a quote form in the hero](https://laithjunaidy.com/research/ux-skill/before-after.jpg)

*Same AI coding tool, same prompt. With ux-skill supplying the constraints, the page stops looking generic.*

## What is new in 4.0

Version 4.0, Foundations, shipped on 2 November 2026. One brand colour and a brief in, a complete design system out.

![The ux-skill site: one brand color in, a design system out](https://laithjunaidy.com/research/ux-skill/cover.jpg)

- **Nine foundations.** Colour, type, space, layout, radius, border, elevation, motion and imagery, each from primitives to semantic roles, written as W3C design tokens and CSS.
- **Five modes in every role.** Light and dark, standard and high contrast, comfortable and compact, left to right and right to left, full and reduced motion. One attribute on the page switches each one.
- **The WCAG gate.** Every text, control and focus pairing is measured in light and dark, at standard and high contrast. A system that fails is not written, and the message says what to change.
- **Arabic built in.** Under right to left the text switches to an Arabic face with its own scale and line height, spacing turns logical and motion mirrors.
- **It reads the system you already have.** Importers for design tokens, CSS, Tailwind, Markdown rules and Figma variables. It reports what is missing and adds it beside your files without rewriting a token.
- **Components and sections with contracts.** 23 component contracts and 14 section contracts say which tokens each part binds in every state, and how each section works on a phone.
- **A linter that runs the page.** It opens the page in a real browser at desktop and phone width and checks what a person would notice: focus rings that do not show, hover that answers late, motion that ignores reduced motion.

## How it works

A Python reasoning core with a deterministic seven-axis synthesizer: warmth, contrast, density, geometry, formality, motion and type personality. Twelve structured manifests feed it, among them styles, palettes, type pairings, components, industries, charts, motion presets, UX laws, anti-pattern rules, tech stacks and 160 real brand specs. Same inputs, same output, every time.

It ships into Claude Code, Cursor, Windsurf, GitHub Copilot, Gemini CLI, Codex and eleven more tools, as slash commands, sub-agents and an MCP server. It runs fully offline, never calls an LLM, and collects nothing.

![ux-skill on GitHub](https://laithjunaidy.com/research/ux-skill/github.jpg)

## In numbers

<table>
<tbody>
<tr><th scope="row">Version</th><td>4.0.0, Foundations, 2 November 2026</td></tr>
<tr><th scope="row">AI coding tools supported</th><td>17</td></tr>
<tr><th scope="row">Design foundations</th><td>9</td></tr>
<tr><th scope="row">Anti-pattern lint rules</th><td>171</td></tr>
<tr><th scope="row">Real brand specs</th><td>160</td></tr>
<tr><th scope="row">MCP tools</th><td>25</td></tr>
<tr><th scope="row">Slash commands</th><td>18</td></tr>
<tr><th scope="row">Component and section contracts</th><td>23 and 14</td></tr>
<tr><th scope="row">README languages</th><td>17</td></tr>
<tr><th scope="row">GitHub stars, 9 November 2026</th><td>95</td></tr>
<tr><th scope="row">Licence</th><td>MIT, free</td></tr>
</tbody>
</table>

## Status

Live and maintained. Install it with `pip install uxskill`, read the code on [GitHub](https://github.com/Laith0003/ux-skill), and see it at [uxskill.laithjunaidy.com](https://uxskill.laithjunaidy.com). This website was built with it.

## FAQ

### What is ux-skill?

ux-skill is a free, open-source design intelligence engine for AI coding tools such as Claude Code, Cursor and Windsurf. It builds design systems from a brand colour and a brief, and lints AI-built pages for the patterns that make them look generic.

### What is new in ux-skill 4.0?

Version 4.0, Foundations, builds a complete design system from one brand colour: nine foundations, five modes in every role, a WCAG contrast gate, Arabic and right to left built in, importers for existing systems, and component and section contracts.

### Does ux-skill call an AI model?

No. It runs fully offline with a deterministic engine and structured data, never calls an LLM and collects no telemetry. The same inputs always give the same output.
