Checklist: 30 señales de que un diseño está vibecodeado
Degradados, iconos de Lucide, tres tarjetas en fila, rayas largas y testimonios inventados. Marca las que tiene tu web, mira tu nota y llévate el prompt que las evita todas.
El prompt para que tu agente diseñe sin AI-Slop (sin que se note la IA).
Abre tu web en otra pestaña y marca en la lista la que SÍ tengas bien. Cada casilla marcada es una señal que te has quitado de encima, así que 30 de 30 es lo mejor.
La nota se actualiza abajo mientras marcas.
1. La checklist
0/30De serie. Está tal cual la dejó el modelo. Pega el prompt del final y vuelve a pasar la lista.
2. Color
La paleta que sale por defecto y una que alguien ha decidido
Elige un color de marca y dale un solo trabajo: los botones y lo que se puede pulsar. El resto, neutros con un punto de calor o de frío, nunca el blanco y el negro puros. Si quieres un degradado, que vaya entre dos tonos vecinos y que casi no se note.
Una prueba rápida: pasa la web a escala de grises. Si se sigue leyendo igual, el color está bien usado.
3. Tipografía e iconos
Una fuente y un set de iconos sin tocar, frente a dos voces y un set elegido
Una fuente con carácter para los titulares y otra cómoda para leer, o una sola familia con pesos muy distintos. Inter funciona (esta web la usa), pero acompañada de otra que le dé voz. Sola, con el peso por defecto, es la letra de todas las demos.
Los iconos, de un solo set, al mismo grosor que el texto que tienen al lado y solo donde ayuden a encontrar algo. Emojis en la interfaz, ninguno.
4. Composición
La rejilla elegida antes que el contenido, y al revés
Antes de elegir la rejilla, mira cuánto contenido tienes de verdad. Si tienes dos ventajas, son dos. Si una importa más, que sea más grande. Las tarjetas, solo cuando se pueden pulsar o comparar, y los precios con los planes que vendes, ni uno más.
Una terminal en la web solo si tu público la usa. Y los ticks, para lo que de verdad se marca, como lo que incluye un plan.
5. Efectos
Efectos para rellenar y efectos que dicen algo
Elige una sola profundidad y repítela: un borde fino o una sombra corta, no las dos en todas partes. Un radio para lo pequeño y otro para lo grande. Los fondos, planos o con una foto de verdad. Los orbes y los puntitos suelen estar ahí para tapar que la sección está vacía.
El hover, solo en lo que se pulsa, y que cambie algo útil: el color, el subrayado, el cursor. Si se mueve todo, no destaca nada.
6. Texto
Las muletillas del modelo y un texto que escribiría una persona
Escribe como hablas. Frases cortas, con puntos y comas, y cada afirmación con un dato tuyo: una cifra, un cliente, un caso. Un testimonio que no puedes firmar con nombre y empresa, fuera.
Un truco: lee el texto en voz alta. Lo que nunca le dirías a un cliente en persona, sobra.
7. Producto y confianza
Una web que promete y una que enseña
Enseña el producto: una captura real, un vídeo de diez segundos usándolo, una demo que se pueda tocar. Mientras carga, el esqueleto de lo que va a aparecer, con su misma forma.
Y en el footer, unos términos y una política de privacidad que existan. Si pides un correo o cobras algo, no son opcionales.
8. El prompt para evitarlas
Este prompt convierte las 30 señales en reglas para tu agente: qué usar en cada grupo, qué no usar por su nombre y una revisión final contra la lista antes de entregarte nada. Rellena los corchetes con tu producto y tu marca.
