Este portafolio es, ante todo, mi carta de presentación para empresas y proyectos freelance. Pero también es un proyecto personal que me permitió explorar distintos aspectos de mi perfil profesional, con especial énfasis en el diseño UI.
La IA es una herramienta poderosa para acelerar la productividad y, aunque este portafolio podría haberse construido al 100% con prompts, soy defensor del criterio propio cuando se tienen las herramientas y el conocimiento para aplicarlo. Los primeros bocetos se generaron con Figma Make, proporcionándole los colores, la tipografía y el estilo de mi marca personal. A partir de ahí, todo fue construido a medida.
Construir un Design System para un portafolio personal puede parecer excesivo, pero cuando este funciona tanto como carta de presentación como demostración de conocimiento, la inversión tiene todo el sentido. Fue la oportunidad ideal para mostrar dominio en escala de colores, estados, tokens, variables, componentes y documentación.
Se definieron tokens primitivos y semánticos para colores y medidas, estableciendo una base sólida y escalable para el sistema.
Una buena práctica al trabajar con variables es mantener los estilos existentes, pero vinculándolos directamente a ellas para garantizar consistencia en el sistema.
No todos los portafolios ofrecen la opción de alternar entre modo claro y oscuro. Definir ambos modos en este proyecto fue una decisión orientada a la accesibilidad y la comodidad visual del usuario.
No todos los portafolios ofrecen la opción de alternar entre modo claro y oscuro. Definir ambos modos en este proyecto fue una decisión orientada a la accesibilidad y la comodidad visual del usuario.
El 95% del sistema de diseño fue construido manualmente, con criterios y definiciones propias adaptadas a este proyecto. El 5% restante corresponde a la documentación generada con IA, guiada por referencias de sistemas en los que ya he trabajado.
Con conocimientos básicos de HTML y CSS y experiencia con herramientas no-code/low-code, decidí trasladar manualmente todo el diseño de Figma a Webflow.
A través del plugin Figma to Webflow, exporté las variables del proyecto —tipografías, colores y medidas— directamente a Webflow. La construcción del sitio fue completamente manual, pero para las partes que requerían código, utilicé Claude a través del MCP de Webflow. Esto permitió implementar el toggle de modo claro/oscuro, así como animaciones y microinteracciones presentes a lo largo del sitio.
La conclusión de este proyecto reafirma una idea clara: la IA es una herramienta, no un sustituto del conocimiento. Sirve para aumentar la productividad y agilizar procesos repetitivos, pero no debería ser indispensable para completar un trabajo.
Usar IA para diseñar sin entender diseño, o para programar sin entender código, es como aprender a conducir solo en automático: funciona bien hasta el día que solo hay un carro de transmisión mecánica. Con la IA pasa lo mismo —quien dependa completamente de ella quedará sin herramientas el día que no pueda utilizarla.
