Diseñé mi portafolio con texto

Un portafolio es un proyecto que nunca termina. Yo llevaba casi dos años sin actualizar el mío, pasó tanto tiempo que dejó de reflejar al profesional en el que me estaba convirtiendo. Lo audité como lo leería un reclutador: el sitio decía profesional creativo multidisciplinario y mi CV decía Senior Product Designer & Design Engineer.

Entre un trabajo de tiempo completo, proyectos personales y una licenciatura (estoy estudiando Ingeniería en Desarrollo de Software), rehacerlo todo a mano no era realista. Así que me atreví a diseñarlo y desarrollarlo con texto, me refiero a que con Claude Code, un agente de IA conectado a Framer por su CLI, ejecutaba y yo dirigía. Escribía el contexto, daba la dirección creativa, decidía quién hacía cada cosa y revisaba cada resultado.

Todo esto sucedió en la plataforma de Framer porque mi portafolio ya lo tenía hecho ahí, desde hace unos 5 años. Pensé en reconstruirlo solo con IA y dejar de pagar Framer. Me quedé porque ya traía agentes de IA y conexión con Claude, y sigue siendo una forma muy rápida de lograr sitios interactivos y pixel perfect.

Al principio fue extraño, porque venía de ejecutar todo a mano, pero pronto se sintió como trabajo de diseño y desarrollo normal, solo que con texto. El agente se llevó lo repetitivo y lo tedioso, y yo pude concentrarme en lo creativo y lo estratégico. El criterio siguió siendo mío, y varias piezas las seguí haciendo a mano en Figma o en Framer.

El primer entregable fue el contexto

Antes de tocar el diseño, le pedí al agente que leyera el HTML publicado de las diez páginas del sitio y lo comparara con mi CV. El sitio presentaba a otra persona, y casi todo lo que me restaba se arreglaba con texto y orden. También investigué con Claude cómo armar los casos de estudio.

Con ese diagnóstico armé lo que el agente iba a leer en cada sesión, además de muchos de mis proyectos y de lo que ya tengo documentado:

• Quién soy y para quién es el sitio: el mensaje y qué debe entender un reclutador.

• Qué dice cada página: el contenido en orden, antes de pensar en el layout.

• El sistema visual: tipografía, color y espaciado, con sus nombres.

• Los límites: qué no se publica y qué no se toca.

Una parte de ese contexto ya existía antes de empezar. Tenía mi marca personal resuelta: el logo, los colores, las tipografías y sus tamaños. Todo eso ya vivía en Framer como estilos de color y de texto. Cuando le pedía una sección nueva, el agente no inventaba un azul ni el tamaño de un título: usaba los que ya estaban definidos. Eso hizo que los resultados fueran mucho más predecibles y que cada sección nueva se viera parte del mismo sitio.

Repartí cada tarea entre tres manos

No todo le tocaba al agente. Cada tarea caía en uno de estos tres caminos:

En este punto tomé una decisión: no todo se tenía que reconstruir. Por ejemplo, las tarjetas de la sección Projects, en la página de Work, ya funcionaban: eran un componente que había hecho a mano en Framer, que muestra la imagen al hacer hover, y ahí se quedaron.

Los bullets del hero son el mejor ejemplo. Quería que flotaran, y la opción obvia era rehacerlos como componente de código. La descarté porque significaba tirar el diseño para recuperarlo en JSX. Usé un code override: un archivo corto que le agrega comportamiento a una capa que ya existe. Los bullets se mueven y siguen siendo editables en el canvas.

Este es el override de uno de ellos, por si quieres probarlo. Crea un archivo de código en Framer, pégalo y asígnalo a cualquier capa:

import type { ComponentType } from "react"
import { useReducedMotion } from "framer-motion"

const times = [0, 0.25, 0.5, 0.75, 1]

export function withWiggle1(Component): ComponentType {
    return (props) => {
        const reduced = useReducedMotion()
        if (reduced) return <Component {...props} />
        return (
            <Component
                {...props}
                animate={{
                    x: [0, 4, 0, -3, 0],
                    y: [0, -6, 0, 5, 0],
                    rotate: [0, 0.5, 0, -0.4, 0],
                }}
                transition={{
                    duration: 6.5,
                    repeat: Infinity,
                    ease: "easeInOut",
                    times,
                }}
            />
        )
    }
}

import type { ComponentType } from "react"
import { useReducedMotion } from "framer-motion"

const times = [0, 0.25, 0.5, 0.75, 1]

export function withWiggle1(Component): ComponentType {
    return (props) => {
        const reduced = useReducedMotion()
        if (reduced) return <Component {...props} />
        return (
            <Component
                {...props}
                animate={{
                    x: [0, 4, 0, -3, 0],
                    y: [0, -6, 0, 5, 0],
                    rotate: [0, 0.5, 0, -0.4, 0],
                }}
                transition={{
                    duration: 6.5,
                    repeat: Infinity,
                    ease: "easeInOut",
                    times,
                }}
            />
        )
    }
}

Si lo usas en varias capas, duplícalo con otro nombre y cambia la duración. Evita los múltiplos: mis bullets duran 6.5, 7.9, 9.3 y 8.4 segundos para que nunca se muevan como un solo latido.

Las librerías fueron otra forma de delegar ejecución. Las fui descubriendo por internet: tenían efectos muy interesantes y ya traían el código para usarlos en tu propio sitio. border-beam y metal-fx, de libraries.dev, me ahorraron programar dos efectos. El hero de Work parte de un componente abierto de useLayouts, y las tarjetas de casos, de un acordeón de Bencho. El agente los integró y los adaptó al sitio, pero ninguna librería decide dónde va cada efecto. El brillo va solo en las tarjetas importantes y el metal líquido solo en un botón. Un efecto repetido en todo el sitio deja de señalar algo.

También hubo momentos en los que escribir ya no era el camino. Para el caso de Advisor Platform necesitaba dos personajes. Las primeras veces que los pedí salieron muy infantiles y ni siquiera tenían bien el ángulo, así que los dibujé yo en Figma. Saber cuándo dejar de pedir y ponerte a dibujar también es parte de dirigir.

Puedes ver estas ilustraciones aplicadas en el case study de Advisor Platform.

El primer resultado nunca fue el definitivo

En cada iteración, Framer reportaba que todo había quedado listo. Luego revisaba la pantalla y encontraba detalles en la UI, por ejemplo, el video del hero necesitaba una máscara para fundirse con el fondo, Framer reportó que todo se había aplicado, pero tenía detalles que hacían que el blend no se viera bien. Las animaciones tampoco corren en el canvas: solo se pueden juzgar en Preview o publicadas.

Esta fue una de las lecciones más grandes de trabajar con agentes: el primer resultado no tiene que ser el definitivo. Reviso qué salió, entiendo por qué salió así, reacomodo el prompt o lo que estoy pidiendo, y vuelvo a iterar. Muchas veces son varias vueltas, y ese trabajo no desaparece. Ahí sigue entrando tu criterio, porque el agente no decide cuándo algo ya está bien. Si dice que terminó, solo sé que terminó de ejecutar.

Un ejemplo: cuando probamos un brillo que recorre el borde de las tarjetas, esta fue mi respuesta al primer resultado: «Se percibe muy poco el brillo en el borde. Siento que es demasiado sutil, debe recorrer el borde de la card, con el degradado en azul a blanco, con mayor brillo». Así, en lenguaje natural, describiendo puntos clave del diseño y la interacción, en la siguiente vuelta la intensidad y el movimiento de la luz quedaron mejor.

Lo que sí cambió fue dónde queda cada aprendizaje. Uso Obsidian como mi vault de conocimiento personal, y cada proyecto tiene ahí su propia carpeta. Cada error quedaba anotado dentro del proyecto del portafolio, y el agente tomaba contexto de ese vault y de lo que iba pasando. Framer no reconoció unos overrides generados con una función, así que la nota dice que se escriben uno por uno. Una capa solo admite un override, así que la nota avisa que hay que decidir antes de combinar efectos.

Cuando trabajas a mano, un error te enseña a ti. Con un agente, la lección se pierde si nadie la escribe, y la siguiente sesión puede repetir el mismo error. Por eso cuidé esas notas como cuido un design system: son parte de lo que hace que el resultado sea consistente.

Cuánto tiempo ahorré

Entre semana tengo entre 30 minutos y 1 hora libres, por día, así que casi todo salió en sesiones cortas. Entre el 11 de septiembre y el 5 de octubre salieron en vivo el home, Work, Contact y tres casos de estudio.

La columna A mano es mi estimado, no una medición. Aun así, son unos cinco días de sesiones cortas contra unas tres semanas de trabajo.

El ahorro estuvo en ejecutar, sobre todo en lo repetitivo y lo técnico. Revisar, poner tu criterio sigue tomando tiempo, y el mensaje final, las decisiones de diseño y la investigación siguen siendo míos.

Si estás haciendo tu portafolio

Considera hacer el diseño agéntico y la ejecución en código agéntica. Es algo que ya tenemos que hacer como Product Designers. Hacer un portafolio, mantenerlo e iterarlo es algo que quita mucho tiempo. Tener un workflow de trabajo en el que la IA sea el ejecutor y tú eres quien orquesta sí te ahorra muchísimo tiempo y hace que te concentres más, en sesiones cortas de tiempo, en la parte creativa o en que se refleje realmente tu trabajo. Algo que puedes hacer si lo vas a construir con un workflow de IA, toma en cuenta estos cuatro aspectos:

1. Research y contexto primero. Antes de pedir pantallas, revisa qué dice hoy tu portafolio, qué dice tu CV y a quién le hablas. Un agente construye rápido lo que le pidas, aunque sea lo incorrecto.

2. ¿Está escrito lo que el agente tendría que adivinar? Lo que no escribas, lo va a inventar. Deja tu mensaje, tus casos, tu sistema visual y tus límites en archivos Markdown: son texto plano que un agente puede leer sin problema. Una aplicación como Obsidian te ayuda a tenerlos ordenados por proyecto y a retomarlos en cada sesión.

3. ¿Esto le toca al agente, a ti o a una librería? Reparte el trabajo entre los tres. Las librerías también ahorran tiempo.

4. ¿Utilizo una plataforma como Framer o lo construyo solo con código? Con un servicio como Claude puedes generar el sitio completo, pero luego te toca mantener ese código y su hosting. Framer te deja corregir a mano en un canvas visual lo que no vale la pena pedir con un prompt, y ya trae breakpoints, CMS y publicación. El agente trabaja sobre las mismas capas que tú editas. A cambio, pagas el plan y aceptas sus límites.

El resultado está en mi portafolio.

Con qué lo hice: Framer, Claude Code, Figma, border-beam, metal-fx y componentes abiertos de useLayouts y Bencho.