Portafolio Luigui Calderin
Este portafolio no es solo el resultado, es también un proyecto en sí mismo. Documenta el proceso de diseño de mi carta de presentación profesional: desde la identidad visual hasta la migración entre plataformas, con IA como herramienta de apoyo en cada etapa.
01 - Identidad
IA como punto de partida, criterio como filtro
Los primeros bocetos fueron generados con Figma Make. La IA sirvió para explorar rápido, pero todo lo que quedó fue resultado de un proceso de edición con criterio propio: ajustar, reordenar, rediseñar y redefinir.
Figma Make con indicaciones para la construcción del portafolio
40% IA
La base visual del portafolio se construyó con Figma Make como herramienta generativa.
60% manual
Cada elemento fue ajustado, reordenado y redefinido con criterio personal y profesional.
02 - Sistema
Un design system para un portafolio propio
Montar un sistema de diseño para un portafolio de una sola persona puede sonar excesivo. Lo hice a propósito: era la forma de demostrar con hechos —no con palabras— cómo trabajo un sistema. Definí foundations, componentes, variables de color y modo dark, con la misma lógica que aplico en productos reales.
Foundations definidos para el portafolio
Componentes tipo Button
De variables a tokens
Para llegar a tokens, primero defino las variables primitivas —los valores base de color— y luego las semánticas, que asignan a cada valor un rol dentro del sistema. La buena práctica: mantener los estilos conectados a esas variables, de modo que un cambio en el valor base se propague solo a toda la interfaz.
Tokens primitivos de color — base del sistema
Tokens semánticos de color
Enlace de variables de color a estilos de color
Modo dark
No todos los portafolios definen modo dark. Establecer light y dark desde el sistema —y no como parche al final— garantizó que el cambio fuera coherente en toda la interfaz, cuidando el contraste y respetando la preferencia del usuario.
Home del portafolio en modo light y modo dark
Documentación de componentes
Documenté el componente Button —el más usado en cualquier sistema— siguiendo las convenciones de los design systems con los que he trabajado. Con un prompt preciso, Claude generó la estructura base en un frame; de ahí en adelante el trabajo fue refinar y corregir lo que la herramienta no resolvía por sí sola. Casi todo el sistema se construyó a mano; la documentación fue la excepción, y aun así con criterio claro sobre qué pedir y cómo evaluar el resultado.
Documentación del componente Button
03 - Construcción
De Figma a Webflow
Una base de HTML y CSS, sumada a experiencia con herramientas no-code, fue lo que me permitió construir a mano. Con el plugin Figma to Webflow transferí las variables directo, dejando fuentes, colores y medidas ya definidos. Para lo que pedía código —el toggle light/dark, animaciones y hover— usé Claude desde el MCP de Webflow, resolviendo cada necesidad técnica sin salir del flujo.
Espacio de trabajo del portafolio en Webflow
50% IA
Toggle light/dark, hover, microinteracciones y ajustes de texto, con IA como asistente.
50% manual
Estructura, contenedores, headings, páginas y el armado general.
Aunque el dominio migró a Framer, el portafolio sigue publicado en su dominio .webflow.io, donde puede verificarse el resultado de esta etapa. Puede verse aquí.
04 - Lanzamiento
La mudanza a Framer
Explorando alternativas, Framer apareció como una opción más ágil y visual. Migrar implicó reconstruir desde cero, pero el resultado lo justificó: es especialmente práctica para lograr transiciones cuidadas sin meterse de lleno en el código.
Espacio de trabajo del portafolio en Framer
05 - Conclusiones
Aprendizajes
01
La IA no reemplaza el criterio, lo acelera
Figma Make sirvió para explorar rápido. Sin un criterio claro de qué conservar y qué desechar, el resultado habría sido genérico.
02
Un design system bien construido ahorra tiempo real
Lo que parecía excesivo para un proyecto personal probó su valor en cada iteración: los cambios globales se propagaron en segundos, no en horas.
03
Migrar de plataforma tiene un costo y una ganancia
Pasar de Webflow a Framer implicó reconstruir, pero también sumar al flujo una herramienta que hoy uso de forma habitual.
La IA es una herramienta: acelera procesos, reduce fricción y aumenta la productividad, pero no debería volverse indispensable para poder trabajar. Diseñar con IA sin criterio de diseño, o programar con IA sin entender el código, es como aprender a manejar solo en automático: la transmisión mecánica es la base —quien la domina conduce cualquier vehículo, pero quien solo conoce el automático queda limitado el día que le toque uno mecánico. Este portafolio se construyó con IA como apoyo, nunca como sustituto del criterio.
