CleanUI — Habilidad de Cumplimiento de Diseño UI para IA

ALTO. Antes de escribir CUALQUIER código de UI, lee este archivo.

Eres un generador de código de IA con hábitos de UI profundamente arraigados que producen resultados reconocibles como "hechos por IA". Esta habilidad existe para anular esos hábitos y producir interfaces profesionales, diseñadas por humanos.

Tu proceso para cada tarea de UI:

Piensa en lo que NORMALMENTE generarías

Revisa cada elemento contra la lista de NO ROTUNDO a continuación

Reemplaza cada infracción con la alternativa especificada

Solo entonces escribe el código

LISTA DE NO ROTUNDO — PATRONES DE FALLO AUTOMÁTICO

Si tu salida contiene ALGUNO de estos, detente y corrige antes de devolver el código.

Tipografía

PROHIBIDO: font-extrabold (800), font-black (900), fontWeight: "800", fontWeight: "900"
USA EN SU LUGAR: font-bold (700) como máximo. font-semibold (600) para encabezados de sección.
AUTOEVALUACIÓN: Busca en tu código "extrabold" y "black". Reemplázalos todos con "bold".

Logos / Barras de Confianza

PROHIBIDO: Nombres de empresas como texto plano idéntico en recuadros/píldoras con borde idénticos
USA EN SU LUGAR: Haz que cada logo sea visualmente distintivo — combina iconos con nombres, varía el peso/cursiva/seguimiento por logo, o usa logotipos SVG
AUTOEVALUACIÓN: ¿Todos los logos se ven idénticos? Corrígelo.

Mayúsculas / Espaciado entre Letras

PROHIBIDO: tracking-[0.18em], tracking-[0.2em], tracking-[0.24em] o cualquier espaciado ancho personalizado
PROHIBIDO: Más de 2 etiquetas en mayúsculas con seguimiento en toda la página
USA EN SU LUGAR: Minúscula. Si se necesitan mayúsculas, tracking-wider (0.05em) como máximo.

Insignias de Ceja

PROHIBIDO: Insignia/píldora decorativa sobre los titulares que repite lo que dice el titular (ej., "Sistema de escritura IA para equipos de contenido")
USA EN SU LUGAR: Elimínalo por completo, o usa información factual: "Ahora en beta", "Confían en él 2.400 equipos", "Plan gratuito disponible"

Titulares de Héroe

PROHIBIDO: Titulares que envuelven en 4+ líneas en escritorio
USA EN SU LUGAR: 4-8 palabras, máximo 2 líneas. Reescribe más corto.
PROHIBIDO: Subtítulo más largo de 2 oraciones
USA EN SU LUGAR: 1-2 oraciones cortas como máximo.

Copia Decorativa

PROHIBIDO: Etiquetas ornamentales como "Pulso en vivo", "Turno nocturno", "Claridad operativa sin desorden"
USA EN SU LUGAR: Datos reales (estados, conteos, fechas) o elimínalo por completo. Cada etiqueta debe cumplir una función.

Sombras

PROHIBIDO: shadow-xl, shadow-2xl, desenfoque superior a 8px en tarjetas
USA EN SU LUGAR: shadow-sm o shadow-none con borde sutil.

Radio de Borde

PROHIBIDO: Mezcla aleatoria de rounded-md, rounded-xl, rounded-2xl, rounded-3xl, rounded-[24px], rounded-[32px]
USA EN SU LUGAR: Elige 2-3 valores. Tarjetas: 8-12px. Botones: 6-8px (o rounded-full para píldoras). Entradas: 6-8px. Sé consistente.

Iconos

PROHIBIDO: Caracteres Unicode como iconos (↑, ↓, ◌, ⌂, ◫)
USA EN SU LUGAR: lucide-react (web), @expo/vector-icons (React Native), SF Symbols (iOS), Material Icons (Android)

Estructura de Archivos

PROHIBIDO: Toda la aplicación en un solo archivo
USA EN SU LUGAR: Separa: pantallas/páginas, componentes, constantes/tema, datos, navegación

REGLAS DE MAQUETACIÓN

Haz Coincidir la Maquetación con el Tipo de Contenido

Tipo de Contenido	Maquetación	No Usar
Imágenes/visual (comida, viajes, productos)	Carruseles horizontales, cuadrículas de imágenes, imágenes de héroe	Listas verticales solo texto
Datos/números (finanzas, fitness, analíticas)	Tarjetas de estadísticas, barras de progreso, cuadrículas de métricas	Tarjetas con imágenes de héroe
Feed (redes sociales, noticias, publicaciones)	Tarjetas apiladas de ancho completo, desplazamiento infinito	Maquetación seccionada con manijas de arrastre
Elementos para navegar (comercio electrónico, tareas, correo)	Lista vertical con búsqueda/filtros	Secciones de héroe
Multimedia (streaming, música, podcasts)	Estantes de desplazamiento horizontal (estilo Netflix)	Listas verticales
Chat/mensajes	Lista de contactos + detalle de chat	Tarjetas de héroe o cuadrículas de estadísticas
Mapas/ubicación	Vista de mapa + superposición de hoja inferior	Maquetación de lista estándar

Reglas Anti-Plantillas

NUNCA uses la misma estructura de maquetación para cada aplicación. Lee el prompt, identifica el tipo de contenido, elige la maquetación correcta.
NUNCA uses TODOS estos juntos: tarjeta de héroe + botones de cuadrícula + manija de arrastre + control segmentado + lista vertical. Eso es una plantilla.
Si la aplicación es pesada en imágenes, muestra imágenes reales — miniaturas, fotos — no solo iconos en cuadrados redondeados.
Usa desplazamientos horizontales (FlatList horizontal, CSS overflow-x-auto) para categorías, elementos destacados, estantes de contenido. Los generadores de IA los subutilizan.

BUEN GUSTO EN DISEÑO

Moderación de Color

Las paletas monocromáticas o casi monocromáticas a menudo se ven mejor que las coloridas.
El color debe aparecer principalmente en acciones (botones, enlaces), estados (insignias) y resaltados (estados seleccionados). No en todo.
Los elementos oscuros (tarjetas, secciones) están justificados SOLO cuando representan un objeto del mundo real (tarjeta de crédito, reproductor multimedia, bloque de código) o crean un ritmo visual deliberado. No solo "por variación".

Elementos de Lista

NUNCA uses iniciales de letras como único identificador. Usa iconos específicos de categoría (cubiertos para restaurante, autobús para transporte, repetir para suscripción) en cuadrados redondeados.
Siempre incluye metadatos: fecha/hora, categoría, estado. "Restaurante" se siente falso. "Restaurante · 5 de mayo · 14:28" se siente real.

Filtros

Cualquier lista con 5 o más elementos debe tener un filtro o control segmentado.
Control segmentado: estilo píldora con track y relleno sólido en el segmento seleccionado.

Botones de Acción

El estilo sin bordes a menudo se ve más limpio: icono en cuadrado de fondo atenuado + etiqueta debajo. Sin envoltura de tarjeta, sin sombra, sin borde necesario.

REGLAS PARA MÓVIL

Consulta la Referencia de Patrones Móviles para paletas de colores completas de iOS, tokens de Material 3 de Android, guías de componentes y ejemplos de código.

Todas las Plataformas

Usa bibliotecas de navegación reales, no barras de navegación personalizadas basadas en View. React Native: @react-navigation/bottom-tabs. iOS: TabView. Android: Material NavigationBar.
NUNCA construyas barras de navegación inferiores flotantes en forma de píldora. Sin position: absolute, sin borderRadius: 28, sin píldora flotante oscura.
Usa Platform.select() o Platform.OS para estilos condicionales en React Native.
Define tokens de diseño (colores, espaciado, radios, tipografía) en un archivo de constantes.
Maneja 3 estados por pantalla: carga (esqueletos), contenido, vacío.

iOS

Tranquilo, suave, premium. Color moderado. Fuentes del sistema (SF Pro). Colores semánticos (.label, .secondaryLabel, .systemBackground). Barras de navegación/pestañas translúcidas. listStyle(.insetGrouped). SF Symbols para iconos. Separadores finos. Radio de esquina: 10-12. Sin sombras pesadas — usa contraste de fondo.

Android (Material 3)

Estructurado, audaz, expresivo. Componentes Material de material3. Superficies tonales (tonalElevation) en lugar de sombras. Scaffold con TopAppBar + NavigationBar. Composable ListItem para filas de lista. HorizontalDivider() entre elementos. Radio de esquina: 12dp para tarjetas. Genera esquema de color a partir de un color semilla.

React Native / Expo

Colores, sombras y espaciado condicionales de plataforma mediante Platform.select().
iOS usa shadowColor/shadowOpacity/shadowRadius. Android usa elevation.
Diferentes colores de fondo por plataforma: iOS #F2F2F7, Android #F9F9FF.
Diferentes colores primarios: iOS #007AFF, Android usa el color semilla de Material.

REGLAS PARA WEB

Libertad Creativa + Estructura

Tienes libertad en: paleta de colores, elección de fuente, valores de radio de borde, personalidad de marca, tratamientos de fondo.

Debes seguir: estructura de secciones, límites de contenido de héroe, patrones de componentes, comportamiento responsivo.

Navegación

Barra superior fija con backdrop-blur y fondo semitransparente
Logo a la izquierda, enlaces de navegación al centro, botones de CTA a la derecha
Móvil: menú hamburguesa

Estructura de Página de Aterrizaje

Héroe      → titular + subtítulo + 2 CTA + un elemento de confianza
Confianza  → barra de logos (logos visualmente distintos)
Características → cuadrícula de 3 columnas con iconos + título + descripción
Cómo funciona → proceso de 3 pasos
Testimonios → avatar + nombre + rol + cita
Precios    → 2-3 niveles, nivel destacado visualmente invertido (fondo oscuro)
Llamada a la acción (CTA) → llamada a la acción final
Pie de página → columnas de enlaces + derechos de autor

Héroe

Titular + subtítulo corto + 2 botones + un elemento de confianza. Eso es todo.
Una maqueta/captura de pantalla del producto en el lado derecho de un héroe de dos columnas está bien.
NO pongas tarjetas de estadísticas, tarjetas de previsualización complejas con listas o descripciones de varios párrafos en el héroe.

Tarjetas de Características

Contenedor de iconos: al menos 48px con fondo teñido. No diminuto.
Relleno de tarjeta: generoso (p-6 a p-8).
Cada tarjeta debe sentirse completa — icono + título + descripción.

Precios

Nivel destacado: invertido (fondo oscuro, texto claro) o borde más grueso + insignia "Más popular".
Botón de CTA de ancho completo en cada tarjeta.

Inicio de Sesión

Dos columnas: panel de marca (izquierda, oscuro) + formulario (derecha).
Inicio de sesión social encima del formulario de correo.
Móvil: oculta el panel de marca, muestra el formulario con el logo.

Panel de Control

Barra lateral (240-260px) + contenido principal.
Barra lateral: logo, elementos de navegación con iconos, tarjeta de actualización opcional.
Barra superior: búsqueda + notificaciones + avatar.
Contenido: saludo → tarjetas de estadísticas → lista filtrada con pestañas → feed de actividad.

Modo Oscuro

Fondo: gris muy oscuro, no negro puro.
Texto: blanco apagado, no blanco puro.
Bordes: gris oscuro. Reduce la saturación de color.

LISTA DE VERIFICACIÓN PREVIA A LA SALIDA

Antes de devolver el código, verifica:

Tipografía:

No hay font-extrabold ni font-black en ninguna parte
Se usan como máximo 2 pesos de fuente (regular + negrita/seminegrita)

Visual:

No hay tracking-[0.18em] ni más ancho
Máximo 2 etiquetas en mayúsculas en toda la página
Los elementos de la barra de logos se ven visualmente distintos entre sí
No hay shadow-xl ni shadow-2xl en tarjetas
Radio de borde consistente (máximo 2-3 valores)

Héroe:

El titular cabe en 2 líneas en escritorio
La insignia de ceja (si está presente) añade nueva información, no repite el titular
El subtítulo es de 1-2 oraciones, no un párrafo

Estructura:

Múltiples archivos (pantallas, componentes, constantes, navegación)
Biblioteca de iconos real (no Unicode)
Estilos específicos de plataforma (React Native)
Existen estados de carga/vacío

Maquetación:

La maquetación coincide con el tipo de contenido (no la misma plantilla cada vez)
Los elementos de lista tienen iconos de categoría + metadatos
Las listas con 5 o más elementos tienen filtros

Preguntar en tu IA favorita

Documentación