Investigación

ux-skill

Motor de diseño para herramientas de programación con IA. Un color de marca genera un sistema validado con WCAG. Sin conexión, sin LLM, MIT.

En un párrafo

ux-skill es un motor de inteligencia de diseño de código abierto que se integra con Claude Code y otras 16 herramientas de programación con IA para que las interfaces que generan dejen de parecer hechas por IA. La versión 4.0, Foundations, construye un sistema de diseño completo a partir de un solo color de marca y un brief, comprueba cada combinación de color frente a WCAG y solo escribe lo que pasa la validación, con árabe y escritura de derecha a izquierda integrados desde el inicio. Funciona sin conexión, nunca llama a un LLM y es gratuito bajo MIT. Creado y mantenido por Laith Aljunaidy en Amán.

v4.0.0 Foundations, disponible, MIT

Por qué lo construí

Las herramientas de programación con IA pueden crear un producto entero en una tarde, y casi todas acaban pareciéndose entre sí. El mismo degradado morado, las mismas tres tarjetas, el mismo hero estándar, la misma tipografía. Se detecta una página hecha con IA desde el otro lado de la sala.

Me dedico al diseño y trabajo a diario con estas herramientas. Quería que diseñaran como lo haría una persona de diseño: partir de la marca y del brief, rechazar los patrones que parecen generados por máquina y comprobar el trabajo antes de publicarlo. Y quería que el árabe y la escritura de derecha a izquierda formaran parte del sistema desde el primer token, no como un arreglo al final, porque ahí es donde fallan la mayoría de las herramientas con las que diseño para otras personas.

Por eso ux-skill no pega una plantilla. Compila un lenguaje de diseño para el brief que tiene delante, a partir de especificaciones reales de marca tratadas como datos de entrenamiento, y de un linter que rechaza lo mediocre.

Una landing page creada con ux-skill, una foto real de una obra bajo un velo oscuro, un titular editorial y un formulario de presupuesto en el hero

La misma herramienta de programación con IA, el mismo prompt. Con ux-skill aportando las restricciones, la página deja de parecer genérica.

Qué cambia en la versión 4.0

La versión 4.0, Foundations, se publicó el 2 de noviembre de 2026. Un color de marca y un brief como entrada, un sistema de diseño completo como salida.

El sitio de ux-skill, un color de marca como entrada, un sistema de diseño como salida

  • Nueve fundamentos. Color, tipografía, espacio, layout, radio, borde, elevación, movimiento e imagen, desde primitivas hasta roles semánticos, escritos como tokens de diseño W3C y CSS.
  • Cinco modos en cada rol. Claro y oscuro, contraste estándar y alto, cómodo y compacto, izquierda a derecha y derecha a izquierda, movimiento completo y reducido. Un atributo en la página cambia cada uno.
  • La validación WCAG. Cada combinación de texto, control y foco se mide en modo claro y oscuro, con contraste estándar y alto. Si un sistema falla, no se escribe, y el mensaje indica qué hay que cambiar.
  • El árabe integrado. Con derecha a izquierda, el texto cambia a una fuente árabe con su propia escala y altura de línea, el espaciado pasa a ser lógico y el movimiento se refleja.
  • Lee el sistema que ya tienes. Importadores para tokens de diseño, CSS, Tailwind, reglas de Markdown y variables de Figma. Indica lo que falta y lo añade junto a tus archivos sin reescribir un solo token.
  • Componentes y secciones con contratos. 23 contratos de componentes y 14 contratos de secciones indican a qué tokens se vincula cada parte en cada estado y cómo funciona cada sección en un móvil.
  • Un linter que ejecuta la página. Abre la página en un navegador real, en escritorio y en móvil, y comprueba lo que percibiría una persona: contornos de foco que no aparecen, hover que responde tarde, movimiento que ignora el movimiento reducido.

Cómo funciona

Un núcleo de razonamiento en Python con un sintetizador determinista de siete ejes: calidez, contraste, densidad, geometría, formalidad, movimiento y personalidad tipográfica. Le alimentan doce manifiestos estructurados, entre ellos estilos, paletas, combinaciones tipográficas, componentes, sectores, gráficos, preajustes de movimiento, leyes UX, reglas antipatrón, stacks tecnológicos y 160 especificaciones reales de marca. Mismas entradas, mismo resultado, siempre.

Se integra en Claude Code, Cursor, Windsurf, GitHub Copilot, Gemini CLI, Codex y otras once herramientas, como comandos slash, subagentes y un servidor MCP. Funciona completamente sin conexión, nunca llama a un LLM y no recoge nada.

ux-skill en GitHub

En cifras

Versión4.0.0, Foundations, 2 de noviembre de 2026
Herramientas de programación con IA compatibles17
Fundamentos de diseño9
Reglas de análisis de antipatrones171
Especificaciones reales de marca160
Herramientas MCP25
Comandos de barra18
Contratos de componentes y secciones23 y 14
Idiomas del README17
Estrellas en GitHub, 9 de noviembre de 202695
LicenciaMIT, gratuita

Estado

En directo y con mantenimiento. Se instala con pip install uxskill, el código está en GitHub y se puede ver en uxskill.laithjunaidy.com. Este sitio web se construyó con él.

Preguntas frecuentes

¿Qué es ux-skill?

ux-skill es un motor de inteligencia de diseño gratuito y de código abierto para herramientas de programación con IA como Claude Code, Cursor y Windsurf. Construye sistemas de diseño a partir de un color de marca y un brief, y analiza páginas creadas con IA para detectar los patrones que las hacen parecer genéricas.

¿Qué hay de nuevo en ux-skill 4.0?

La versión 4.0, Foundations, construye un sistema de diseño completo a partir de un solo color de marca: nueve fundamentos, cinco modos en cada rol, una validación de contraste WCAG, árabe y escritura de derecha a izquierda integrados, importadores para sistemas existentes y contratos de componentes y secciones.

¿ux-skill llama a un modelo de IA?

No. Funciona completamente sin conexión con un motor determinista y datos estructurados, nunca llama a un LLM y no recoge telemetría. Las mismas entradas siempre dan la misma salida.

Abrir el proyecto

Más investigación

Toda la investigación
  1. Dot

    Dot es una plataforma de fidelización y recompensas para comercios de Oriente Medio, disponible en thedotwallet.com. El cliente se identifica solo por teléfono, nunca por correo electrónico, y sus puntos y recompensas lo acompañan por todos los comercios de la red. Los puntos se gestionan mediante un registro de eventos, con tokens de canje firmados de un solo uso y controles de fraude en cada flujo. Diseñada primero en árabe, con una aplicación de caja, un complemento de Odoo POS y una integración con Shopify. Fundada y operada por Laith Aljunaidy.

    En funcionamiento Abrir