joyeking/redesigned-portfolio

Habilidad de Rediseño

Cómo Funciona

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

1. Escaneo — Lee el código base. Identifica el framework, el método de estilo (Tailwind, CSS vainilla, styled-components, etc.) y los patrones de diseño actuales.
2. Diagnóstico — Revisa la auditoría a continuación. Enumera cada patrón genérico, punto débil y estado faltante que encuentres.
3. Corrección — Aplica mejoras específicas trabajando con el stack existente. No reescribas desde cero. Mejora lo que ya está.

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 con personalidad. Buenas opciones: Geist, Outfit, Cabinet Grotesk, Satoshi. Para proyectos editoriales/creativos, combina una fuente serif para encabezados con una sans-serif para el cuerpo.
• Los titulares carecen de presencia. Aumenta el tamaño del texto mostrado, ajusta el espaciado entre letras, reduce la altura de línea. Los titulares deben sentirse pesados e intencionales.
• El texto del cuerpo es demasiado ancho. Limita el ancho del párrafo a aproximadamente 65 caracteres. Aumenta la altura de línea para mejorar la legibilidad.
• 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 figuras tabulares (font-variant-numeric: tabular-nums) para interfaces con muchos datos.
• Faltan ajustes de espaciado entre letras. Usa seguimiento negativo para titulares grandes, seguimiento positivo para mayúsculas pequeñas o etiquetas.
• Subtítulos en mayúsculas en todas partes. Prueba con cursivas en minúsculas, oración en minúscula o versalitas en su lugar.
• Palabras huérfanas. Palabras solitarias al final de la última línea. Corrige con text-wrap: balance o text-wrap: pretty.

Color y Superficies

• Fondo #000000 puro. Reemplaza 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 supera a la variedad.
• Mezcla de grises cálidos y fríos. Mantente en 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" morada/azul. Esta es la huella dactilar de diseño de 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 de color (por ejemplo, sombra azul oscuro sobre un fondo azul) en lugar de sombras negras puras con baja opacidad.
• Diseño plano sin textura. Agrega 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 desvanecimientos lineales estándar de 45 grados.
• Dirección de iluminación inconsistente. Revisa todas las sombras para asegurarte de que sugieran una única fuente de luz consistente.
• Secciones oscuras aleatorias en una página en modo claro (o viceversa). Una sola sección de fondo oscuro que rompe una página por lo demás 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 vacías y planas sin profundidad visual. Las secciones que son solo texto sobre un fondo liso se sienten incompletas. Agrega imágenes de fondo de alta calidad (desenfocadas, superpuestas o enmascaradas), patrones sutiles o gradientes ambientales. Usa fuentes de marcador 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 sutil a ancho completo con baja opacidad añade presencia.

Maquetación

• 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. Esta es la maquetación de IA más genérica. Reemplázala con un zigzag de 2 columnas, cuadrícula asimétrica, desplazamiento horizontal o maquetación de mampostería.
• Usar height: 100vh para secciones de pantalla completa. Reemplázalo con min-height: 100dvh para evitar saltos de maquetación en navegadores móviles (error de viewport en iOS Safari).
• Matemáticas complejas de porcentajes en flexbox. Reemplázalas con CSS Grid para estructuras de varias columnas confiables.
• Sin contenedor de ancho máximo. Agrega un contenedor con restricción (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 mampostería cuando el contenido varíe en longitud.
• border-radius 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 colocan 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. Ajusta ópticamente — el relleno inferior a menudo necesita ser ligeramente mayor.
• El panel siempre tiene una barra lateral izquierda. Prueba con navegación superior, un menú de comando flotante o un panel plegable en su lugar.
• Falta de espacio en blanco. Duplica el espaciado. Deja que el diseño respire. Las maquetaciones densas funcionan para paneles de datos, no para páginas de marketing.
• Botones no alineados al fondo en grupos de tarjetas. Cuando las tarjetas tienen diferentes longitudes de contenido, los CTA terminan en alturas aleatorias. Fija los botones al fondo 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 encima de 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 base desalineadas hacen que la maquetación parezca rota.
• Alineación matemática que se ve ópticamente incorrecta. Centrar según las matemáticas no siempre se ve centrado al ojo. Los íconos junto al texto, los botones de reproducción en círculos o el texto en botones a menudo necesitan ajustes ópticos de 1-2px para sentirse correctos.

Interactividad y Estados

• Sin estados de hover en botones. Agrega cambio de fondo, ligera escala o traslación en hover.
• Sin retroalimentación de activo/presionado. Agrega un sutil scale(0.98) o translateY(1px) al presionar para simular un clic físico.
• Transiciones instantáneas con duración cero. Agrega transiciones suaves (200-300ms) a todos los elementos interactivos.
• Falta de anillo de enfoque. Asegura indicadores de enfoque visibles para la navegación por teclado. Este es un requisito de accesibilidad, no opcional.
• Sin estados de carga. Reemplaza los spinners circulares genéricos con loaders esqueléticos que coincidan con la forma de la maquetación.
• Sin estados vacíos. Un panel vacío que no muestra nada es una oportunidad perdida. Diseña una vista compuesta de "comenzar".
• Sin estados de error. Agrega mensajes de error claros e inline para formularios. No uses window.alert().
• Enlaces muertos. Botones que enlazan a #. Enlaza a destinos reales o deshabilítalos 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. Agrega scroll-behavior: smooth.
• Animaciones usando top, left, width, height. Cambia a transform y opacity para una animación suave acelerada por GPU.

Contenido

• Nombres genéricos como "Juan Pérez" o "María García". Usa nombres diversos y que suenen 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 como "Acme Corp", "Nexus", "SmartFlow". Inventa nombres de marca contextuales y creíbles.
• Clichés de copywriting de IA. Nunca uses "Eleva", "Sin fisuras", "Desata", "Next-Gen", "Revolucionario", "Adéntrate", "Tapiz" o "En el mundo de...". Escribe un lenguaje llano y específico.
• Signos de exclamación en mensajes de éxito. Elimínalos. Sé seguro, no ruidoso.
• Mensajes de error "¡Vaya!". Sé directo: "Conexión fallida. Inténtalo de nuevo."
• Voz pasiva. Usa voz activa: "No pudimos guardar tus cambios" en lugar de "Se cometieron errores".
• Todas las fechas de las publicaciones del 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 copia real.
• Título en mayúsculas en cada encabezado. Usa oración en minúscula en su lugar.

Patrones de Componentes

• Aspecto genérico de tarjeta (borde + sombra + fondo blanco). Elimina el borde, o usa solo color de fondo, o solo espaciado. Las tarjetas deben existir solo cuando la elevación comunique jerarquía.
• Siempre un botón relleno + un botón fantasma. Agrega enlaces de texto o estilos terciarios para reducir el ruido visual.
• Insignias "Nuevo" y "Beta" en forma de píldora. Prueba con insignias cuadradas, banderas o etiquetas de texto plano.
• Secciones FAQ con acordeón. Usa una lista lado a lado, ayuda buscable o divulgación progresiva inline.
• Carrusel de testimonios con 3 tarjetas y puntos. Reemplázalo con un muro de mampostería, publicaciones sociales incrustadas 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 con squircles o cuadrados redondeados para un aspecto menos genérico.
• El alternador claro/oscuro siempre es un interruptor 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 legalmente requeridos.

Iconografía

• Iconos de Lucide o Feather exclusivamente. Estos son la opción "predeterminada" de iconos de IA. 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 entre iconos. Revisa todos los iconos y estandariza a un solo peso de trazo.
• Falta de favicon. Incluye siempre un favicon de marca.
• Fotos de archivo "equipo diverso". Usa fotos reales del equipo, tomas espontáneas o un estilo de ilustración consistente en lugar de imágenes de archivo 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 estilo al sistema de estilo del proyecto.
• Anchuras en píxeles hardcodeadas. Usa unidades relativas (%, rem, em, max-width) para maquetaciones flexibles.
• Falta de texto alternativo en imágenes. Describe el contenido de la imagen para los lectores de pantalla. Nunca dejes alt="" o alt="imagen" en imágenes significativas.
• Valores arbitrarios de z-index 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 publicar.
• Alucinaciones de importación. Verifica que cada importación realmente exista en package.json o en las dependencias del proyecto.
• Falta de metaetiquetas. Agrega metaetiquetas <title>, description, og:image y de redes sociales adecuadas.

Omisiones Estratégicas (Lo que la IA Normalmente Olvida)

• Sin enlaces legales. Agrega 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 de "página no encontrada" útil y con marca.
• Sin validación de formularios. Agrega 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. Agrega un enlace de salto oculto.
• Sin consentimiento de cookies. Si es requerido por la jurisdicción, agrega 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:

Actualizaciones de Tipografía

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

Actualizaciones de Maquetación

• Cuadrícula rota / asimetría. Elementos que ignoran deliberadamente la estructura de columnas — superpuestos, saliéndose de la 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 adhieren y se apilan físicamente una sobre otra durante el desplazamiento.
• Desplazamiento de pantalla dividida. Dos mitades de la pantalla deslizándose en direcciones opuestas.

Actualizaciones 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 ligeros retrasos, combinando traslación en el eje Y con 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 desplazamiento. El contenido entra a través de máscaras expansivas, barridos o rutas SVG dibujadas vinculadas al progreso del desplazamiento.

Actualizaciones de Superficie

• Vidrio verdadero (glassmorphism). Ve más allá de backdrop-filter: blur. Agrega un borde interior de 1px y una sombra interior sutil para simular la refracción del borde.
• Bordes con foco. Bordes de tarjeta que se iluminan dinámicamente bajo el cursor.
• Superposiciones de grano y ruido. Una superposición fija, con pointer-events: none, con 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 mejora instantánea más grande, el riesgo más bajo
2. Limpieza de la paleta de colores — elimina colores que chocan o sobresaturados
3. Estados de hover y active — ma...