Este portafolio
El sistema visual de este sitio, y cómo lo produje trabajando con IA.
Empecé cargando diez años de trabajo: siete proyectos, notas, entregables y todo lo que recordaba de cada uno. Con eso la IA me ayudó a ordenar el contenido, a convertir un moodboard en una guía visual y a producir el sitio entero, incluidas las imágenes de los case studies. Abajo está el sistema que salió de ahí, corriendo en esta misma página, y las decisiones donde el criterio tuvo que ser mío.
Cómo se hizo
Hubo un proceso de UX detrás, con su contenido y su arquitectura, pero no es lo que esta página viene a mostrar. Resumido en cinco pasos:
01
Moodboard
Referencias hasta tener clara la dirección: editorial, casi monocromática, sin adornos.
02
Brief
Qué debía comunicar y qué no. Escrito antes de pedirle nada a nadie.
03
Guía visual
Producida a partir de ese brief y ajustada en varias vueltas hasta cerrarla.
04
Construcción
20 páginas en HTML y CSS, sin framework y sin paso de build.
05
Auditoría
Contraste medido, foco visible, respeto por movimiento reducido.
Cómo trabajé con la IA
Fueron tres herramientas con trabajos separados. ChatGPT para ordenar el contenido, definir la estructura y preparar los prompts. Claude para la guía visual y las imágenes de los case studies. Claude Code para construir el sitio, escribir el HTML y el CSS y sostener las iteraciones que siguen hasta hoy.
Ningún pedido fue una conversación abierta. Todos llevaban la misma estructura.
Contexto
Qué es el sitio, a quién le habla y en qué punto estamos.
Insumos
La guía visual completa, adjunta. Nunca resumida: si el estándar no viaja con el pedido, no se puede exigir.
Tarea
Una sola cosa, acotada a una página o a una pieza.
Formato
Qué devolver exactamente: HTML completo, o una imagen con proporciones definidas.
Qué no hacer
No cambies los estilos. No reinterpretes la guía. No inventes datos.
Lo único que cambiaba entre un pedido y otro era la tarea. La última parte evitó más problemas que las otras cuatro juntas.
Decisión — el límite va dentro del prompt
Le pedí
Conectar varias páginas HTML sueltas y unificar componentes, responsive y accesibilidad.
Me devolvió
Un sitio conectado, con los componentes normalizados y la dirección visual intacta.
Yo decidí
Escribir en el mismo pedido: «sin cambios visuales significativos; debe mantenerse alineado con la guía de estilos actual.» Un pase de integración es justo cuando una IA aprovecha para rediseñar mejorando, y deshacer eso cuesta más que las inconsistencias que venía a arreglar.
El punto de partida
Seis referencias y una instrucción: «te voy a compartir algunas referencias de lo que busco; con base en ellas, desarrolla dos propuestas.» Sin brief y sin adjetivos, para ver qué leía la IA en ellas antes de contaminarla con mis palabras. Las seis no coincidían entre sí, que es justamente donde aparece la decisión.
Elegida
Editorial monocromo
Display condensado en mayúsculas, cuerpo en Inter, un solo acento cálido.
Descartada
Estudio cálido
Serif itálico, beige y gris cálido con un verde apagado, retrato grande.
Elegí la primera, y con eso perdí la dirección más cálida. Esa calidez tuvo que volver por otro lado, y volvió por el fondo: hueso en vez de blanco puro.
De la referencia al sistema
A carbón cálido. El negro absoluto vibra en textos largos.
A clay apagado. El original competía con el contenido en cada enlace.
Una referencia se mira unos segundos; una paleta tiene que aguantar veinte minutos de lectura.
Color
Seis tokens con un trabajo cada uno. Si un color no tiene algo específico que hacer, no se usa.
Cada acento tiene dos versiones, una para rellenar y otra para escribir encima. El clay puro da 3.47:1, que alcanza para un botón y no para texto, así que existe el clay oscuro a 5.68:1.
Decisión — medir en vez de mirar
Le pedí
Un gris cálido para metadatos y pies de foto, coherente con la paleta.
Me devolvió
#8a8474. Se veía bien sobre el fondo hueso.
Yo decidí
Medirlo: daba 3.5:1 y WCAG AA pide 4.5:1. Lo cambié por #787160, que da 4.58:1 con la misma temperatura. Son tres caracteres y no se nota, salvo si se mide.
Tipografía
Dos familias. Oswald condensado en mayúsculas sólo para el nombre del proyecto y las etiquetas de proceso; Inter para absolutamente todo lo demás. La escala completa, renderizada:
Coca-Cola FEMSA
Oswald 600
clamp(26–44px) · 1.1
Contexto del proyecto
Inter 600
30px · 1.25
Entender el contexto de datos
Inter 600
21px
Decisiones clave
Inter 600
17px
El cuerpo se limita a 680 px, unos 78 caracteres por línea. El contenedor llega a 1120, pero el texto corrido nunca.
Inter 400
16px · 1.65 · máx 680px
Texto de apoyo dentro de tarjetas y listas.
Inter 400
14px
Los pies de foto explican por qué importa el artefacto, no qué es.
Inter 400 itálica
13px
Etiqueta de sección
Inter 600
11px · 0.04em
La regla que sostiene el sistema es dónde no se usa el display. Un condensado en mayúsculas repetido en cada subtítulo compite con el contenido y arruina el escaneo.
Decisión — hacerla volver sobre sus pasos
Le pedí
Rehacer la guía incorporando mi contexto profesional.
Me devolvió
Un cambio de dirección: descartó el display condensado del moodboard y propuso un serif editorial, porque Oswald le sonaba a «marca o branding gritón».
Yo decidí
Revertirlo: «prefiero mantener el estilo de títulos grandes con tipografías como Anton / Oswald, ya que quiero que el diseño también refleje mis conocimientos de UI y mi criterio visual.» Daba por sentado que había que elegir entre parecer estratégica o parecer diseñadora. La guía se reescribió entera, y por eso el sitio se ve como se ve.
Ritmo vertical
No hay una escala de espaciado regular. Hay una regla de agrupamiento: el espacio de adentro siempre menor que el de afuera, que es lo que hace que una imagen y su pie se lean como una sola cosa.
72 / 44 px
44 / 30 px
14 / 10 px
En móvil todo se comprime, pero la proporción se conserva: 14 y 44 pasan a 10 y 30. Escalar todo por igual habría roto el agrupamiento justo donde más falta hace.
Componentes
No son capturas: son los componentes reales del sitio, corriendo aquí con el mismo CSS que usan los siete case studies.
Badges y etiquetas
Pills de proceso
Snapshot card
Industria
Banca / Productos de inversión
Impact card
Valor de negocio
Tres dashboards a la medida de cada nivel de decisión.
Problem statement
Problem statement
¿Cómo ayudamos a los usuarios a navegar datos complejos?
Callout de IA — el salvia, en su único uso permitido
Cómo usé la IA
Usé la IA para organizar los inputs de stakeholders y explorar formas de estructurar la información. Las decisiones finales fueron mías, basadas en criterios UX y en el feedback del cliente.
Before / after — mismo peso visual en los dos lados, para no sesgar la lectura
Antes
Entradas abiertas que generaban respuestas fallidas.
Después
Rutas estructuradas con salidas previsibles.
Testimonial
Stephanie ordena la ambigüedad antes de que se convierta en un problema de desarrollo.
Ejemplo de estructura · las citas reales viven en cada case study
El salvia aparece en un solo componente de todo el sistema. Repetir la misma fórmula en los siete casos convierte «uso IA» en un patrón reconocible en vez de una afirmación suelta.
Accesibilidad
La IA crea interfaces visualmente convincentes, aunque no necesariamente usables. Todo lo que explico a continuación se puede validar directamente en esta página.
Foco visible
Una sola regla para todo el sitio: contorno de 2 px en clay, separado 3 px del elemento. Presiona Tab y aparece.
El clay da 3.47:1 sobre el hueso y WCAG pide 3:1 para indicadores de foco. Pasa con poco margen, y el margen importa: si algún día oscurezco el fondo, ese contorno es lo primero que deja de cumplir.
Lo demás que está resuelto
- Un enlace para saltar al contenido, escondido fuera de pantalla, que aparece al recibir foco.
- Si el sistema pide movimiento reducido, el loader no existe y las transiciones caen a 0.01 ms.
- Las 94 imágenes tienen texto alternativo que describe qué muestra el artefacto, no «imagen de».
- El contraste de todo el texto está medido. Los números están más arriba.
El bug que encontré usando el sitio
Abrí el home desde mi celular, que estaba en modo oscuro, y la página se veía negra. Algunos navegadores móviles invierten los colores solos cuando el documento no declara qué esquema usa. Se arregla con una línea, color-scheme: light only, pero primero hay que verlo, y no apareció en ninguna auditoría sino porque abrí mi sitio en mi teléfono.
Y lo que no hice
- No hay modo oscuro, y es decisión, no olvido. La paleta está calibrada para lectura larga sobre fondo cálido, y duplicar tokens para invertirla daría dos sistemas mediocres en vez de uno bueno.
- El contorno de foco cumple AA con margen chico. Si alguna vez llevo el sitio a AAA, empieza por ahí.
- No corrí una prueba completa con lector de pantalla. El HTML es semántico y los landmarks están, pero eso es una expectativa, no una verificación.
Las imágenes de los case studies
Todas las imágenes de mis siete proyectos están generadas con IA. Casi todo mi trabajo está bajo NDA, y difuminar capturas deja una imagen que ya no dice nada. Preferí representar el producto en vez de taparlo, conservando la estructura y la decisión de diseño sin exponer un dato del cliente.
La regla que escribí para esto
Blur sobre los datos sensibles, nunca sobre la interfaz completa. Cuando el blur no alcanza, una representación simplificada. Y el badge «Bajo NDA» siempre en el mismo lugar.
El estilo tampoco es idéntico en los siete casos. Dentro de un proyecto las piezas comparten diseño para que se lean como una serie; entre proyectos cambia a propósito, porque son productos distintos y cada uno tiene su acento. Lo que no se mueve es el lenguaje gráfico.
Banco Falabella. Flujo guiado frente a solicitud abierta. El coral es el acento de este proyecto, no el del portafolio.
Telecom Personal Flow. Otro acento, la misma tipografía y las mismas cajas.
Mondelez. Aquí el color forma parte del contenido, porque el caso trata de legibilidad de datos.
Haz clic en cualquiera para verla en su tamaño real.
Costó trabajo. La IA genera cada pieza por separado y no recuerda las anteriores, así que aparecía un color fuera de paleta, un título con otro peso o una caja desbordada. Devolvía la imagen hasta que pertenecía a su serie.
Decisión — auditar todas, no parchear una
Le pedí
Las imágenes de uno de los case studies.
Me devolvió
Piezas con un acento naranja que no existe en la paleta.
Yo decidí
Revisar las diez del proyecto, no sólo la que tenía delante. Un color fuera de sistema casi nunca aparece una sola vez, y auditar el conjunto cuesta menos que descubrir la undécima en una entrevista.
Los detalles que cierran la experiencia
Lo último que entró, con el contenido ya completo. Ninguno de estos detalles ayuda a entender mi trabajo, así que ninguno bloqueó la publicación, pero son los que deciden si el sitio se siente terminado.
El problema: tocás EN y hay un instante en blanco antes de que llegue otra página.
El cambio de idioma
La píldora se desliza en 320 ms mientras los colores se intercambian, y la navegación arranca a los 280. La página cambia con la animación todavía en curso, así que el movimiento tapa la carga.
El JavaScript intercepta el clic para poder animar, pero debajo hay un enlace común: si el script no carga, el cambio de idioma igual funciona.
El problema: una animación de entrada que aparece en cada visita se convierte en un peaje.
El loader
Las iniciales en Oswald y una hairline que se llena en clay: una barra de progreso en su mínima expresión. Se ve una vez por sesión y por defecto ni siquiera existe, así que no hay destello que tapar.
SC
Stephanie Cacheo
El problema: los artefactos tienen mucho detalle y a ancho de lectura no se leen.
El lightbox
Cada imagen es un botón que la abre en grande, con foco visible, teclado y el pie incluido. El detalle está en el alcance: al pasar a la siguiente sólo se recorren las del mismo paso del proceso, así que nunca se termina en otra fase sin darse cuenta.
Intuit Dome, servida más chica de lo que se diseñó. Haz clic para verla en su tamaño real.
El problema: encontrar mi pestaña entre otras quince.
El favicon
Cuatro tamaños, y el que manda es el de 16 px. Ahí sólo sobreviven dos letras con mucho contraste, y eso decide el diseño de los otros tres.
16 px
32 px
180 px
512 pxÉste no es sobre usar el sitio, sino sobre lo que pasa cuando alguien pega el link.
La tarjeta para compartir
En LinkedIn o en un mensaje, la vista previa es la primera impresión y no la negocia nadie. Mismo sistema que el resto del sitio, con una versión por idioma.
La IA no puso las ideas ni la estructura, eso ya estaba. Lo que puso fue la forma de ejecutarlas cuando yo no sabía cómo. No sé de deploys ni de infraestructura y el sitio está publicado en Cloudflare igual. Tampoco habría llegado a este nivel de detalle de interfaz, ni a producir las imágenes de siete proyectos, en las semanas que tenía.
Es una herramienta más dentro de mi proceso, y este portafolio es el ejemplo de que sé usarla. Muchas veces la idea y la estructura ya están claras y lo que falta es el camino para llevarlas a cabo. Ahí es donde cambia algo real.
Stephanie Cacheo — Senior Product Designer / UX Lead