Por qué tu sitio se ve hecho con IA
Y por qué cambiar la librería de íconos no lo va a arreglar. El problema casi nunca está donde uno lo busca.
RESPUESTA CORTA
Lo que delata al contenido generado no son los íconos ni el copy: es que todas las secciones tienen la misma forma. Etiqueta, título, párrafo, rejilla de tarjetas. Repetir. Esa uniformidad métrica es la firma, y se arregla variando la silueta de las secciones, no su decoración.
Es un problema de ritmo, no de componentes.
Un diseñador humano rompe el compás sin pensarlo. Una plantilla no puede: repetir es su única forma de existir.
Se cuenta, no se intuye
Antes de tocar una línea de código, contá tres cosas sobre tu página: cuántas secciones abren igual, cuántas comparten el mismo padding vertical y cuántas comparten el mismo ancho máximo. Si la respuesta es «casi todas», ya sabés dónde está el problema — y no está en los íconos.
El diagnóstico intuitivo («se ven de librería») apunta al síntoma. Los íconos son lo primero que se nota porque son lo único que se mira de cerca; la métrica uniforme actúa en la periferia, que es justo donde se forma la impresión de «esto ya lo vi».
Diagrama propio. La columna de la izquierda no es una caricatura: es la estructura literal que produce el contenido generado cuando nadie interviene el ritmo.
Los seis movimientos
Están escritos como movimientos y no como reglas porque hay que hacerlos, no cumplirlos. Y van en lista con aire, no en una rejilla de seis tarjetas iguales — una rejilla acá sería exactamente el problema que este texto describe.
Romper la métrica
En una página de unas nueve secciones, al menos tres deben tener una silueta distinta de las demás: una a sangre completa entre secciones contenidas, un bloque asimétrico de dos columnas, una sección sin rejilla, una tarjeta más angosta que el cuerpo. Y variar también el padding vertical y el ancho máximo. Si todas respiran igual, siguen siendo la misma sección con distinto texto.
Prueba real por encima de ilustración
Capturas reales del producto, con datos sintéticos. Es el mayor golpe anti-IA que existe y es gratis: ninguna IA puede fabricar tu interfaz real. Con pie de foto que declare que los datos son de demostración — la transparencia suma. Si el producto todavía no tiene interfaz, el sustituto es otro artefacto propio: un diagrama, una tabla de datos verdaderos. Nunca una ilustración de stock.
Un lenguaje propietario, no una librería
Las librerías de ilustración te catalogan, no te diferencian: quien vio cien landings las reconoce al instante. Lo que funciona es derivar todo de una sola idea. Acá es el latte art — vapor, corazón, grano, vertido — a opacidad .05–.07, detrás del contenido, sangrando fuera del contenedor. Todo rima porque todo sale de la taza.
Honestidad específica en el copy
El texto generado es vago y uniformemente positivo. El antídoto es el mismo que el visual: romper el patrón. Declarar hasta dónde llega el producto. Dar números concretos y verificables, porque lo específico no se puede inventar y lo vago sí. Pero nunca apuñalarse: decir lo que no hacés es credibilidad, mandar al comprador con la competencia es un autogol.
Movimiento que nunca esconde
Reveals al scroll en CSS puro con animation-timeline: view(). Cero JavaScript, cero librerías de animación. Y el piso de opacidad en .3, nunca en 0: un navegador headless que renderice sin scrollear ve la página vacía, y cualquier herramienta que capture saca imágenes en blanco.
Restricciones que protegen el propósito
Toda página existe para algo, y el diseño no puede costar eso. Definí qué defiende la página y convertilo en restricción dura antes de construir. Esta página, por ejemplo, existe para ser leída y citada: cero JavaScript, todo el contenido en el DOM sin scripts, ningún recurso externo salvo la tipografía, y cada tabla con su propio scroll lateral para que el cuerpo nunca se mueva de lado.
Cuatro días después, esta fórmula falló
Se formuló el 26 de julio de 2026. El 30, alguien reportó que una interfaz nuestra «se veía fea». La fórmula habría mandado a buscar un problema de ritmo — y habría hecho perder el día.
El defecto real era contraste de texto. La escalera de tres niveles estaba colapsada: el nivel más débil no llegaba ni al piso de WCAG, y el valor que lo hacía pasar lo dejaba por encima del nivel de arriba, así que arreglarlo ingenuamente borraba un nivel entero de jerarquía y la pantalla se veía más plana todavía.
| Nivel | Antes | Después | Usos en el código |
|---|---|---|---|
| Texto principal | 16.94:1 | 16.94:1 | sin cambio |
| Secundario | 5.69:1 | 7.22:1 | 62 |
| Terciario | 2.99:1 | 5.46:1 | 11 |
| Separadores | 1.30:1 | sin cambio, a propósito | 24 |
Medido con un script que lee los tokens del CSS y compone la transparencia contra cada fondo — no con colores transcritos a mano. Los separadores se dejaron como estaban: WCAG 1.4.11 no cubre un divisor decorativo entre filas que ya se distinguen por contenido y espaciado, así que subirlos sería una decisión estética, y vestirla de cumplimiento sería colar un cambio de cara del producto por la puerta de atrás.
Se arregló con tres valores de color. Correr la fórmula no lo habría encontrado nunca — y por eso el método ahora empieza por un triage que puede mandarte a otra herramienta. Saber cuándo algo no aplica es parte de la herramienta.
«Feo» y «slop» son diagnósticos distintos
Los dos suenan igual cuando alguien los reporta, y piden herramientas opuestas. La pregunta que los separa: ¿la queja es sobre la forma, o sobre el esfuerzo?
SUENA A RITMO
- «se ve genérico»
- «se ve plantilla»
- «se ve hecho con IA»
- «esto ya lo vi mil veces»
Es uniformidad métrica. Se compone — los seis movimientos.
SUENA A ESFUERZO
- «me cansa la vista»
- «se ve plana», «apagada»
- «no encuentro lo que busco»
- «está fea», a secas
Es legibilidad o jerarquía. Se mide — y la fórmula no sirve.
La tercera fila de la segunda caja es la peor. «Está fea» a secas no es un diagnóstico: es una invitación a adivinar, y adivinar en diseño se ve exactamente igual que trabajar. Antes de tocar un pixel hay que convertir el adjetivo en un síntoma, y las preguntas que funcionan no son «¿te gusta?» sino ¿qué te cansa la vista?, ¿qué dato buscás y no encontrás rápido?, ¿qué acción hacés más veces al día y cuántos clics te lleva?
Ninguna se ve en escritorio
Las cuatro estuvieron en producción. Las cuatro pasaron desapercibidas porque en una pantalla ancha no rompen nada.
El shorthand padding que borra el margen lateral
La peor, porque es silenciosa. Si las secciones llevan dos clases en el mismo elemento —una que da el ancho y otra que da el aire vertical— tienen la misma especificidad, y gana la última declarada. Un padding: 64px 0 reescribe los cuatro lados: el lateral pasa a cero. En escritorio no se nota porque el ancho máximo deja aire de sobra. En móvil el texto queda pegado al borde.
/* la que da el ancho */
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
.sec{padding:64px 0} ← anula el 28px lateral
.sec{padding-top:64px;padding-bottom:64px} ← longhand, correctooverflow-x en body no recorta nada
Se propaga al viewport. Los motivos que sangran fuera del contenedor ensanchan la página entera. Va en el contenedor raíz, y con clip, no con hidden: hidden fuerza un overflow-y automático que mete una barra de scroll interna, y además rompe el position:sticky del encabezado.
Sangrado completo con 100vw
100vw incluye el ancho de la barra de scroll, así que desborda siempre. Si la sección es hija directa del contenedor raíz ya ocupa el ancho completo sola. No hace falta ningún truco.
Medir la caja en vez del texto
getBoundingClientRect() devuelve la caja del elemento, que incluye su propio padding. Un pie de foto con padding-left:20px reporta que empieza en 0 aunque su texto empiece en 20 — y se persiguen bugs que no existen. Para el borde real del texto hay que medir un Range sobre el contenido. La versión gemela de esta trampa: getComputedStyle(el).opacity devuelve 1 aunque un ancestro esté en 0, porque la opacidad no se hereda como valor, se compone al pintar.
Antes de dar una página por terminada
Verificar mirando, no asumiendo. Cada punto salió de algo que se rompió.
- ¿Al menos tres secciones con silueta distinta de las demás?
- ¿Varía el padding vertical y el ancho máximo entre secciones?
- ¿Al menos una prueba real —captura con datos sintéticos, o un artefacto propio— verificada abriéndola?
- ¿Esa prueba sostiene un argumento del texto, o solo decora?
- ¿Cero librerías de ilustración?
- ¿Los motivos salen de una sola idea, a opacidad .05–.07, detrás del contenido?
- ¿
overflow-x:clipen el contenedor raíz, no enbody? - ¿Ningún shorthand
paddingen clases que compartan elemento con la de ancho? - ¿Medido el borde izquierdo real del texto a 390px, con
Rangey no con la caja? - ¿Todo reveal arranca en
.3y no en0? - ¿La sección de límites está redactada como alcance, y sin recomendar a la competencia?
- ¿Al menos un dato numérico verificable por sección argumentativa?
- ¿Ningún copy que describa por posición en pantalla? El responsive reordena; el copy no.
- ¿Verificado a 1440px y a 390px sin desbordamiento horizontal?
- ¿
prefers-reduced-motionrenderiza la página completa?
Lo que suelen preguntar
¿Por qué mi sitio se ve hecho con IA si el diseño es bueno?
Porque «bueno» y «distinto» son cosas separadas. Lo que delata al contenido generado es la uniformidad métrica: todas las secciones con la misma silueta, el mismo padding vertical y el mismo ancho. Un diseño puede estar bien ejecutado en cada sección y aun así leerse como plantilla, porque la impresión de «esto ya lo vi» se forma en la periferia, no en el detalle.
¿Cambiar la librería de íconos ayuda?
No. Es el diagnóstico intuitivo más común y apunta al síntoma. Los íconos se notan porque son lo único que se mira de cerca, pero cambiar un pack por otro deja intacta la causa. Los íconos de librería son perfectamente válidos para listas funcionales, que es una convención de producto; el problema es usarlos como decoración en secciones que ya eran todas iguales.
¿Sirve para una aplicación, o solo para páginas de contenido?
Está escrita para páginas de contenido. En una aplicación con sesión —una bandeja, un panel— cuatro de los seis movimientos no traducen directo: no hay nueve secciones cuyas siluetas variar, ni reveals al scroll que convengan. Lo que sí traduce es el diagnóstico: en una aplicación la uniformidad se ve como todo con el mismo padding y el mismo peso tipográfico, y la jerarquía tiene que venir de densidad variada.
¿Qué hago si me dicen que mi interfaz «está fea»?
No aplicar esta fórmula todavía. «Está fea» a secas no es un diagnóstico: hay que convertirlo en un síntoma preguntando qué cuesta, no si gusta. Si la respuesta apunta a cansancio visual, a no encontrar un dato o a que la pantalla «se ve plana», el problema es legibilidad o jerarquía y se mide: contraste, escalera de niveles de texto, densidad. Si apunta a que se ve genérico o repetido, entonces sí es ritmo.
¿Se pueden usar ilustraciones de unDraw, Storyset o Humaaans?
Se puede, pero te catalogan. Son la firma visual de «plantilla de startup» y cualquiera que haya visto varias decenas de landings las reconoce al instante, lo cual trabaja en contra de lo que la ilustración venía a hacer. La alternativa que funciona es derivar un set cerrado de tres a cinco motivos propios de una única idea del proyecto, en line art, a opacidad muy baja y detrás del contenido.
¿Hay que medir el contraste aunque el diseño se vea bien?
Sí, y con dos cuidados que la práctica común omite. Primero: un color con transparencia no tiene un contraste, tiene uno por cada fondo sobre el que se compone, así que hay que componerlo antes de medir y verificar contra todos los fondos reales — el peor caso casi nunca es el fondo principal. Segundo: pasar el umbral no alcanza. Hay que medir la escalera completa, porque un valor puede cumplir y aun así arruinar la jerarquía si se acerca demasiado al nivel de arriba.
¿Esto se puede usar en un proyecto propio?
Sí. El método está publicado como skill de Claude Code bajo licencia CC BY 4.0, o sea que se puede copiar, adaptar y usar comercialmente; lo único que pide es atribución. Incluye la receta, el triage, las trampas de CSS y las cinco variables que conviene resolver antes de escribir la primera línea de HTML — la primera de ellas, la única idea de la que se deriva todo lo visual, es la que hace la diferencia.
El método está abierto
Cinco archivos de Markdown, sin dependencias. Se instala como skill de Claude Code o se lee y se aplica a mano.