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 de uno
Crear un sistema de diseño para un portafolio puede parecer excesivo, pero era la oportunidad para demostrar criterio técnico. Se definieron foundations, componentes, variables de color y modo dark.
Foundations definidos para el portafolio
Componentes tipo Button
De variables a tokens
Para obtener tokens, primero se definen las variables primitivas —los valores base de color— y luego las semánticas, que les asignan un rol dentro del sistema. Una buena práctica es mantener los estilos conectados directamente a estas variables: así, cualquier cambio en el valor base se propaga automáticamente a todo el sistema.
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 tienen modo dark definido. Establecer ambos modos desde el sistema de diseño en Figma garantizó que el cambio entre light y dark fuera coherente en toda la interfaz, pensando en la accesibilidad y preferencia del usuario.
Home del portafolio en modo light y modo dark
Documentación de componentes
Se documentó el componente Button —el más utilizado en cualquier sistema— siguiendo las convenciones de sistemas de diseño con los que he trabajado. Con instrucciones precisas desde el prompt, Claude generó la estructura base en un frame; de ahí en adelante, el trabajo fue refinar y corregir lo que la herramienta no resolvió por sí sola. El 95% del sistema se construyó manualmente — la documentación fue la excepción, pero con criterio claro sobre qué pedir y cómo evaluar el resultado.
Documentación del componente Button
03 - Construcción
De Figma a Webflow
El conocimiento básico de HTML y CSS, sumado a la experiencia con herramientas no-code, fue lo que permitió abordar la construcción manualmente. A través del plugin "Figma to Webflow", las variables se transfirieron directamente, dejando fuentes, colores y medidas ya definidos. Para las partes que requerían código —el toggle de light/dark, animaciones y efectos hover— se usó Claude desde el MCP de Webflow, resolviendo cada necesidad técnica sin salir del flujo de trabajo.
Espacio de trabajo del portafolio en Webflow
50% IA
Modo light/dark, efectos hover, microinteracciones y correcciones de texto con IA como asistente.
50% manual
Estructura base, div's, containers, headings, páginas y toda la construcción en sí.
Aunque el dominio migró a Framer, el portafolio sigue publicado en su dominio .webflow.io — donde puede verificarse el resultado del trabajo realizado en esta plataforma. Puede verse aquí.
04 - Lanzamiento
La mudanza a Framer
Explorando alternativas, Framer apareció como una opción más ágil y visual. La migración implicó reconstruir desde cero, pero el resultado justificó el esfuerzo. Resulta muy práctica para quien quiere transiciones llamativas 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 fue útil para explorar posibilidades rápido. Sin 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 demostró su valor en cada iteración. Cada cambio global tomó segundos.
03
Migrar de plataforma tiene un costo y una ganancia
Pasar de Webflow a Framer implicó reconstruir, pero también aprender una herramienta que hoy forma parte del flujo de trabajo.
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 tener criterio de diseño, o programar con IA sin entender el código, es como aprender a manejar solo en carro 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 toque uno mecánico. Este portafolio fue construido con IA como apoyo, nunca como sustituto del criterio.
