Reglas de diseño para coding con IA — por qué toda IA genera la misma UI.

Cualquier persona que haya pedido a Claude Code, Cursor, Windsurf, GitHub Copilot, Cline o Continue que construya una landing reconoce el resultado: tipografía Inter llevada a tamaños de display, un degradado de morado a azul, tres tarjetas idénticas en fila, y la copia «Build something amazing» bajo el héroe. El problema no es la herramienta. El problema es que todas las herramientas aprendieron del mismo conjunto de plantillas. ux-skill bloquea esos defectos en CI con 145 reglas regex deterministas.

By the ux-skill team · 8 min read · MIT-licensed open source

Los ocho defectos visuales que toda IA produce

Hemos catalogado el conjunto de huellas en la taxonomía de huellas de diseño de IA. Las ocho más visibles son las que aparecen en casi todas las generaciones de héroe.

1. Inter como tipografía de display — un tipo diseñado para legibilidad de pantalla a tamaños pequeños, llevado a 90px en el héroe.
2. Degradado morado a azul — la familia #7C3AED → #3B82F6, usada de fondo en la primera sección.
3. Tres tarjetas idénticas en fila — icono, título de una palabra, subtítulo de una frase, repetido tres veces.
4. Animación fade-in-up universal — aplicada a cada hijo directo de cada sección, sin diferenciación por rol.
5. Eje centrado de todo — héroe, tarjetas, formularios, todo en el centro de la pantalla.
6. Copia genérica — «Build something amazing», «Beautiful experiences», «Revolutionizing X», sin sustantivos del producto.
7. URLs de imágenes de stock — placeholders genéricos en lugar de capturas reales del producto.
8. Sombras gruesas sobre diseños planos — el reflejo de «destacar» combinado con la moda del flat.

Cada defecto aislado no es un error. Son las ocho juntas las que producen la huella reconocible. Una sola te hace encoger los hombros; cuatro en el mismo above-the-fold te dicen qué herramienta lo generó.

Por qué los prompts no son suficientes

La primera reacción de cualquier equipo es añadir instrucciones al prompt: «no uses el degradado por defecto», «pon una tipografía display de verdad», «no pongas tres tarjetas iguales». Funciona durante un mensaje. En el siguiente, la guía se diluye, la ventana de contexto crece, y la huella reaparece. La dirección por prompts es probabilística y decae con la longitud.

Lo que se necesita es un suelo determinista — un control que corre después de que el modelo escribió, sin LLM en el bucle. Ese es el hueco que llena ux-skill. El recomendador acota primero las opciones del modelo; el linter castiga al modelo cuando los defectos pasan de todos modos.

145 reglas regex, sin LLM, en CI

El linter escanea cualquier archivo bajo *.tsx, *.jsx, *.vue, *.svelte, *.astro, *.css, *.scss, *.html. Aplica 145 expresiones regulares con flags i y m. Devuelve JSON con la regla, la severidad, el archivo, la línea, la columna, un extracto y la corrección sugerida.

# Lint local, gate en high+critical por defecto
$ uxskill lint
[OK] Scanned 142 files in 412ms · 0 findings at threshold high

# Subdirectorio + JSON
$ uxskill lint apps/web/src --json | jq '.summary'
{
  "critical": 0,
  "high": 4,
  "medium": 11,
  "low": 3,
  "total": 18
}

Cero llamadas a LLM. El recorrido medio en un repositorio Next.js de 200 archivos es 380ms en frío, 90ms en caliente. La descripción completa de las reglas está en la guía del linter regex.

Antes y después, sobre un héroe real

Aquí va un bloque de héroe simplificado de un starter de Next.js, fallando en tres reglas, y la versión reescrita que sale con exit 0. Misma intención de conversión, huella distinta.

// Antes — 3 hallazgos high
<section className="bg-gradient-to-br
  from-purple-500 via-violet-500
  to-blue-500 py-32">
  <h1 className="font-['Inter']
    text-7xl leading-none">
    Build something amazing.
  </h1>
  <div className="grid grid-cols-3 gap-6">
    <Card icon="Zap" title="Fast" />
    <Card icon="Shield" title="Safe" />
    <Card icon="Heart" title="Loved" />
  </div>
</section>

// Después — 0 hallazgos
<section className="bg-stone-50 py-28">
  <h1 className="font-['Fraunces']
    text-6xl leading-[1.04]
    tracking-tight">
    La capa de enrutamiento de cargas
    que tu TMS nunca envió.
  </h1>
  <div className="grid grid-cols-12 gap-6 mt-16">
    <Card className="col-span-7"
      title="Consolidación de cargas" />
    <Card className="col-span-5"
      title="Ranking de transportistas" />
  </div>
</section>

Tres reglas disparan en el antes: Inter a text-7xl, el degradado canónico de IA, y la cuadrícula de tres tarjetas iguales. En el después se empareja Fraunces (display) con Inter (cuerpo), se usa una superficie plana, y se adopta una cuadrícula asimétrica 7-y-5. Misma intención, sin huella.

El recomendador eleva el suelo. El linter pone el techo. Ambos son necesarios.

Tres rutas de instalación, una sola intención

El mismo paquete Python alcanza los 17 IDEs de la matriz de compatibilidad. Elige la ruta más cercana a tu editor:

Bajo todos: 1.182 entradas de catálogo, 145 reglas, 160 especificaciones de marca, 22 comandos, 75 tests verdes en cada release.

Lecturas relacionadas

• Las 35 huellas de diseño que toda herramienta de IA envía por defecto.
• Linter regex para coding con IA — 145 reglas en CI.
• Herramientas anti-slop para Claude Code — el ranking honesto.
• Plugin de diseño para Cursor — guía de instalación.