Diseño web anti-prefabricado

¿Qué hace Diseño web anti-prefabricado?

La mayoría de los sitios hechos por IA se parecen porque el modelo llena cada decisión abierta con la respuesta estadísticamente más común: Inter, un degradado de índigo a púrpura, tarjetas con rounded-2xl y sombras suaves, un héroe centrado con una insignia de píldora, tres tarjetas de características con iconos de Lucide. Cada elección está bien por separado. Juntas transmiten "nadie decidió nada", y los visitantes lo perciben de inmediato.

Las personas que diseñan profesionalmente no evitan estas cosas porque una regla lo diga. Las evitan porque parten del sujeto (el negocio, el contenido, la audiencia) y cada elección se deriva de ahí. Tu trabajo es hacer lo mismo. La lista de prohibiciones de abajo es una red de seguridad, no el método.

El proceso

1. Escribe un brief de diseño antes de cualquier código

Dedica unas frases a esto, ya sea en tu razonamiento o mostrándoselas al usuario si el alcance es grande. Completa:

• Sujeto: ¿qué es, para quién es, qué necesitan hacer en la página?
• Carácter: tres adjetivos específicos de este sujeto. "Moderno, limpio, elegante" describe todo, así que no cuenta. Algo como "polvoriento, cálido, ligeramente nerd" para una librería de segunda mano, o "clínico, calmado, exacto" para un laboratorio.
• Una referencia del mundo real: una tradición de diseño física o histórica de la que la página toma prestado. Ejemplos: un horario de tren, un póster suizo de los 70, un paquete de semillas, una etiqueta de museo, un catálogo de hardware, la portada de un periódico, un fanzine, un menú de restaurante, un cuaderno de campo, un manual de software antiguo, una funda de disco. Elige basándote en el sujeto, no uses siempre la misma por defecto.
• Paleta: 3–5 valores hex reales, y de dónde vienen (el material del producto, la marca, una foto, la referencia anterior).
• Nicho y tipo: nombra el nicho (panadería, bufete de abogados, herramienta de desarrollo, gimnasio, boda...), luego elige las fuentes de la fila de ese nicho en references/fonts-by-niche.md, seleccionando la opción que coincida con tus tres adjetivos. Escribe una línea sobre por qué encaja ("Alfa Slab One: parece el letrero pintado en la pared de una cervecería"). Si no puedes escribir esa línea, aún no has elegido.
• Un detalle distintivo: un único movimiento memorable que pertenezca solo a este sitio. Por ejemplo, precios escritos como una pizarra a mano, números de sección en el margen como un documento legal, una cuadrícula pautada como papel cuadriculado, una foto usada a sangre completa y sin recortar.

Si el usuario ya te ha dado una marca, colores, fuentes o una referencia, esos ganan. Construye el brief a partir de ellos.

2. Construye desde el contenido hacia afuera

• Usa contenido real cuando lo tengas. Cuando no, escribe un marcador de posición específico y plausible para este sujeto (nombres de producto que suenen reales, números que se sientan reales, una dirección creíble), no relleno de marketing genérico.
• Deja que el contenido decida la disposición. Un menú quiere columnas y guías de puntos. Un portafolio quiere imágenes grandes y poco adorno. Un sitio de documentación quiere una barra lateral y texto denso. No vuelques cada sujeto en la misma plantilla de página de aterrizaje.
• Varía la estructura de las secciones. Los sitios reales tienen una sección de texto larga, una tabla densa, una imagen que rompe la cuadrícula. No repiten "encabezado + subencabezado + 3 tarjetas" ocho veces.

3. Audita antes de entregar

Revisa tu resultado contra references/slop-catalog.md (léelo la primera vez que uses esta habilidad en una sesión; es la lista completa con razones y alternativas). Si el proyecto está en disco y Node está disponible, ejecuta también el escáner:

node <ruta-de-la-habilidad>/scripts/slop-check.js <archivo-o-carpeta>

Marca las señales comunes (degradados, sombras brillantes, fuentes sobreutilizadas, emojis de estrellas, texto de moda) con archivo y línea. No cada acierto es incorrecto. Un degradado en un mapa del tiempo o una fuente que el usuario solicitó explícitamente está bien. Arregla cada acierto o mantenlo a propósito con una razón.

La lista corta de prohibiciones

Estas son las señales más evidentes. Evítalas a menos que el usuario las pida o que la marca realmente las requiera. El catálogo tiene la lista completa.

Color

• Degradados de púrpura / violeta / índigo / azul / rosa, en fondos, botones, bordes o texto
• Texto con degradado (background-clip: text) en encabezados
• Acentos neón (cian eléctrico, magenta, lima ácida) sobre fondos casi negros
• "Orbes" de color borrosos, auroras o manchas de degradado de malla detrás del héroe
• La paleta por defecto de Tailwind usada tal cual (indigo-600, slate-900, violet-500) como colores de marca

Superficies y efectos

• Sombras de brillo coloreadas (box-shadow: 0 0 40px rgba(139,92,246,.5)) y shadow-2xl en todo
• Efecto de vidrio: backdrop-blur con rellenos blancos translúcidos y border-white/10
• Cada elemento en su propia tarjeta redondeada, con el mismo radio grande (rounded-2xl/3xl) en todas partes
• Patrones de fondo de puntos o cuadrícula con una máscara de desvanecimiento radial
• Bordes con degradado animado, barridos brillantes, líneas de "haz", foco que sigue al cursor
• Cada tarjeta elevándose al pasar el ratón (translateY(-4px) + sombra más grande)

Tipografía

• Inter, Poppins, Montserrat, Plus Jakarta Sans, DM Sans, Outfit, Sora, Manrope, Space Grotesk, Geist o Instrument Serif elegidos por reflejo. Son buenas fuentes. El problema es elegirlas sin una razón.
• Cualquier fuente que no encaje en el nicho, o el cliché obvio del nicho (consulta references/fonts-by-niche.md)
• Un titular de héroe con una palabra en degradado o en serifa cursiva ("Construye más rápido")
• Una etiqueta minúscula en mayúsculas con espaciado amplio ("ceja") sobre cada encabezado de sección
• Todo centrado

Disposición

• La plantilla: navegación fija → héroe centrado con una píldora "✨ Nuevo" → dos botones → Logotipos en escala de grises "Con la confianza de" → 3 tarjetas de características con iconos en cuadrados redondeados → banda de estadísticas → tarjetas de testimonio con 5 estrellas → 3 niveles de precios con el medio destacado → acordeón de preguntas frecuentes → banner CTA con degradado → pie de página de 4 columnas
• Rejillas tipo bento como la forma por defecto de mostrar características
• Una captura de pantalla de panel falsa, inclinada y con transformación de perspectiva

Contenido y texto

• Emojis como iconos o viñetas (🚀 ✨ ⚡ 💡 🔥), y el icono de estrellas para cualquier cosa "IA"
• "Desbloquea el poder de", "Acelera", "Eleva", "Sin fisuras", "Sin esfuerzo", "Revoluciona", "De última generación", "plataforma todo en uno", "construido para el futuro", "lleva X al siguiente nivel"
• Eslóganes tricolón: "Rápido. Simple. Potente."
• Estadísticas inventadas (10k+ usuarios, 99.9% de tiempo de actividad) y testimonios falsos ("Sarah J., CEO de TechCorp")

Animación

• Aparición al hacer scroll en cada elemento, escalonado
• Elementos flotantes/balanceantes, titulares de máquina de escribir, números que cuentan hacia arriba

Qué hacer en su lugar

Color. Empieza por los neutros, pero dales una temperatura (papel cálido #f4efe6, gris frío #e8eaec, tinta #1b1a17) en lugar de blanco puro #fff y slate de Tailwind. Añade un acento y úsalo con moderación, para enlaces, la acción principal y uno o dos destacados. Sácalo del sujeto: terracota para un estudio de cerámica, naranja de señal para una aplicación de tránsito, verde botella para una farmacia. Usa rellenos planos. Si un degradado realmente pertenece (un cielo, un mapa de calor), hazlo sutil y vinculado al significado.

Tipografía. Elige fuentes por nicho, nunca al azar o por costumbre. Pregunta qué podría haber impreso plausiblemente este negocio en su letrero, menú, etiqueta o membrete, y encuentra el tipo que coincida. Una cervecería y un bufete de abogados nunca deberían compartir una tipografía por accidente. Lee references/fonts-by-niche.md antes de elegir. Cubre unos 40 nichos con varias opciones cada uno, los clichés a los que la IA recurre en cada nicho (Orbitron para juegos, Playfair para lujo, Bebas + Montserrat para gimnasios), y fuentes para escrituras no latinas como hindi y tamil. La pila de fuentes del sistema (system-ui, -apple-system, "Segoe UI", sans-serif) es una opción legítima para herramientas y paneles. Una familia suele ser suficiente. Dos como máximo. Construye jerarquía con tamaño, peso y espaciado, y alinea el texto del cuerpo a la izquierda con una medida legible (~60–75 caracteres).

Superficies. Separa las cosas con espacios en blanco, reglas (1px solid en un neutro más oscuro) y cambios de fondo en lugar de sombras. Si usas una sombra, hazla pequeña, neutra y desplazada como la luz real (0 1px 2px rgb(0 0 0 / .08)). Elige un radio a propósito: 0 para editorial o industrial, 2–6px para la mayoría de las IU, completamente redondo solo para píldoras y avatares. No todo necesita un contenedor.

Disposición. Usa la asimetría: una columna de texto ancha con un margen estrecho, una imagen que salga de la cuadrícula, un héroe alineado a la izquierda. Deja que la densidad coincida con el contenido. Los precios pueden ser una tabla simple. Las características pueden ser una lista con frases en lugar de tarjetas. Omite secciones que el sujeto no necesite. Un sitio de panadería no necesita una banda de estadísticas.

Interacción. Subraya los enlaces. Los estados al pasar el ratón cambian de color o subrayado, no de posición. Da a los botones un estado de presionado/enfoque claro. Usa movimiento solo donde explique algo (un menú que se abre, un cambio de estado), y respeta prefers-reduced-motion.

Imaginología. Las fotos reales de lo que sea superan cualquier ilustración. Sin ellas, usa marcadores de posición honestos (un cuadro neutro etiquetado como "foto: fachada de la tienda, luz de la mañana") en lugar de manchas 3D de stock, personas isométricas o arte de IA. Los diagramas simples, mapas, fotos de producto y composiciones solo de texto se leen como humanos.

Texto. Di concretamente lo que hace la cosa, con las palabras sencillas que el propietario usaría en un mostrador. "Pan de masa madre fresco cada mañana desde las 7, cerrado los lunes" supera a "Experimenta la excelencia artesanal." Omite una estadística en lugar de inventarla.

No intercambies un cliché por otro

Cuando un valor por defecto está prohibido, la siguiente respuesta más común se convierte en el nuevo valor por defecto: Space Grotesk en lugar de Inter, verde azulado en lugar de púrpura, "brutalista" con un borde negro grueso y un resaltado amarillo en cada sitio. Si dos sujetos diferentes que diseñas terminan pareciéndose, estás trabajando desde una plantilla, no desde un brief. Vuelve al paso 1 y deja que el sujeto empuje más fuerte.

Cuando el usuario quiere el aspecto "prefabricado"

Algunos usuarios quieren el aspecto brillante de SaaS, o una marca es realmente púrpura con degradados. Sigue las instrucciones explícitas y las guías de marca. Ellas anulan esta habilidad. Aún puedes aplicar la restricción donde sea gratis: un degradado en lugar de cinco, texto real en lugar de palabras de moda, una combinación de fuentes deliberada.