leonxlnx/taste-skill

Habilidad de Rediseño

Cómo Funciona

Cuando se aplica a un proyecto existente, sigue esta secuencia:

1. Escanear — Lee el código base. Identifica el framework, el método de estilizado (Tailwind, CSS vanilla, styled-components, etc.) y los patrones de diseño actuales.
2. Diagnosticar — Revisa la auditoría a continuación. Enumera todos los patrones genéricos, puntos débiles y estados faltantes que encuentres.
3. Corregir — Aplica mejoras específicas trabajando con el stack existente. No reescribas desde cero. Mejora lo que ya está ahí.

Auditoría de Diseño

Tipografía

Verifica estos problemas y corrígelos:

• Fuentes predeterminadas del navegador o Inter en todas partes. Reemplázalas con una fuente que tenga carácter. Buenas opciones: Geist, Outfit, Cabinet Grotesk, Satoshi. Para proyectos editoriales/creativos, combina un encabezado serif con un cuerpo sans-serif.
• Los titulares carecen de presencia. Aumenta el tamaño para texto de exhibición, ajusta el espaciado entre letras, reduce la altura de línea. Los titulares deben sentirse pesados e intencionados.
• El texto del cuerpo es demasiado ancho. Limita el ancho del párrafo a aproximadamente 65 caracteres. Aumenta la altura de línea para facilitar la lectura.
• Solo se usan los pesos Regular (400) y Negrita (700). Introduce Medium (500) y SemiBold (600) para una jerarquía más sutil.
• Números en fuente proporcional. Usa una fuente monoespaciada o habilita cifras tabulares (font-variant-numeric: tabular-nums) para interfaces con muchos datos.
• Faltan ajustes de espaciado entre letras. Usa tracking negativo para titulares grandes y tracking positivo para etiquetas o textos en mayúsculas pequeñas.
• Subtítulos en mayúsculas en todas partes. Prueba itálicas en minúsculas, mayúscula inicial o versalitas.
• Palabras huérfanas. Palabras solitarias al final de la última línea. Corrígelo con text-wrap: balance o text-wrap: pretty.

Color y Superficies

• Fondo puro #000000. Reemplázalo con negro apagado, carbón oscuro o tono oscuro (#0a0a0a, #121212 o un azul marino oscuro).
• Colores de acento sobresaturados. Mantén la saturación por debajo del 80%. Desatura los acentos para que se mezclen con los neutros en lugar de gritar.
• Más de un color de acento. Elige uno. Elimina el resto. La consistencia vence a la variedad.
• Mezcla de grises cálidos y fríos. Quédate con una familia de grises. Tiñe todos los grises con un tono consistente (cálido o frío, no ambos).
• Estética de "gradiente IA" morado/azul. Esta es la huella dactilar de diseño IA más común. Reemplázala con bases neutras y un único acento considerado.
• box-shadow genérico. Tiñe las sombras para que coincidan con el tono del fondo. Usa sombras coloreadas (por ejemplo, sombra azul oscuro sobre un fondo azul) en lugar de negro puro con baja opacidad.
• Diseño plano sin textura. Añade ruido sutil, grano o micropatrones a los fondos. Los vectores planos puros se sienten estériles.
• Gradientes perfectamente uniformes. Rompe la uniformidad con gradientes radiales, superposiciones de ruido o gradientes de malla en lugar de los degradados lineales estándar de 45 grados.
• Dirección de iluminación inconsistente. Audita todas las sombras para asegurarte de que sugieran una fuente de luz única y consistente.
• Secciones oscuras aleatorias en una página de modo claro (o viceversa). Una sola sección de fondo oscuro que rompe una página clara parece un error de copia y pega. O comprométete con un modo oscuro completo o mantén un tono de fondo consistente en toda la página. Si se necesita contraste, usa un tono ligeramente más oscuro de la misma paleta, no un salto repentino a #111 en medio de una página crema.
• Secciones planas y vacías sin profundidad visual. Las secciones que son solo texto sobre un fondo liso se sienten inacabadas. Añade imágenes de fondo de alta calidad (desenfocadas, superpuestas o enmascaradas), patrones sutiles o gradientes ambientales. Usa fuentes de marcadores de posición confiables como https://picsum.photos/seed/{nombre}/1920/1080 cuando no haya activos reales disponibles. Experimenta con imágenes de fondo detrás de secciones de héroe, bloques de características o CTAs; incluso una foto de ancho completo a baja opacidad añade presencia.

Diseño

• Todo centrado y simétrico. Rompe la simetría con márgenes desplazados, relaciones de aspecto mixtas o encabezados alineados a la izquierda sobre contenido centrado.
• Tres columnas iguales de tarjetas como fila de características. Este es el diseño IA más genérico. Reemplázalo con un zigzag de 2 columnas, cuadrícula asimétrica, desplazamiento horizontal o diseño masonry.
• Usar height: 100vh para secciones de pantalla completa. Reemplázalo con min-height: 100dvh para evitar saltos de diseño en navegadores móviles (error de viewport en iOS Safari).
• Matemáticas complejas de porcentajes con flexbox. Reemplázalo con CSS Grid para estructuras de múltiples columnas confiables.
• Sin contenedor de ancho máximo. Añade una restricción de contenedor (alrededor de 1200-1440px) con márgenes automáticos para que el contenido no se estire de borde a borde en pantallas anchas.
• Tarjetas de igual altura forzadas por flexbox. Permite alturas variables o usa masonry cuando el contenido varíe en longitud.
• Radio de borde uniforme en todo. Varía el radio: más ajustado en elementos internos, más suave en contenedores.
• Sin superposición ni profundidad. Los elementos se sientan planos uno al lado del otro. Usa márgenes negativos para crear capas y profundidad visual.
• Relleno vertical simétrico. El relleno superior e inferior siempre son idénticos. Ajústalo ópticamente: el relleno inferior a menudo necesita ser ligeramente mayor.
• El panel siempre tiene una barra lateral izquierda. Prueba navegación superior, un menú de comandos flotante o un panel plegable.
• Falta de espacio en blanco. Duplica el espaciado. Deja que el diseño respire. Los diseños densos funcionan para paneles de datos, no para páginas de marketing.
• Botones no alineados en la parte inferior en grupos de tarjetas. Cuando las tarjetas tienen diferentes longitudes de contenido, los CTAs terminan a alturas aleatorias. Fija los botones en la parte inferior de cada tarjeta para que formen una línea horizontal limpia independientemente del contenido superior.
• Listas de características que comienzan en diferentes posiciones verticales. En tablas de precios o tarjetas de comparación, la lista de características debe comenzar en la misma posición Y en todas las columnas. Usa un espaciado consistente sobre la lista o bloques de título/precio de altura fija.
• Ritmo vertical inconsistente en elementos uno al lado del otro. Al colocar tarjetas, columnas o paneles uno al lado del otro, alinea los elementos compartidos (títulos, descripciones, precios, botones) en todos los elementos. Las líneas de base desalineadas hacen que el diseño se vea roto.
• Alineación matemática que se ve ópticamente incorrecta. Centrar según las matemáticas no siempre se ve centrado al ojo. Los iconos junto al texto, los botones de reproducción en círculos o el texto en botones a menudo necesitan ajustes ópticos de 1-2 px para sentirse bien.

Interactividad y Estados

• Sin estados de hover en los botones. Añade cambio de fondo, escala ligera o traslación al pasar el ratón.
• Sin respuesta activa/presionada. Añade un sutil scale(0.98) o translateY(1px) al presionar para simular un clic físico.
• Transiciones instantáneas con duración cero. Añade transiciones suaves (200-300ms) a todos los elementos interactivos.
• Falta el anillo de foco. Asegura indicadores de foco visibles para la navegación por teclado. Esto es un requisito de accesibilidad, no opcional.
• Sin estados de carga. Reemplaza los spinners circulares genéricos con esqueletos de carga que coincidan con la forma del diseño.
• Sin estados vacíos. Un panel vacío que no muestra nada es una oportunidad perdida. Diseña una vista de "primeros pasos" compuesta.
• Sin estados de error. Añade mensajes de error claros e inline para formularios. No uses window.alert().
• Enlaces muertos. Botones que enlazan a #. O enlaza a destinos reales o desactívalos visualmente.
• Sin indicación de la página actual en la navegación. Estiliza el enlace de navegación activo de manera diferente para que los usuarios sepan dónde están.
• Saltos de desplazamiento. Los clics en anclas saltan instantáneamente. Añade scroll-behavior: smooth.
• Animaciones que usan top, left, width, height. Cambia a transform y opacity para una animación suave y acelerada por GPU.

Contenido

• Nombres genéricos como "Juan Pérez" o "María García". Usa nombres diversos y realistas.
• Números redondos falsos como 99.99%, 50%, $100.00. Usa datos orgánicos y desordenados: 47.2%, $99.00, +1 (312) 847-1928.
• Nombres de empresas de marcador de posición como "Acme Corp", "Nexus", "SmartFlow". Inventa nombres de marca contextuales y creíbles.
• Clichés de redacción de IA. Nunca uses "Elevar", "Sin fisuras", "Libera", "Próxima generación", "Revolucionario", "Profundizar", "Tapiz" o "En el mundo de...". Escribe lenguaje llano y específico.
• Signos de exclamación en mensajes de éxito. Elimínalos. Sé seguro, no ruidoso.
• Mensajes de error con "¡Vaya!". Sé directo: "Conexión fallida. Por favor, inténtalo de nuevo."
• Voz pasiva. Usa voz activa: "No pudimos guardar tus cambios" en lugar de "Se cometieron errores".
• Todas las fechas de publicaciones de blog idénticas. Aleatoriza las fechas para que parezcan reales.
• La misma imagen de avatar para múltiples usuarios. Usa activos únicos para cada persona distinta.
• Lorem Ipsum. Nunca uses texto de marcador de posición en latín. Escribe un borrador de texto real.
• Mayúscula Inicial En Cada Encabezado. Usa mayúscula inicial solo en la primera palabra.

Patrones de Componentes

• Aspecto de tarjeta genérico (borde + sombra + fondo blanco). Elimina el borde, o usa solo color de fondo, o usa solo espaciado. Las tarjetas deben existir solo cuando la elevación comunique jerarquía.
• Siempre un botón relleno + un botón fantasma. Añade enlaces de texto o estilos terciarios para reducir el ruido visual.
• Insignias en forma de píldora "Nuevo" y "Beta". Prueba insignias cuadradas, banderas o etiquetas de texto plano.
• Secciones de preguntas frecuentes en acordeón. Usa una lista lado a lado, ayuda buscable o divulgación progresiva inline.
• Carrusel de 3 tarjetas de testimonios con puntos. Reemplázalo con un muro masonry, publicaciones sociales integradas o una cita rotativa única.
• Tabla de precios con 3 torres. Destaca el nivel recomendado con color y énfasis, no solo con altura extra.
• Modales para todo. Usa edición inline, paneles deslizables o secciones expandibles en lugar de ventanas emergentes para acciones simples.
• Círculos de avatar exclusivamente. Prueba squircales o cuadrados redondeados para un aspecto menos genérico.
• El interruptor de modo claro/oscuro siempre es un sol/luna. Usa un menú desplegable, detección de preferencia del sistema o intégralo en la configuración.
• Granja de enlaces en el pie de página con 4 columnas. Simplifica. Concéntrate en las rutas de navegación principales y los enlaces requeridos legalmente.

Iconografía

• Iconos de Lucide o Feather exclusivamente. Estas son la opción de iconos IA "predeterminada". Usa Phosphor, Heroicons o un conjunto personalizado para diferenciarte.
• Cohete para "Lanzar", escudo para "Seguridad". Reemplaza las metáforas cliché con iconos menos obvios (rayo, huella dactilar, chispa, bóveda).
• Grosor de trazo inconsistente en los iconos. Audita todos los iconos y estandariza a un peso de trazo.
• Falta el favicon. Incluye siempre un favicon con la marca.
• Fotos de "equipo diverso" de stock. Usa fotos reales del equipo, tomas espontáneas o un estilo de ilustración consistente en lugar de imágenes de stock extrañas.

Calidad del Código

• Sopa de divs. Usa HTML semántico: <nav>, <main>, <article>, <aside>, <section>.
• Estilos inline mezclados con clases CSS. Mueve todo el estilizado al sistema de estilizado del proyecto.
• Anchos en píxeles codificados. Usa unidades relativas (%, rem, em, max-width) para diseños flexibles.
• Falta texto alternativo en imágenes. Describe el contenido de la imagen para lectores de pantalla. Nunca dejes alt="" o alt="imagen" en imágenes significativas.
• Valores de z-index arbitrarios como 9999. Establece una escala de z-index limpia en el tema/variables.
• Código muerto comentado. Elimina todos los artefactos de depuración antes de enviar.
• Importaciones alucinadas. Verifica que cada importación realmente exista en package.json o las dependencias del proyecto.
• Faltan metaetiquetas. Añade etiquetas meta adecuadas <title>, description, og:image y para compartir en redes sociales.

Omisiones Estratégicas (Lo que la IA Suele Olvidar)

• Sin enlaces legales. Añade enlaces a la política de privacidad y términos de servicio en el pie de página.
• Sin navegación "atrás". Callejones sin salida en los flujos de usuario. Cada página necesita una forma de volver.
• Sin página 404 personalizada. Diseña una experiencia útil y con marca de "página no encontrada".
• Sin validación de formularios. Añade validación del lado del cliente para correos electrónicos, campos obligatorios y comprobaciones de formato.
• Sin enlace "saltar al contenido". Esencial para usuarios de teclado. Añade un enlace de salto oculto.
• Sin consentimiento de cookies. Si lo requiere la jurisdicción, añade un banner de consentimiento compatible.

Técnicas de Actualización

Al actualizar un proyecto, utiliza estas técnicas de alto impacto para reemplazar patrones genéricos:

Mejoras de Tipografía

• Animación de fuente variable. Interpola el peso o el ancho al hacer scroll o hover para un texto que se sienta vivo.
• Transiciones de contorno a relleno. El texto comienza como un contorno de trazo y se llena de color al entrar en scroll o al interactuar.
• Revelaciones con máscara de texto. Tipografía grande que actúa como una ventana a video o imágenes animadas detrás.

Mejoras de Diseño

• Cuadrícula rota / asimetría. Elementos que ignoran deliberadamente la estructura de columnas: superpuestos, sangrados fuera de pantalla o desplazados con aleatoriedad calculada.
• Maximización del espacio en blanco. Uso agresivo del espacio negativo para forzar el enfoque en un solo elemento.
• Pilas de tarjetas con paralaje. Secciones que se fijan y se apilan físicamente unas sobre otras durante el scroll.
• Desplazamiento de pantalla dividida. Dos mitades de la pantalla se deslizan en direcciones opuestas.

Mejoras de Movimiento

• Desplazamiento suave con inercia. Desacopla el desplazamiento de los valores predeterminados del navegador para una sensación más pesada y cinematográfica.
• Entrada escalonada. Los elementos entran en cascada con pequeños retrasos, combinando la traslación en el eje Y con un desvanecimiento de opacidad. Nunca montes todo a la vez.
• Física de resorte. Reemplaza la interpolación lineal con movimiento basado en resortes para una sensación natural y con peso en todos los elementos interactivos.
• Revelaciones impulsadas por scroll. El contenido entra a través de máscaras en expansión, cortinillas o trazados SVG dibujados vinculados al progreso del scroll.

Mejoras de Superficie

• Vidrio verdadero. Ve más allá de backdrop-filter: blur. Añade un borde interior de 1px y una sombra interior sutil para simular la refracción del borde.
• Bordes reflectantes. Los bordes de las tarjetas se iluminan dinámicamente bajo el cursor.
• Superposiciones de grano y ruido. Una superposición fija con pointer-events: none y ruido sutil para romper la planitud digital.
• Sombras coloreadas y teñidas. Sombras que llevan el tono del fondo en lugar de usar negro genérico.

Prioridad de Corrección

Aplica los cambios en este orden para obtener el máximo impacto visual con el mínimo riesgo:

1. Cambio de fuente — la mayor mejora instantánea, el menor riesgo
2. Limpieza de paleta de colores — elimina colores que chocan o sobresaturados
3. Estados de hover y active — mejora inmediata de la interactividad
4. Alineación del diseño — corrige espacios en blanco, centrado y problemas de cuadrícula
5. Reemplazo de contenido genérico — nombres, números, texto de marcador de posición
6. Estados de componentes — carga, vacío, error, foco
7. Mejoras de superficie — sombras, textura, vidrio
8. Animación y movimiento — entrada escalonada, física de resorte, revelaciones de scroll