20 · Anti-Patterns
20 — Anti-Patterns
Sección titulada «20 — Anti-Patterns»Versión: 0.1 Última actualización: 2026-04-24
Este doc es una lista de rechazo explícito de los tells visuales de productos AI-default. Funciona como checklist antes de approve cualquier diseño.
Color anti-patterns
Sección titulada «Color anti-patterns»❌ Violeta neón como accent
Sección titulada «❌ Violeta neón como accent»Tell: #8b5cf6, #a78bfa, purple-500, violet-600
Por qué es malo: default de Tailwind/Vercel/Linear. Usar violeta neón en 2026 grita “esto es un AI SaaS wrapper que alguien montó en una semana”.
Nuestra alternativa: terracotta #d67a3c como primary accent.
❌ Gradientes purple → pink
Sección titulada «❌ Gradientes purple → pink»Tell: bg-gradient-to-r from-purple-500 to-pink-500
Por qué es malo: firma de Vercel. Todo SaaS 2023-2025 usa esto. Vacío de contenido.
Nuestra alternativa: colores planos o gradients monocromos muy sutiles (5-10% tint).
❌ Cyan/blue electric glow
Sección titulada «❌ Cyan/blue electric glow»Tell: #22d3ee con shadow-cyan-500/50
Por qué es malo: cyberpunk genérico, futurism vacío.
Nuestra alternativa: añil #6a7ab5 sin glow.
❌ Pure black #000
Sección titulada «❌ Pure black #000»Tell: bg-black, #000
Por qué es malo: crudo, frío, sin textura.
Nuestra alternativa: ink #1a1511 (black cálido con hint terracotta).
❌ Pure white #fff
Sección titulada «❌ Pure white #fff»Tell: bg-white, #fff
Por qué es malo: hospital, frío, sin calidez.
Nuestra alternativa: paper #f4ecdf (cream warm).
Typography anti-patterns
Sección titulada «Typography anti-patterns»❌ Inter en todo (especialmente Inter tight)
Sección titulada «❌ Inter en todo (especialmente Inter tight)»Tell: font-family: Inter, sans-serif en headings + body + code
Por qué es malo: default de startup template. Sin personalidad.
Nuestra alternativa: Fraunces (display serif) + Work Sans (body) + JetBrains Mono (code).
❌ System font stack puro
Sección titulada «❌ System font stack puro»Tell: font-family: -apple-system, BlinkMacSystemFont, sans-serif
Por qué es malo: dice “no pensé en tipografía”.
Nuestra alternativa: fonts web con fallback system ordenado.
❌ Headers UPPERCASE con letter-spacing NEGATIVO extremo
Sección titulada «❌ Headers UPPERCASE con letter-spacing NEGATIVO extremo»Tell: font-weight: 800; letter-spacing: -0.05em; text-transform: uppercase
Por qué es malo: cliché de marketing page 2020-2023.
Nuestra alternativa: Fraunces 600-700 con letter-spacing mínimo (-0.01em), case natural.
❌ Gradient text
Sección titulada «❌ Gradient text»Tell: bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent
Por qué es malo: firma de pitch deck tech. Ilegible, pretencioso.
Nuestra alternativa: text color plano del brand.
Layout anti-patterns
Sección titulada «Layout anti-patterns»❌ Bento grid con 8 cards de sizes random
Sección titulada «❌ Bento grid con 8 cards de sizes random»Tell: grid de cards de 3 tamaños sin jerarquía clara Por qué es malo: meme de landing pages 2023-2025. No aporta información. Nuestra alternativa: grid de tamaño uniforme O jerarquía clara con sizes intencionales.
❌ Glassmorphism everywhere
Sección titulada «❌ Glassmorphism everywhere»Tell: backdrop-blur-lg con bg-white/10 frosted
Por qué es malo: trend 2020-2022, muerto. Daña legibilidad.
Nuestra alternativa: backgrounds sólidos del brand palette.
❌ Dashboard Linear/Notion clone
Sección titulada «❌ Dashboard Linear/Notion clone»Tell: sidebar izquierda oscura + main content con cards redondeados + accent violet Por qué es malo: todo dashboard se ve igual. Identidad cero. Nuestra alternativa: layout propio con typography-first y colors cálidos.
❌ Hero section con phone mockup grande
Sección titulada «❌ Hero section con phone mockup grande»Tell: título grande + phone flotante con screenshot de la app Por qué es malo: cliché de marketing SaaS. Nuestra alternativa: hero con typography serif + illustration custom editorial.
Component anti-patterns
Sección titulada «Component anti-patterns»❌ Rounded-full pill buttons
Sección titulada «❌ Rounded-full pill buttons»Tell: rounded-full en todos los botones
Por qué es malo: inhumanamente rounded, sabe a SaaS.
Nuestra alternativa: rounded-md (6px) para botones, rounded-sm (3-4px) para badges/inputs.
❌ Shadow glows coloridos
Sección titulada «❌ Shadow glows coloridos»Tell: shadow-lg shadow-purple-500/50
Por qué es malo: glow sin función, herencia de gaming UI.
Nuestra alternativa: shadows neutros (rgba(0,0,0,…)) y moderados.
❌ “Animate pulse” en todo loading
Sección titulada «❌ “Animate pulse” en todo loading»Tell: animate-pulse en skeletons, en dots, en todo
Por qué es malo: overused, no communica nada específico.
Nuestra alternativa: pulse SOLO para live state (recording, listening). Loading usa spinners simples.
❌ Hover scale 1.05
Sección titulada «❌ Hover scale 1.05»Tell: hover:scale-105 transition
Por qué es malo: bouncy sin propósito, se siente infantil.
Nuestra alternativa: hover con cambio de border color, background, o subtle brightness.
❌ Gradient fills en cards
Sección titulada «❌ Gradient fills en cards»Tell: bg-gradient-to-br from-purple-800 to-indigo-900
Por qué es malo: dice “no quise pensar en color sólido”.
Nuestra alternativa: background sólido del brand + subtle accent (left border, top stripe).
❌ Tooltip con animate-bounce
Sección titulada «❌ Tooltip con animate-bounce»Tell: animate-bounce en indicators
Por qué es malo: distrae, se siente low-quality.
Nuestra alternativa: tooltips estáticos con fade-in rápido.
Illustration anti-patterns
Sección titulada «Illustration anti-patterns»❌ Generic AI-generated illustrations purple-haze
Sección titulada «❌ Generic AI-generated illustrations purple-haze»Tell: Midjourney v4-v5 era ethereal, purple mood, depth blur, glow Por qué es malo: se ve inmediatamente “AI generated”, sin criterio humano. Nuestra alternativa: editorial flat mexicano moderno (ver doc 18).
❌ 3D renders tipo Spline
Sección titulada «❌ 3D renders tipo Spline»Tell: shapes 3D flotando con lighting realistic Por qué es malo: 2021-2023 trend, expensive computacionalmente, sin alma. Nuestra alternativa: ilustración flat 2D editorial.
❌ Cute corporate characters (tipo Notion/Alegria)
Sección titulada «❌ Cute corporate characters (tipo Notion/Alegria)»Tell: muñequitos genéricos en situations corporate Por qué es malo: homogeneizante, sin personalidad del brand. Nuestra alternativa: ilustración abstracta con símbolos funcionales.
❌ Stock icons de Freepik/Flaticon
Sección titulada «❌ Stock icons de Freepik/Flaticon»Tell: iconos SVG corporate blue con outlines 2px Por qué es malo: genéricos, sin coherencia con brand. Nuestra alternativa: icons custom o carefully selected free set que respete nuestra paleta.
❌ Emoji gigante como decoración
Sección titulada «❌ Emoji gigante como decoración»Tell: 🚀 a 64px en hero sin propósito Por qué es malo: infantil, sin carácter editorial. Nuestra alternativa: emoji SPARINGLY, solo donde clarifique (badges, status indicators).
Copy anti-patterns
Sección titulada «Copy anti-patterns»❌ Jerga corporativa inflada
Sección titulada «❌ Jerga corporativa inflada»Tells: “transformar”, “empoderar”, “reimaginar”, “sinergia”, “ecosistema holístico”, “disruptor” Por qué es malo: vacío de contenido, copy LinkedIn. Nuestra alternativa: verbos concretos (“aprende”, “construye”, “aplica”).
❌ “Unlock your potential” marketing
Sección titulada «❌ “Unlock your potential” marketing»Tells: “unlock”, “transform your X”, “revolutionize”, “game-changer” Por qué es malo: cliché motivacional, sin contenido. Nuestra alternativa: promesa concreta (“en 2 semanas tienes agent funcionando”).
❌ Título + subtítulo con todas abreviaturas
Sección titulada «❌ Título + subtítulo con todas abreviaturas»Tells: “The OS for X” / “AI for Y” / “The Modern Z” Por qué es malo: plantilla de Vercel hero. Nuestra alternativa: descripción específica y cálida.
❌ “Join thousands of satisfied users”
Sección titulada «❌ “Join thousands of satisfied users”»Tells: social proof vago sin números verificables Por qué es malo: deshonesto, falso, inútil. Nuestra alternativa: si hay testimonial real, mostrar con nombre completo y contexto; si no, omitir.
Interaction anti-patterns
Sección titulada «Interaction anti-patterns»❌ Infinite scroll automático
Sección titulada «❌ Infinite scroll automático»Tell: scroll triggers más contenido sin decisión del user Por qué es malo: dark pattern, roba tiempo. Nuestra alternativa: pagination explícita o “cargar más” button.
❌ Auto-play video con sonido
Sección titulada «❌ Auto-play video con sonido»Tell: video ruidoso al cargar la página Por qué es malo: intrusivo, legal risk. Nuestra alternativa: auto-play solo si el user ya hizo click en algo (como en nuestro audio player).
❌ Countdown timers / FOMO
Sección titulada «❌ Countdown timers / FOMO»Tell: “Solo quedan 3 spots!” con timer Por qué es malo: manipulación, low-trust. Nuestra alternativa: si hay escasez real, comunicarla honestamente sin drama.
❌ Newsletter popup después de 3 segundos
Sección titulada «❌ Newsletter popup después de 3 segundos»Tell: modal que interrumpe lectura con “subscribe!” Por qué es malo: hostil, interrumpe flow. Nuestra alternativa: CTAs naturales embedded en contenido, fin de artículo, footer.
Meta anti-patterns
Sección titulada «Meta anti-patterns»❌ “Powered by AI” labels
Sección titulada «❌ “Powered by AI” labels»Tell: badges de ”✨ AI powered” Por qué es malo: en 2026 ya no significa nada. Es como “cloud” en 2015. Nuestra alternativa: describir qué hace, no qué usa.
❌ Boast de LLM model usado
Sección titulada «❌ Boast de LLM model usado»Tell: “Built with GPT-4” en footer como selling point Por qué es malo: el modelo cambia. El valor debe ser el producto. Nuestra alternativa: enfocar en outcome, no en tech stack.
❌ Terms-of-service style “Get Started” CTAs
Sección titulada «❌ Terms-of-service style “Get Started” CTAs»Tell: Single button “Get Started →” como único CTA Por qué es malo: sin contexto de qué pasa al click. Nuestra alternativa: CTAs específicas (“Empezar Course B1”, “Ver catálogo completo”).
El test de los 5 anti-patterns
Sección titulada «El test de los 5 anti-patterns»Antes de approve cualquier design, preguntar:
- ¿Uso algún color purple/violet/pink neón como accent principal? → Si sí, cambiar.
- ¿Estoy usando Inter para todo? → Si sí, agregar Fraunces para display.
- ¿Hay rounded-full, glassmorphism, o shadow glow? → Si sí, remover.
- ¿Las ilustraciones tienen gradients smooth/glow/3D? → Si sí, regenerar con prompt stricto.
- ¿El copy usa “transformar”, “unlock”, “reimaginar”? → Si sí, reescribir.
Si pasa los 5, probablemente estamos bien. Si no, iteramos.
Cuando en duda
Sección titulada «Cuando en duda»La regla heurística: “¿Esto se ve como template default?”
- Si la respuesta es “sí, como 80% de AI SaaS” → regresar a diseño.
- Si la respuesta es “no, es distinto porque [razón concreta del brand]” → proceder.