uxskill
Star on GitHub
Language
English 简体中文 繁體中文 日本語 한국어 हिन्दी Bahasa Indonesia Tiếng Việt ไทย العربية Español Français Deutsch Português Русский Türkçe Italiano
Blog · Español · 2026-05-28

# 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:

Editor | Ruta | Comando
--- | --- | ---
Claude Code | Marketplace | `/plugin install ux@ux-skill`
Cursor | `.cursorrules` + MCP | `uxskill init --target cursor`
Windsurf | `.windsurfrules` + MCP | `uxskill init --target windsurf`
GitHub Copilot | `copilot-instructions.md` | `uxskill init --target copilot`
Cline / Continue | MCP server | `uxskill mcp-config --target cline`
JetBrains AI Assistant | `.junie/guidelines.md` | `uxskill init --target jetbrains`
Zed | MCP stdio | `uxskill init --target zed`
Codex CLI / Aider | CLI directo | `pip install uxskill`

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

Alcance honesto

#### Las reglas atrapan estructura. No atrapan gusto.

El linter nunca va a atrapar «esta sección tiene mal ritmo» o «esta copia se siente fría». Eso lo hace una persona o un modelo en revisión. Lo que la regex sí atrapa es cada huella con un token literal, un patrón o una forma, es decir, la mayor parte de los defectos de IA, porque el modelo recurre al mismo artefacto cada vez.

Deliberadamente no corremos un juez LLM en CI. Si tu vara es «parece hecho por un diseñador», eso es revisión de código, no lint. ux-skill provee `ux critique` para esa pasada, pero corre en el editor bajo demanda, no en CI.

## 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.

Instalar

## 17 IDEs. Un motor. 145 reglas.

El recomendador, el linter, el servidor MCP, los 22 comandos, las 160 especificaciones de marca y las 1.182 entradas de catálogo se distribuyen juntos. El linter corre en sub-segundo; el resto corre bajo demanda. MIT, sin telemetría, sin cuenta.

$ /plugin marketplace add Laith0003/ux-skill
$ /plugin install ux@ux-skill
· o ·
$ pip install uxskill
· o ·
$ npx uxskill@alpha init

## Related reads

- 35 huellas de diseño de IA
- Linter regex · 145 reglas
- Ranking anti-slop
- Plugin de diseño para Cursor