100 cosas que hacen que tu web parezca vibecodeada
El prompt que revisa tu web y quita las 100.
- 001
Fondo blanco puro
#ffffff de arriba abajo, sin un solo tono que separe una sección de otra.
- 002
Morado sobre negro
Fondo casi negro con acentos violeta: la paleta de serie de casi cualquier landing de IA.
- 003
Degradado de morado a azul
En el titular, en los botones y en el fondo. Lo reconoces a un kilómetro.
- 004
Texto con degradado
La palabra clave del titular pintada con un degradado de dos colores.
- 005
Arcoíris sin sentido
Cada tarjeta y cada icono de un color distinto, sin que el color signifique nada.
- 006
Neón con resplandor
Verdes, cianes y rosas fosforito sobre oscuro, con un brillo alrededor.
- 007
Pasteles de manual
Menta, lavanda y melocotón, todos con la misma saturación.
- 008
El gris de Tailwind
slate-500 para todo el texto secundario, tal cual viene.
- 009
El azul de los botones
El mismo azul de Tailwind (#3b82f6) en cada botón y en cada enlace.
- 010
Modo oscuro sin pensar
El modo claro invertido: grises sucios y textos que no se leen.
- 011
Inter para todo
Titulares, texto y botones con la misma fuente y el peso por defecto.
- 012
Geist o Space Grotesk
Las otras dos fuentes que pone cualquier modelo cuando no le dices nada.
- 013
Titulares gigantes y finos
80 píxeles en peso fino, que en el móvil ocupan media pantalla.
- 014
Todo centrado
Titular, texto y botones centrados en todas las secciones, de arriba abajo.
- 015
Párrafos de lado a lado
Líneas de 150 letras que nadie lee hasta el final.
- 016
Todos los títulos iguales
Ninguno destaca porque todos pesan lo mismo.
- 017
La etiquetita encima del título
«FEATURES» en mayúsculas grises y espaciadas encima de cada sección.
- 018
Interlineado de serie
Demasiado apretado en los titulares y demasiado suelto en el texto.
- 019
Números que bailan
Cifras de distinto ancho en contadores y precios, que se mueven al cambiar.
- 020
Comillas rectas
"Esto" en vez de «esto». Delata que nadie ha revisado el texto.
- 021
Iconos de Lucide sin tocar
Los mismos trazos de 2 píxeles de shadcn, sin cambiar tamaño ni grosor.
- 022
Emojis en todo
🚀 en el titular, ✨ en los botones y uno delante de cada punto.
- 023
El destello de la IA
La estrellita de cuatro puntas al lado de todo lo que «tiene IA».
- 024
Icono en un cuadradito
Cada icono metido en un cuadrado de color suave con las esquinas redondas.
- 025
Ilustraciones genéricas
Muñecos planos o figuras 3D de plástico que valen para cualquier empresa.
- 026
Fotos de banco
La chica sonriendo al portátil y el equipo chocando las manos.
- 027
Caras de relleno
Los mismos avatares en tus testimonios que en otras mil webs.
- 028
Logos de empresas falsas
«Confían en nosotros» con Acme, Globex o marcas que no te conocen.
- 029
Imágenes que no cargan
Un recuadro gris o una foto de Unsplash que ya no existe.
- 030
Móvil con una pantalla inventada
Un iPhone con una app que no es tu producto.
- 031
Tres tarjetas en fila
Icono, título de tres palabras y dos líneas, tres veces, debajo del hero.
- 032
El hero de siempre
Etiqueta, titular, subtítulo, dos botones y una imagen a la derecha.
- 033
Los dos botones de siempre
«Empezar gratis» relleno y «Ver demo» con borde, en todos los heros.
- 034
Bento grid
La rejilla de cajas de tamaños distintos, aunque tu contenido no la pida.
- 035
Ventana de terminal
Los tres puntitos de colores con un comando dentro, en una web que no es para programadores.
- 036
Ticks en cada lista
Un check verde delante de cada punto, sea una ventaja o no.
- 037
Tres planes de precio
Básico, Pro «Popular» y Enterprise, aunque tu producto tenga un solo precio.
- 038
Raya de color a la izquierda
Un borde grueso de color en tarjetas, avisos y citas.
- 039
Siempre las mismas secciones
Hero, logos, ventajas, testimonios, precios, preguntas y botón final. En ese orden.
- 040
Preguntas que nadie hace
«¿Es seguro?», «¿Puedo cancelar?», con respuestas de una línea.
- 041
Footer de cuatro columnas
Producto, Empresa, Recursos y Legal, con la mitad de los enlaces vacíos.
- 042
El mismo hueco entre todo
La misma separación entre todas las secciones, sin ritmo.
- 043
Sombras en todo
Cada tarjeta flotando con la misma sombra grande y difusa.
- 044
Esquinas blanditas
El mismo radio de 16 o 24 píxeles en botones, tarjetas, imágenes y campos.
- 045
Liquid glass
Paneles de cristal esmerilado encima de fondos que no lo necesitan.
- 046
Orbes de luz
Manchas de color difuminadas detrás del hero.
- 047
Rejilla de puntos
El fondo de puntitos grises que se desvanece hacia los bordes.
- 048
Bordes que brillan
El borde con degradado que gira alrededor de la tarjeta destacada.
- 049
Todo aparece al bajar
Cada bloque entra con el mismo fundido hacia arriba, una y otra vez.
- 050
Hover en todo
Todas las tarjetas suben dos píxeles al pasar el ratón, se puedan pulsar o no.
- 051
Flechas que se mueven
La flechita que se desplaza en cada botón y en cada enlace.
- 052
Contadores que suben
«+10.000 usuarios» contando desde cero, con números que no son reales.
- 053
Rayas largas
Frases cortadas con «—» cada dos párrafos. Casi nadie las escribe a mano.
- 054
«No es X, es Y»
«No es una herramienta, es un cambio de mentalidad». En cada sección.
- 055
Titular que vale para todo
«Lleva tu negocio al siguiente nivel». ¿Qué negocio? ¿Qué nivel?
- 056
Palabras de folleto
Potencia, transforma, desbloquea, impulsa, revoluciona, sin fricciones.
- 057
Todo de tres en tres
«Rápido, seguro y escalable». Siempre tres adjetivos.
- 058
Testimonios inventados
«Sarah K., CEO», con foto de banco y una frase que vale para cualquier producto.
- 059
Cifras sin fuente
«Ahorra un 80 % de tiempo». ¿Según quién?
- 060
Subtítulo que repite el titular
Dos frases para decir lo mismo con otras palabras.
- 061
Inglés olvidado
«Get started», «Learn more» o «Lorem ipsum» en una web en español.
- 062
Botones que no dicen nada
«Enviar», «Saber más», «Empezar», en vez de lo que pasa al pulsar.
- 063
¡Admiraciones!
¡Todo! ¡Muy! ¡Emocionante!
- 064
Tú y usted mezclados
Una sección te tutea y la siguiente te habla de usted.
- 065
Errores de robot
«Error: invalid input» en vez de decirte qué has hecho mal.
- 066
Sin demo del producto
Ni una captura ni un vídeo de verdad. Solo ilustraciones y mockups vacíos.
- 067
Sin nadie detrás
Ni un nombre, ni una foto, ni quién responde si algo falla.
- 068
Sin un contacto de verdad
Un formulario y ya. Ni correo, ni teléfono, ni dirección.
- 069
Formulario que no envía
Pulsas enviar y el mensaje no llega a ninguna parte.
- 070
Sin página de gracias
Envías y no pasa nada visible, o sale una alerta del navegador.
- 071
Botones que no llevan a nada
Enlaces a «#» o a páginas que dan error.
- 072
Redes de mentira
Iconos de X, LinkedIn y GitHub que llevan a la portada de cada red.
- 073
Copyright del año pasado
«© 2024» en el footer de una web de 2026.
- 074
Restos de la plantilla
«Acme Inc.» o el nombre del proyecto de ejemplo en algún rincón.
- 075
Precios que no cuadran
«Desde 0 €» y luego no hay forma de pagar.
- 076
Sin título en cada página
Todas las pestañas dicen lo mismo, o «Create Next App».
- 077
Sin meta descripción
Google se inventa el texto que sale debajo de tu enlace.
- 078
Sin imagen para redes
Compartes el enlace y sale un recuadro gris.
- 079
El favicon de la plantilla
El triángulo de Vercel o el rayo de Vite en la pestaña. O ninguno.
- 080
Sin robots.txt
Los buscadores no saben qué pueden leer y qué no.
- 081
Sin sitemap.xml
Google tarda semanas en encontrar tus páginas.
- 082
Imágenes sin texto alternativo
Ni Google ni quien usa un lector de pantalla saben qué hay en ellas.
- 083
Encabezados por tamaño
Cinco H1 en la misma página, o ninguno, según lo grande que se viera.
- 084
Sin 404 propia
La página de error del framework, en inglés y sin salida.
- 085
Sin dominio propio
tu-proyecto.vercel.app o un subdominio de la herramienta con la que la hiciste.
- 086
Rota en el móvil
Textos que se salen, tarjetas que no caben y scroll de lado.
- 087
Sin botón fijo en el móvil
La acción principal desaparece en cuanto bajas.
- 088
Sin estados de carga
La página en blanco o un spinner, y luego todo de golpe.
- 089
Formularios que no te avisan
Te equivocas en un campo y no te dice cuál.
- 090
Botones que no reaccionan
No cambian al pulsarlos ni se bloquean mientras envían, así que pulsas tres veces.
- 091
Sin foco visible
Con el teclado no sabes dónde estás.
- 092
Contraste que no se lee
Gris claro sobre blanco para que «quede elegante».
- 093
Saltos al cargar
Los botones se mueven cuando llegan las imágenes o las fuentes.
- 094
Lenta sin motivo
3 MB de JavaScript para una landing de una sola página.
- 095
Consola llena de errores
Abres F12 y hay veinte avisos en rojo.
- 096
Sin política de privacidad
Y la web te pide el correo en el primer scroll.
- 097
Sin términos
El enlace del footer no lleva a ninguna parte.
- 098
Cookies sin aviso
Google Analytics instalado y ni un banner. O el banner, sin una sola cookie.
- 099
Sin analítica
No sabes cuánta gente entra ni qué hace.
- 100
Sin aviso legal
En España, si vendes algo, tienes que decir quién eres.