El emoji dentro de un círculo pastel: el icono que delata que tu web la hizo una IA
Ese cohete metido en un disco azul claro encima de cada tarjeta de feature es una de las huellas de IA más fiables de la web. Te explico por qué los generadores lo eligen y qué poner en su lugar.
Abre las últimas cinco webs que te haya montado un generador. Baja hasta la sección de features: las tres o cuatro columnas debajo de un titular del tipo "Por qué los equipos nos eligen". Ahora fíjate en la parte de arriba de cada tarjeta. Hay un círculo. Es h-12 w-12, es rounded-full, está relleno de bg-blue-100 y, centrado dentro, hay un emoji. Un cohete. Un rayo. Una chispita. Un escudito azul.
Ese círculo es una de las huellas de IA más fiables que hay ahora mismo en la web, y a quien lo publica no le cuesta prácticamente nada quitarlo. Pero no lo quita, porque no lo ve. A sus ojos parece terminado. Tiene color, tiene forma, tiene un glifo, encaja en una rejilla. Cumple con todas las casillas que se supone que debe cumplir una "tarjeta de feature". El problema es que cada una de esas casillas la marcó el modelo, no alguien que mirara el resultado y sintiera algo.
El markup exacto
Esto es lo que sale de v0, Lovable, Bolt y de una sesión de Cursor en la que pediste "una sección de features". Hasta el orden de las clases:
<div class="rounded-2xl border bg-white p-6 shadow-sm">
<div class="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-blue-100">
<span class="text-2xl">🚀</span>
</div>
<h3 class="mb-2 text-lg font-semibold">Lightning Fast</h3>
<p class="text-sm text-gray-600">
Built for speed so your team can move quickly and ship with confidence.
</p>
</div>Has visto este div exacto mil veces. El círculo bg-blue-100 (#dbeafe), el emoji en text-2xl, el hueco mb-4, el título text-lg font-semibold, el cuerpo text-sm text-gray-600 que no dice nada. Si cambias el cohete por ⚡ y "Lightning Fast" por "Blazing Performance", es la misma tarjeta. Esa es la señal: no el emoji en sí, sino el hueco en el que se mete; un hueco tan genérico que admite cualquier emoji y cualquier adjetivo sin la menor fricción.
Las variantes también son predecibles. A veces el círculo es bg-indigo-100 porque el resto de la web ya tiró por el camino del degradado azul-morado de Tailwind. A veces es rounded-xl en vez de rounded-full para darle un toque "moderno". A veces el emoji recibe un círculo bg-gradient-to-br from-blue-500 to-purple-600 con el glifo en blanco encima, que es la misma jugada con un abrigo más caro. La estructura de debajo no cambia nunca: contenedor pastel, glifo decorativo, cero información.
Por qué el generador echa mano de esto
No es pereza del modelo. Es el camino de menor resistencia a través de una restricción real. Un emoji es el único "icono" que un generador puede producir con cero dependencias.
Piensa en lo que exige un icono de verdad. Instalas lucide-react o @heroicons/react. Importas el icono concreto: import { Zap } from 'lucide-react'. Renderizas package.json, una ruta de import que funcione, un componente que tiene que existir en esa librería con ese nombre exacto. Si el modelo alucina un 🚀 es un carácter Unicode. No necesita instalación, ni import, ni pipeline de assets, ni SVG, ni viewBox, ni CDN, ni fichero de fuente. Lo sueltas en un de HTML pelado y se renderiza en cualquier dispositivo.
Así que cuando un generador optimiza para "producir algo que funcione a la primera", el emoji gana todas las apuestas. Es gratis. Es seguro. Es universal. Y el modelo lo ha visto en unos diez millones de ejemplos de landing pages durante el entrenamiento, porque las demás webs hechas por IA ya hicieron exactamente lo mismo: un bucle de retroalimentación en el que la morralla entrena la siguiente tanda de morralla, algo de lo que hablo en el estado de la web generada por IA.
El resultado es correcto en el sentido estrecho (compila, se renderiza) y equivocado en todos los sentidos que le importan a un humano que está decidiendo si tu producto es real.
Por qué transmite que es barato
Un emoji no es tu arte. Ese es el núcleo del asunto. El cohete de tu tarjeta de feature lo dibujó el equipo de diseño de Apple para iOS, o el de Google para Android, o el de Microsoft para Segoe UI Emoji. Se renderiza distinto en cada plataforma: el 🚀 de Apple es un transbordador 3D brillante con una llama naranja, el de Google es un dibujo plano, y Windows pinta una cosa de trazo fino que no se parece a ninguno de los dos. No tienes ningún control sobre cuál ve tu visitante. Tu "icono de marca" es, literalmente, el clipart del fabricante del sistema operativo, y cambia según el móvil que lo esté mirando.
Esa inconsistencia es la primera grieta. La segunda es de tono. Los emojis arrastran un registro: informal, de cháchara, de mensaje a un amigo. Un 🚀 al lado de "Seguridad de nivel empresarial" es un disfraz que no pega. Estás pidiendo un contrato de seis cifras con un glifo diseñado para significar "vamos allá" en un grupo de WhatsApp. A veces ese registro desenfadado es justo lo que quieres. Pero los generadores lo aplican a ciegas (a fintech, a SaaS legal, a paneles médicos) porque el modelo no está leyendo la situación, está rellenando un hueco.
La tercera grieta es el propio círculo pastel. Un bg-blue-100 detrás de un emoji es una señal dentro de la señal. ¿Por qué está ahí? Porque el emoji a solas se veía demasiado pequeño y solitario flotando sobre la tarjeta, así que la plantilla lo envuelve en un disco de color para darle presencia. Está compensando. Un icono de verdad en h-6 w-6, con un trazo seguro y un color text-blue-600, no necesita una burbuja pastel para parecer intencionado: se sostiene solo. La burbuja es un andamio que el diseño nunca retiró, igual que la rejilla de 3 tarjetas idénticas es un andamio que nadie retiró.
Junta las tres y el detector de patrones del visitante se dispara antes de que termine de leer el titular: *he visto esta misma sección en otras cuarenta webs este mes, y la mayoría eran humo*. Te has gastado tu primera impresión en decirle que usaste una plantilla. Es un sitio caro donde gastarla.
Cómo revisar tu propia web en diez segundos
Abre las DevTools, pincha en la sección y lee el markup. Si ves un o un emoji suelto dentro de un div rounded-full bg-*-100, lo tienes. O sáltate las DevTools del todo y mira el código fuente: busca en la página los caracteres literales del emoji. Si 🚀, ✨ o ⚡ aparecen en tu HTML publicado como icono de feature, ese es el hallazgo. (Esta clase de auditoría a nivel de código fuente es justo el método de leer el CSS para auditar cualquier web: el emoji-en-círculo es uno de los aciertos más rápidos de la lista).
Señal extra: si los tres o cuatro emojis de la fila vienen del mismo grupo semántico (🚀 ⚡ ✨ 🔒, el pack de inicio "velocidad / potencia / magia / seguro"), eso es un modelo que sacó los glifos de feature más estadísticamente comunes y los soltó en fila. Ningún humano elige esos cuatro juntos a propósito.
Qué usar en su lugar
Tienes tres buenos reemplazos, y cuál escojas debería depender de lo que la tarjeta diga realmente.
1. Un set de iconos de verdad, usado con sobriedad
Instala Lucide. Tiene licencia MIT, es tree-shakeable, son ~1.500 iconos dibujados sobre una rejilla consistente de 24×24 con un trazo de 2px, y es el estándar de facto por algo: es limpio y es consistente. La consistencia es justo el punto: todos los iconos comparten grosor de trazo y radio de esquina, así que una fila de ellos se lee como una sola familia en vez de como una ruleta de clipart.
import { Zap, ShieldCheck, GitBranch } from 'lucide-react'
<Zap className="h-5 w-5 text-blue-600" strokeWidth={1.75} />Y luego rompe el valor por defecto. No lo envuelvas en bg-blue-100. Pon el trazo a 1.75 en vez del 2 de serie para una línea algo más fina. Coloréalo con tu color de acento real, no con el azul de Tailwind; mira cómo elegir un acento que no sea blue-600. Alinéalo a la izquierda, sobre la misma línea base que el titular, en vez de apilarlo en una burbuja centrada. En el momento en que dejas de centrar un icono dentro de un disco pastel, la tarjeta deja de parecer generada, porque el disco era la parte generada.
¿Y si todo el mundo usa Lucide, no es eso su propio monocultivo? Sí: los iconos son compartidos, pero el *tratamiento* es tuyo: grosor de trazo, color, tamaño, posición, y si lo emparejas con un número o con una línea. Es el mismo argumento que escapar del monocultivo de shadcn: las primitivas compartidas están bien, el problema son los valores por defecto idénticos.
2. Un número
La mitad de las veces la tarjeta de feature no debería llevar icono ninguno: debería llevar un dato. Si la tarjeta va sobre velocidad, la versión honesta no es un ⚡ dentro de un círculo, es esto:
<div class="rounded-2xl border border-gray-200 p-6">
<div class="font-mono text-4xl font-semibold tracking-tight text-gray-900">
40ms
</div>
<h3 class="mt-3 text-base font-medium">p99 response time</h3>
<p class="mt-1 text-sm text-gray-500">
Measured across 2.1B requests last quarter, US-East.
</p>
</div>Un número real hace el trabajo que el emoji fingía hacer. 40ms dice "rápido" con pruebas. 99.98% dice "fiable" con pruebas. 12.000 equipos dice "de confianza" con pruebas. El cohete decía "rápido" con un vibe. Los números, además, son imposibles de falsear con una plantilla de forma convincente, porque tienes que tenerlos de verdad, y por eso mismo se leen como creíbles. Componlos en font-mono o con un peso de display de tracking-tight apretado para que parezcan lecturas de instrumentos, no texto de cuerpo.
3. Un diagrama diminuto
Para features que van sobre *cómo funciona algo* (un pipeline, una sincronización, una rama, un flujo) un SVG inline de 24×40px del mecanismo real le da mil vueltas a cualquier glifo. Tres puntos unidos por una línea para "sincronización en tiempo real". Un camino bifurcado para "branching". Una barrita que escala en escalones para "crece contigo". Cuesta diez minutos en Figma o quince líneas de
El patrón debajo del patrón
El emoji-en-círculo no es una mala decisión aislada. Es lo que pasa cuando un sistema optimiza para "se renderiza sin errores" en vez de para "significa algo para una persona". Misma causa raíz que el bento grid convertido en hero por defecto, misma causa raíz que el fade-in-up en cada scroll: el generador eligió la opción con menos dependencias y más respaldo en el set de entrenamiento, y lo dio por terminado.
El arreglo nunca es un emoji mejor. Cambiar 🚀 por 🎯 no cambia nada. El arreglo es matar el hueco: decidir, tarjeta a tarjeta, si esa feature merece un icono, un número o un dibujo, y darle entonces el que se ha ganado. Esa decisión son dos minutos de criterio humano por tarjeta. Y son justo los dos minutos que el generador se saltó, que es por lo que hacerlo es lo que hace que tu web deje de parecer hecha por el generador.
Borra el círculo pastel. Si la tarjeta sobrevive sin él, nunca lo necesitaste. Si no sobrevive, la tarjeta estaba vacía y la burbuja lo escondía, que es la cosa más útil que el emoji te dijo nunca.
SHIP CODE THAT LOOKS INTENTIONAL
Scan your frontend for AI patterns. Generate a unique design system. Stop shipping the same blue gradient as everyone else.