# ux-skill

Ein Design‑Intelligenz‑Engine für KI‑Coding‑Tools. Eine Markenfarbe rein, ein WCAG‑geprüftes Designsystem raus. Offline, kein LLM, MIT.

https://laithjunaidy.com/de/research/ux-skill
Von Laith Aljunaidy. Veröffentlicht: 2026-06-04. Aktualisiert: 2026-11-09.

- Status: v4.0.0 Foundations, live, MIT
- Projekt öffnen: https://uxskill.laithjunaidy.com

ux-skill ist eine Open‑Source‑Design‑Intelligenz‑Engine, die sich in Claude Code und 16 weitere KI‑Coding‑Tools integrieren lässt, sodass die von ihnen erstellten Oberflächen nicht mehr wie von KI generiert wirken. Version 4.0, Foundations, erzeugt ein komplettes Designsystem aus einer Markenfarbe und einem Brief, prüft jede Farbkombination nach WCAG und gibt nur das aus, was den Richtlinien entspricht – inklusive Arabisch und Rechts‑nach‑Links‑Unterstützung. Die Engine arbeitet offline, ruft niemals ein LLM auf und ist unter MIT‑Lizenz kostenlos. Entwickelt und gepflegt von Laith Aljunaidy in Amman.

---

## Warum ich es gebaut habe

KI‑Coding‑Tools können an einem Nachmittag ein komplettes Produkt erstellen, und jedes Ergebnis sieht gleich aus. Der gleiche lila Farbverlauf, die gleichen drei Karten, das gleiche Stock‑Hero‑Bild, die gleiche Typografie. Man erkennt eine KI‑erstellte Seite schon aus der Ferne.

Ich arbeite als Designer und nutze diese Tools täglich. Ich wollte, dass sie so entwerfen, wie ein Designer es tun würde: vom Brand und Brief ausgehen, Muster ablehnen, die maschinell wirken, und die Arbeit prüfen, bevor sie veröffentlicht wird. Und ich wollte Arabisch und Rechts‑nach‑Links von Anfang an im System verankert haben, nicht als nachträglichen Fix, weil genau dort die meisten Tools für die von mir betreuten Nutzer*innen versagen.

Deshalb fügt ux-skill keine Vorlage ein. Es erstellt eine Designsprache für den vorliegenden Brief, basierend auf echten Marken‑Specs als Trainingsdaten, und nutzt einen Linter, der minderwertige Ergebnisse ablehnt.

![Eine mit ux-skill erstellte Landing‑Page: ein echtes Baustellenfoto unter einem dunklen Schleier, eine redaktionelle Überschrift und ein Angebotsformular im Hero](https://laithjunaidy.com/research/ux-skill/before-after.jpg)

*Gleiches KI‑Coding‑Tool, gleicher Prompt. Mit den von ux-skill vorgegebenen Einschränkungen wirkt die Seite nicht mehr generisch.*

## Was ist neu in 4.0

Version 4.0, Foundations, veröffentlicht am 2. November 2026. Eine Markenfarbe und ein Brief rein, ein komplettes Designsystem raus.

![Die ux-skill‑Website: eine Markenfarbe rein, ein Designsystem raus](https://laithjunaidy.com/research/ux-skill/cover.jpg)

- **Neun Grundlagen.** Farbe, Typografie, Abstand, Layout, Radius, Rahmen, Elevation, Motion und Bildmaterial, jeweils von Primitiven zu semantischen Rollen, definiert als W3C‑Design‑Tokens und CSS.
- **Fünf Modi pro Rolle.** Hell und dunkel, Standard und hoher Kontrast, komfortabel und kompakt, links‑nach‑rechts und rechts‑nach‑links, volle und reduzierte Animation. Ein Attribut auf der Seite schaltet jeweils um.
- **Die WCAG‑Gate.** Jeder Text‑, Steuer‑ und Fokus‑Kombination wird in Hell‑ und Dunkel‑Modus sowie bei Standard‑ und hohem Kontrast gemessen. Ein System, das die Richtlinien nicht erfüllt, wird nicht ausgegeben, und die Meldung erklärt die nötige Änderung.
- **Arabisch integriert.** Im Rechts‑nach‑Links‑Modus wechselt die Schrift zu einer arabischen Schriftart mit eigener Skalierung und Zeilenhöhe, Abstände werden logisch, Animationen spiegeln sich.
- **Liest das bereits vorhandene System.** Import‑Tools für Design‑Tokens, CSS, Tailwind, Markdown‑Regeln und Figma‑Variablen. Es meldet fehlende Elemente und fügt sie neben Ihren Dateien hinzu, ohne Tokens neu zu schreiben.
- **Komponenten und Sektionen mit Verträgen.** 23 Komponenten‑Verträge und 14 Sektionen‑Verträge definieren, welche Tokens jeder Teil in jedem Zustand bindet und wie jede Sektion auf einem Telefon funktioniert.
- **Ein Linter, der die Seite prüft.** Er öffnet die Seite in einem echten Browser in Desktop‑ und Telefon‑Breite und prüft, was eine Person bemerken würde: Fokus‑Ringe, die nicht sichtbar sind, Hover‑Effekte, die zu spät reagieren, Animationen, die reduzierte Bewegung ignorieren.

## Wie es funktioniert

Ein Python‑Reasoning‑Core mit einem deterministischen Sieben‑Achsen‑Synthesizer: Wärme, Kontrast, Dichte, Geometrie, Formalität, Motion und Typ‑Persönlichkeit. Zwölf strukturierte Manifeste speisen ihn, darunter Styles, Paletten, Typ‑Kombinationen, Komponenten, Branchen, Diagramme, Motion‑Presets, UX‑Gesetze, Anti‑Pattern‑Regeln, Tech‑Stacks und 160 echte Marken‑Specs. Gleiche Eingaben, gleiche Ausgabe, jedes Mal.

Er wird in Claude Code, Cursor, Windsurf, GitHub Copilot, Gemini CLI, Codex und elf weitere Tools eingebunden, als Slash‑Commands, Sub‑Agents und MCP‑Server. Er arbeitet vollständig offline, ruft niemals ein LLM auf und sammelt nichts.

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

## In Zahlen

<table>
<tbody>
<tr><th scope="row">Version</th><td>4.0.0, Foundations, 2 November 2026</td></tr>
<tr><th scope="row">Unterstützte KI‑Coding‑Tools</th><td>17</td></tr>
<tr><th scope="row">Design‑Grundlagen</th><td>9</td></tr>
<tr><th scope="row">Anti‑Pattern‑Lint‑Regeln</th><td>171</td></tr>
<tr><th scope="row">Echte Marken‑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">Komponenten‑ und Sektionen‑Verträge</th><td>23 und 14</td></tr>
<tr><th scope="row">README‑Sprachen</th><td>17</td></tr>
<tr><th scope="row">GitHub‑Stars, 9 November 2026</th><td>95</td></tr>
<tr><th scope="row">Lizenz</th><td>MIT, kostenlos</td></tr>
</tbody>
</table>

## Status

Live und gepflegt. Installieren Sie es mit `pip install uxskill`, lesen Sie den Code auf [GitHub](https://github.com/Laith0003/ux-skill) und sehen Sie es unter [uxskill.laithjunaidy.com](https://uxskill.laithjunaidy.com). Diese Website wurde damit erstellt.

## Häufige Fragen

### Was ist ux-skill?

ux-skill ist eine kostenlose, Open‑Source‑Design‑Intelligenz‑Engine für KI‑Coding‑Tools wie Claude Code, Cursor und Windsurf. Sie erzeugt Designsysteme aus einer Markenfarbe und einem Brief und prüft KI‑erstellte Seiten auf Muster, die sie generisch wirken lassen.

### Was ist neu in ux-skill 4.0?

Version 4.0, Foundations, erstellt ein komplettes Designsystem aus einer Markenfarbe: neun Grundlagen, fünf Modi pro Rolle, ein WCAG‑Kontrast‑Gate, integriertes Arabisch und Rechts‑nach‑Links, Import‑Tools für bestehende Systeme sowie Komponenten‑ und Sektionen‑Verträge.

### Ruft ux-skill ein KI‑Modell auf?

Nein. Es arbeitet vollständig offline mit einer deterministischen Engine und strukturierten Daten, ruft niemals ein LLM auf und sammelt keine Telemetrie. Gleiche Eingaben ergeben stets dieselbe Ausgabe.