Florious95/de-ai-ui

UI 设计去 AI 味（De-AI UI / Quitar el aspecto de IA a la UI）

Una interfaz hecha con 'vibe coding' se ve barata, y a menudo falla en los detalles. — @bruc3van

Este Skill condensa las observaciones de 8 diseñadores chinos, compartidas públicamente en X, sobre 'qué delata a una interfaz hecha con IA y cómo decírselo a la IA' en reglas ejecutables y comprobables. Cada regla lleva una marca [Autor] que indica su origen. Los resúmenes y enlaces completos están en references/sources.md. Las reglas marcadas como [Práctica general] son sentido común añadido para hilvanar las reglas y no representan la opinión de ninguna fuente en particular.

Cuándo usar / When to use

• Al crear o modificar cualquier interfaz con IA: páginas de aterrizaje, paneles de administración, tableros, páginas de configuración, bibliotecas de componentes, tokens de diseño.
• Cuando el usuario diga 'parece hecho con IA / barato / sin calidad / con olor a IA / slop', o pida 'algo más refinado, de mayor calidad'.
• En la revisión final antes de entregar la UI.

Principios centrales / Core principles

1. Priorizar restar sobre sumar. El fallo más común de la IA no es 'lo que falta', sino 'lo que sobra': textos explicativos redundantes, líneas divisorias, iconos, etiquetas, sombras, colores, animaciones. Pregúntate por cada elemento: '¿Realmente es necesario?'. [ZaynHao] [dingyi] [yanliudreamer]
2. La interfaz se retira, el contenido destaca. La interfaz en sí misma solo usa blanco, negro y grises. Reserva el color para fotos y contenido. [ianneo_ai]
3. La consistencia se logra con sistemas, no con el pulso del ojo. Usa conjuntos de tokens de color (Radix Colors), espaciado/redondeo en cuadrícula de 4px, limita las variantes de tamaño de fuente, reutiliza componentes y sistemas de diseño existentes. [ZaynHao] [Kubai087] [yanliudreamer]
4. Los detalles deben ser 'geométricamente correctos'. Radios anidados concéntricos, alineación óptica, grosor de bordes unificado. [Kubai087] [ZaynHao] [dingyi]
5. Primero define, luego actúa; primero la vista completa, luego módulo por módulo. Define primero para quién es, qué problema resuelve y qué sensación debe transmitir. Genera una versión completa, enumera los problemas, prioriza y corrige solo una cosa por iteración. [Xian0063]
6. Cada modo debe diseñarse por separado, no convertirse automáticamente. Apple añadió una capa separada para el modo 'Clear' del icono de Preview porque convertir directamente la imagen del modo por defecto 'se veía sucio'. Lo mismo aplica para los modos oscuro/nocturno/transparente. [remixdesigner] [ianneo_ai]

Reglas duras comprobables / Checkable rules

Esquinas redondeadas y bordes (ver detalle en references/radius-and-borders.md)

• Redondeo anidado: radio interno = radio externo − espaciado (r = R − p), compartiendo el mismo centro; se calcula de afuera hacia adentro: diálogo/tarjeta → panel, input, botón → chip, etiqueta. Ej: diálogo 32, padding 16 → interno 16; panel con radio 16 y padding 8 para un chip → radio del chip 8. [Kubai087]
• Todos los elementos en el mismo nivel jerárquico usan el mismo radio de esquina; el mínimo no debe ser menor de 4px; los píldora y circulares mantienen su forma completamente redondeada. [Kubai087]
• El padding, gap y radius deben estar en la cuadrícula de 4px; si hay tokens de radio, modifícalos, no uses valores fijos. [Kubai087]
• Esquinas de superelipse como mejora progresiva: mantén border-radius y añade corner-shape dentro de @supports (corner-shape: superellipse(1.25)); para formas píldora/circulares usa corner-shape: round. Funciona en Chrome/Edge 139+, Safari/Firefox degradan automáticamente a esquinas redondeadas normales. [Kubai087]
• Líneas y bordes con 0.5px, con el mismo grosor en todo el sitio ('usar 1px donde se debería usar 0.5px' es una característica de slop). [ZaynHao] [dingyi] — Nota: ZaynHao aclara que es una sugerencia basada en su experiencia personal, sin considerar pantallas de baja resolución o dispositivos antiguos; usa un fallback si necesitas compatibilidad (ver archivo de referencia).
• No añadas esquinas redondeadas o sombras sin motivo; prohibidas las líneas verticales de color en el borde izquierdo de las tarjetas. Si realmente se necesitan, los valores deben ajustarse al contexto funcional. [ZaynHao] [dingyi]
• No acumules demasiados detalles: líneas divisorias, múltiples capas de sombra, superposiciones semitransparentes, contenedores con borde, tarjetas dentro de tarjetas. [dingyi] [Xian0063]

Color (ver detalle en references/color.md)

• El 'chrome' de la interfaz (botones, tarjetas, inputs) usa solo blanco, negro y grises por defecto, reservando el color para fotos, ilustraciones, datos y demás contenido. [ianneo_ai]
• Todos los colores deben reemplazarse por Radix UI Colors, usándolos según la función definida para sus 12 niveles de saturación. [ZaynHao] (Cada nivel corresponde a fondo / componente / borde / color sólido / texto, consulta la documentación oficial de Radix. [Práctica general])
• Elige 3–5 colores distintivos para la marca que definan la paleta base (puedes tomar colores de sitios web o aplicaciones que te gusten, por ejemplo, su fondo de aplicación #f6f4f0). [ZaynHao]
• No uses: degradados púrpura/azul-violáceo, botones con degradado, iconos de color, una tarjeta de cada color, caracteres individuales coloreados de forma aislada. [dingyi] [Xian0063] [ianneo_ai]

Tipografía y maquetación (ver detalle en references/typography-cjk.md)

• No más de 4 tamaños de fuente, idealmente 3; mínimo 12px. Si faltan niveles jerárquicos, usa peso, color o espaciado en lugar de añadir más tamaños. [ZaynHao] [dingyi]
• El título del hero no debe ser exageradamente grande; no uses todo mayúsculas en subtítulos, ni etiquetas superiores (eyebrow) sobre el título, ni numeración de capítulos, ni migas de pan estilo código. [dingyi] [Xian0063]
• Evita tres fuentes muy manidas: Instrument Serif, Space Grotesk, Bricolage Grotesque; no abuses de fuentes monoespaciadas ni cursivas. [dingyi]
• font-family para chino: primero occidental, luego chino, priorizando los sistemas principales, con sans-serif como último recurso; los nombres de fuentes chinas se escriben en inglés; los nombres con espacios se entrecomillan. Consulta el archivo de referencia para ejemplos listos para usar. [ricouii]
• No centres todo el texto por defecto. [Xian0063]

Copia y contenido (ver detalle en references/copy-and-content.md)

• No uses el punto medio '·' como separador, elimínalo si aparece. [ZaynHao] [dingyi]
• No añadas descripciones explicativas redundantes; no uses Emojis en el cuerpo del texto, ni iconos emoji sobre los títulos. [ZaynHao] [dingyi] [Xian0063]
• El texto debe ajustarse al público objetivo: comprensible pero sin ser demasiado coloquial, la extensión debe coincidir con la función del elemento, no inventes palabras. [ZaynHao] [dingyi]
• No fabriques datos ni pruebas sociales (como '10.000+ clientes satisfechos'), no fuerces un cuadro de suscripción al final. [Xian0063, citando un punto de control de Hallmark]
• Los gráficos no deben ser 'excesivamente detallados'; tener etiquetas (tag/badge) por todas partes también es una característica de slop. [dingyi]

Animación e interacción (ver detalle en references/motion-and-interaction.md)

• Minimiza las animaciones de transición; cuando sean necesarias, la configuración base es ease-out, aproximadamente 250ms. No abuses de las animaciones de scroll, las transiciones deben ser contenidas. [ZaynHao] [dingyi]
• Las entradas usan ease-out, no ease-in; los menús desplegables crecen desde la posición del botón que los activa, empezando con un escalado de 0.96 en lugar de 0; los botones se escalan a 0.97 al presionarlos; los toasts se apilan sin desplazar el contenido; los nombres largos se truncan; los números grandes se abrevian. [Xian0063, citando las Skills de Emil Kowalski]
• Reduce las interacciones que obliguen al usuario a detenerse a pensar; cuando sean inevitables, colócalas donde el usuario ya tenga la intención de tomar una decisión, y reevalúa la prioridad de la información. [ZaynHao]
• El pequeño icono de flecha hacia abajo en los botones de menú desplegable debe corregirse específicamente: dingyi considera que es el detalle 'más grave' de la lista, casi nadie lo arregla. [dingyi]

Componentes, recursos e iconos (ver detalle en references/libraries-and-skills.md, references/icons-and-detail.md)

• Prioriza la reutilización de bibliotecas de componentes / sistemas de diseño y tokens existentes en el proyecto, no reinventes la rueda; referencia patrones de UX probados de productos consolidados. [yanliudreamer] [Kubai087]
• Todos los iconos de una misma interfaz deben pertenecer al mismo sistema de estilo, con el mismo grosor de línea, radio de esquina, proporción y peso visual (por ejemplo, Remix Icon). [yanliudreamer] [Kubai087]
• Los recursos para los modos oscuro / nocturno / Clear etc. deben tratarse por separado, no aplicando un filtro directo de conversión. [remixdesigner] [ianneo_ai]

Flujo de trabajo / Workflow

1. Antes de codificar (Before coding)

• Define claramente: para quién es, qué problema resuelve, qué sensación debe transmitir. Si no lo tienes claro, pregunta al usuario. No empieces a diseñar sin esto. [Xian0063]
• Revisa la biblioteca de componentes y los design tokens existentes del proyecto (color / radio / espaciado / tamaño de fuente). Si existen, construye sobre ellos; si no, crea primero un conjunto mínimo de tokens (ver examples/tokens.css).
• Define las reglas visuales: 3–5 colores de marca + escala de grises de Radix, ≤4 tamaños de fuente, cuadrícula de 4px, jerarquía de radios, bordes de 0.5px, pila de fuentes para chino. [ZaynHao] [Kubai087] [ricouii]

2. Mientras codificas (While coding)

• Por cada elemento que añadas, pregúntate primero '¿se puede eliminar?': texto explicativo, línea divisoria, icono, badge, sombra, color. [yanliudreamer] [ZaynHao]
• Genera primero la vista completa de la página, no parches locales. [Xian0063] [yanliudreamer]
• Para direcciones visuales complejas, puedes generar 3–4 propuestas de una vez para comparar, evitando 'la atracción del prototipo' (invertir tanto tiempo en el código que solo optimizas la solución actual). [yanliudreamer]

3. Revisión (Review pass)

• Revisa punto por punto la lista references/slop-checklist.md, anotando los elementos que se incumplan.
• Prioriza por importancia, corrige solo una cosa por iteración, confirma el resultado y pasa a la siguiente. [Xian0063]
• Al corregir radios, sigue el criterio de Kubai087: genera un listado de cambios con elemento: antiguo -> nuevo.
• Captura pantallas en al menos 3 anchos diferentes (método de revisión de Taste Skill, citado por [Xian0063]), y revisa también el modo oscuro.
• Al dar feedback, usa 'objetivos' en lugar de 'píxeles': marca los problemas sobre la captura, describe el efecto deseado, deja que la IA calcule los valores numéricos. [Xian0063]

Mensajes listos para copiar y pegar a la IA / Copy-paste prompts

La versión completa (incluyendo el prompt original en inglés de Kubai087 y los 10 prompts de ZaynHao) está en references/prompts.md. La versión combinada más usada:

Rehaz esta interfaz siguiendo las reglas de 'Quitar el aspecto de IA'. Modifica solo la página/componente que indique. Si el proyecto ya tiene tokens o una biblioteca de componentes, modifica los tokens y reutiliza los componentes, no uses valores fijos:
1. El 'chrome' de la interfaz solo usa blanco, negro y grises; reserva el color para fotos y contenido. Todos los colores deben ser Radix UI Colors, usándolos según sus 12 niveles de función. No uses degradados púrpura, botones con degradado, iconos de color, ni líneas verticales de color en el borde izquierdo de las tarjetas.
2. Máximo 4 tamaños de fuente (idealmente 3), mínimo 12px; si faltan niveles jerárquicos, usa peso, color o espaciado. No uses todo mayúsculas en subtítulos, etiquetas superiores sobre el título, ni tamaños de hero exagerados.
3. Los radios anidados deben cumplir: radio interno = radio externo − espaciado. Mismo radio para el mismo nivel jerárquico, mínimo 4px. Las formas píldora/circulares mantienen su redondeo completo. Padding/gap/radius deben estar en la cuadrícula de 4px. Usa @supports para añadir corner-shape: superellipse(1.25) como mejora progresiva.
4. Líneas y bordes unificados a 0.5px; elimina líneas divisorias sobrantes, múltiples capas de sombra, superposiciones semitransparentes, contenedores con borde y tarjetas dentro de tarjetas.
5. Elimina el punto medio '·' como separador, textos explicativos redundantes y Emojis en el cuerpo del texto. El texto debe ajustarse al público objetivo, sin ser coloquial ni inventar palabras.
6. Minimiza las animaciones; cuando sean necesarias, usa ease-out de aproximadamente 250ms.
7. Para la pila de fuentes en chino: primero occidental, luego chino, con sans-serif como último recurso.
Al terminar, enumera qué has cambiado (elemento: antiguo -> nuevo) y qué características de slop has eliminado.

Versión de una sola frase (de [ianneo_ai]): La interfaz solo usa blanco, negro y grises; reserva el color para fotos y contenido.

Archivos de referencia / References

Archivo	Contenido
references/sources.md	Enlaces a los posts originales de 8 diseñadores + @bruc3van y resumen de sus puntos clave
references/slop-checklist.md	Lista de verificación de slop de IA (marcable elemento por elemento)
references/radius-and-borders.md	Fórmula de radio anidado, superelipses, bordes de 0.5px y fallbacks
references/color.md	Uso de blanco, negro, grises + Radix Colors
references/typography-cjk.md	Jerarquía de tamaños de fuente, fuentes slop, font-family para chino
references/copy-and-content.md	Reglas de copia y contenido
references/motion-and-interaction.md	Parámetros de animación y detalles de interacción (incluye menús en cascada, ordenación por arrastre, botones esqueuomorfos)
references/icons-and-detail.md	Consistencia de iconos, recursos multimodo
references/libraries-and-skills.md	Bibliotecas de recursos recomendadas y 5 Skills de diseño con IA
references/prompts.md	Todos los prompts listos para copiar
examples/	CSS de antes/después y token mínimo