ux-skill: Design-Engine für Claude Code und KI-Tools

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

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

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

In Zahlen

Version	4.0.0, Foundations, 2 November 2026
Unterstützte KI‑Coding‑Tools	17
Design‑Grundlagen	9
Anti‑Pattern‑Lint‑Regeln	171
Echte Marken‑Specs	160
MCP‑Tools	25
Slash‑Commands	18
Komponenten‑ und Sektionen‑Verträge	23 und 14
README‑Sprachen	17
GitHub‑Stars, 9 November 2026	95
Lizenz	MIT, kostenlos

Status

Live und gepflegt. Installieren Sie es mit pip install uxskill, lesen Sie den Code auf GitHub und sehen Sie es unter 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.