Mini proyecto - Diseño con IA - 2026
Este portfolio.
Cómo pasé de una web que ya no me representaba a un portfolio de Product Designer, diseñado y construido iterando con Claude.
El reto
Mi web contaba una historia distinta a la de mi CV y mi LinkedIn, y no explicaba cómo trabajo.
Qué hice
Redefinir el mensaje, documentar un design system desde el código y rediseñar la web sección a sección en un simulador.
Resultado
Una web con una sola narrativa, casos explicados y detalles propios, construida en Astro a partir del simulador sin rehacer el diseño.
01 - El punto de partida
Una web de otra etapa
Mi primera web venía de cuando estudiaba Comunicación Interactiva. Me presentaba como un perfil generalista de comunicación: redes sociales, páginas web y proyectos muy distintos entre sí.
Para entonces ya diseñaba producto a diario. La web no lo contaba.
02 - La primera versión
Un perfil técnico de UX/UI
En verano de 2026 la rehice desde cero para posicionarme como diseñadora UX/UI con criterio técnico. La publiqué en octubre.
- Un tema hijo de bloques en WordPress, con clases propias y nombres coherentes en todo el código.
- Estética monocroma: tipografía grande, mucho aire y una sola sección oscura.
- Proyectos de clientes enlazados a sus webs en producción.
- Trabajo con IA: estrategia y copy con Claude, implementación con Claude Code.
UX/UI Designer - Product Developer
Diseño UX/UI con criterio técnico
03 - Por qué rehacerla
Mi perfil había cambiado
Mi rol en la empresa creció y moví mi CV y mi LinkedIn a Product Designer. La web tenía que contar lo mismo.
- Los proyectos eran enlaces, no casos: no se veía qué había decidido yo.
- La página era un scroll plano, con todas las secciones al mismo ritmo.
- Algunos textos sobrevendían o no los podía defender en una entrevista.
04 - El método
Diseñar en un simulador
En lugar de tocar la web en producción, la rediseñé en una réplica exacta con mis propios componentes, con vista de escritorio y de móvil.
- Design systemDocumentado desde el código del tema, con sus tokens y componentes.
- SimuladorRéplica de la web donde iteré sección a sección con Claude.
- AprobaciónNingún cambio entra en el design system sin que yo lo acepte.
- TraspasoCon el diseño cerrado, Claude construyó la web en Astro a partir del simulador y del design system.
05 - Qué cambió
Antes y ahora
| Primera versión | Ahora | |
|---|---|---|
| Posicionamiento | UX/UI Designer y Product Developer | Product Designer |
| Color | Monocromo | Monocromo con un naranja de acento |
| Proyectos | Enlaces a webs de clientes | Casos con reto, qué hice y resultado |
| Ritmo | Scroll vertical continuo | Capítulos y un lienzo horizontal |
| Proceso | No aparecía | Seis pasos, del problema a la implementación |
| Plataforma | WordPress con un tema hijo de bloques | Web estática en Astro |
| Detalles | Animaciones de entrada | Intro, cursor de Figma y Pixel |
06 - Lo que quité
Menos, pero mejor
Tan importante como lo que añadí fue lo que descarté por el camino, para que la web no se cargara.
- El emoji de saludo del titular: el cursor de Figma ya saluda.
- El subrayado del titular: competía con la selección de Figma.
- Las líneas naranjas al pasar el ratón: demasiado ruido.
- La tipografía monoespaciada en las etiquetas: daba un aire genérico.
- Frases que no podía defender en una entrevista.
07 - Qué aprendí
La web es un producto más
La traté como cualquier producto: primero el problema y el mensaje, después el diseño y por último la implementación. La IA me permitió probar muchas ideas rápido, pero cada decisión de qué se queda y qué se va la tomé yo.
También cambié la plataforma. Una web que solo edito yo, y siempre con Claude, no necesitaba un gestor de contenidos. En Astro es más rápida, más fácil de mantener y su código está en mi GitHub.