Un estudiante desmonta la UI generada por IA de su app universitaria: "No sé qué es un estudiante inactivo"
10 Tells of a Slop UI
El autor analiza las señales que delatan una interfaz creada por IA sin criterio: gradientes por todas partes, colores sin significado, badges pulsantes redundantes, tarjetas con forma de uña, emojis y glassmorphism. Usa como ejemplo la actualización de su app universitaria, donde un badge "verified" o "active student" no aporta nada. No está en contra del vibe coding, sino de la falta de esfuerzo por hacer algo que se vea bien.
Si estuviera falsificando mi identificación digital, ¿acaso le añadiría "unverified" deliberadamente?
- tlahtinen
A principios de este año usé Claude para diseñar una pantalla para un juego de Unreal en el que trabajo. Al principio pensé: wow, qué gran diseño, esto es un cambio de juego y me da una ventaja enorme.
Menos de un año después me da vergüenza lo mucho que parece hecho con Claude: el punto parpadeante en la esquina, el doble // separando el texto del encabezado, las elecciones de fuentes... ahora veo los mismos patrones por todas partes, y estoy seguro de que la audiencia también se está dando cuenta.
Sigo usando Claude en mi trabajo, pero mucho más esporádicamente; pido sugerencias de esquemas de color y fuentes (¡nada de Rajdhani ni Share Tech Mono!), pero son más que nada para inspirarme y no las copio ciegamente. Siento que estoy siendo más inteligente al respecto, pero quizá en un año me dé cuenta de que todavía no he salido de la trampa :)
- weakfish
He estado tratando de identificar qué es lo que sucede cuando el robot escribe cosas como el ejemplo de "3 campuses, one app", me alegra que el autor haya podido identificarlo como contexto del chat filtrándose.
La otra versión de esto es cuando el robot se obsesiona con alguna parte del prompt y deja comentarios por ahí. Un ejemplo es cuando le pido que prefiera pruebas de integración usando TestContainers, empieza a añadir comentarios a cada prueba nueva diciendo "Real services, no mocks" o algo así.
Y sí, tengo una línea en mi *.MD diciendo que no haga eso.
- czhu12
Al menos algunos de estos son simplemente por falta de interés. Hice vibe coding de esta landing page hace poco https://tui2web.com/ y luché contra muchos de los valores por defecto que el LLM proponía tras unas horas de iteración. Siéntete libre de destrozarla, no estoy muy apegado, pero creo que hizo un trabajo razonablemente bueno.
- vallerie
Me encanta este blog que menciona el problema del detalle de implementación en la prosa. Probablemente sea lo que más me irrita de las apps hechas con vibe coding.
Gran parte de esto es un problema simple de resolver: solo pídele al agente que prefieras "Pon todo el texto visible para el usuario en un archivo de traducción para i10n" y luego revisa y edita dicha prosa como humano.
- zinoc
Esto es similar a la rápida adopción temprana del framework CSS Bootstrap. A mucha gente le molestó el repentino aumento de sitios web que se veían y sentían igual, pero creo que fue un paso tremendo hacia adelante en usabilidad y accesibilidad, y bien valió la pena la ola inicial de sitios web genéricos.
- jph
Empiezo con estas reglas, luego ajusto según quiero...
ENFATIZAR:
- *Resumen.* Primer párrafo como periódico (quién, qué, dónde, cuándo, cómo, por qué).
- *Beneficios.* Enfócate en los beneficios para el lector.
- *Por qué esto importa* Enfócate en lo que aporta al lector.
NO:
- *Sin stack tecnológico.* No digas la implementación técnica; cubierto en otro lugar.
- *Sin conteos.* No digas número de páginas, número de partes, número de capítulos, etc.
- *Sin formato especial.* No negritas, no cursivas, no listas con viñetas.
- *Sin "si".* No digas "Si haces X entonces Y"; en su lugar usa positivo.
- *Sin oraciones largas y encadenadas.* No uses muchas cláusulas ni demasiadas palabras.
- *Sin voz pasiva.* No uses oraciones pasivas ni sin sujeto.
- mjr00
Lo más importante que aprendí al graduarme de "músico malo" a "músico aceptable" (lo suficientemente aceptable para tener oyentes y fans, al menos) fue que no hay un único gran truco que convierta una canción de mala a buena: hay 100 pequeños trucos que se suman. Y necesitas tener experiencia para saber cuáles son. Un oyente entrenado podría decir "los medios están demasiado comprimidos", "hay demasiados agudos", "los transitorios de la batería no están perforando", pero un oyente normal y casual solo va a decir: "No sé, simplemente no suena bien".
Esta porquería de UI es lo mismo. Un punto ligeramente desalineado fuera de la línea de tiempo, elecciones de color que realmente no tienen sentido dado el sitio web en su conjunto, usar texto tipo LLM. Nada de esto es un problema obviamente grave por sí solo. Pero cuando sumas 50 de estos en un sitio web, los usuarios sienten esa sensación de "esto es porquería".
Los detalles importan. De forma aislada parecen irrelevantes, pero en conjunto es lo que eleva algo del montón de basura de IA a algo realmente bueno.
- tptacek
Un estudiante "inactivo" es aquel que está matriculado pero no está asistiendo actualmente a clases.
Este es un artículo súper útil, pero muchas de estas quejas sobre cosas como las alineaciones son también el resultado natural de que yo, una persona que no es de frontend, construya cualquier tipo de frontend web. Así que no me preocuparía demasiado por eso.