Este es el único caso de este portafolio escrito al mismo tiempo que ocurre. Los demás se reconstruyeron a partir de material antiguo. Este tiene un registro actualizado en cada sesión de trabajo, con fecha, y de ahí sale cada episodio de abajo.
Eso cambia lo que puede demostrar. No hay una reconstrucción generosa de la memoria, y los errores están anotados en el mismo sitio que los aciertos, escritos el día en que ocurrieron.
El punto de partida
Yo tenía un portafolio en Framer, funcionando. La decisión de rehacerlo no vino de estar descontento con la herramienta: vino de querer un portafolio que enseñara el razonamiento detrás de cada decisión, y no solo su resultado. Framer no me lo impedía, pero tampoco me obligaba a nada.
La regla que creó este caso se definió antes de la primera línea de código: registrar mientras ocurre, y no reconstruir después. Cuesta cinco minutos al final de cada sesión, y es lo que separa un caso de un relato.
Tres herramientas, y una documentación entre ellas
El trabajo pasó por tres IA, cada una en el papel donde más rinde. ChatGPT hizo la base editorial en un día: dieciséis capítulos del documento que llamo Book, los primeros registros de decisión, la guía de voz. Nada de código. Claude se llevó la curaduría y las decisiones técnicas. Claude Code implementó.
Lo que hizo que esto funcionara no fue ninguna de las tres, fue el Book. Cuando el proyecto cambió de herramienta, no hubo ni una pregunta de contexto: la documentación bastaba para que la sesión nueva empezara escribiendo código.
Es una constatación sin glamour y es la más útil del caso. La documentación dejó de ser burocracia y pasó a ser la interfaz entre las herramientas. Registrar una decisión en formato ADR era una práctica de ingeniería; aquí se convirtió en lo que permite que cualquier IA entienda el proyecto en minutos.
Lo que la máquina hizo mejor, y lo que yo leí mal
El design system de la empresa vive en un archivo de Figma, y en aquella sesión yo solo tenía capturas guardadas antes: imágenes donde las etiquetas con el código de color miden unos cuatro píxeles de alto. Ilegibles.
La salida fue dejar de intentar leer la etiqueta y pasar a leer el píxel. Un script barrió las capturas buscando bloques de color uniforme, trató cada muestra como una región conectada y devolvió el código exacto de relleno con su posición en la rejilla. Salieron las escalas completas: diez escalones del color de marca en claro y oscuro, doce de neutro y siete de acento.
A mí no se me habría ocurrido. Y no va del color: va de cambiar la pregunta "cómo leo este texto minúsculo" por "¿de verdad necesito el texto?".
La etiqueta es ilegible en el origen y el código sale exacto del otro lado, porque lo que se leyó no fue el texto: fue el color del píxel. Esta escala salió correcta en los veinte escalones. La de neutro, no.
Uno de los escalones salió #3381ff, exactamente el valor que yo ya conocía, y
tomé la coincidencia como prueba de que el método era correcto. Comprobada
después contra la fuente real, el color de marca estaba exacto en los veinte
escalones. La de neutro, no: llega hasta 1100, y yo la había registrado parando
en 1000, con un escalón que no existe desplazando todos los demás.
El método confirma una rampa cuya estructura ya conoces. No descubre la estructura. Acerté donde yo ya sabía la respuesta, y fue justo ahí donde creí haber probado algo.
Yo creía que el trabajo sería pedir
Entré creyendo que la habilidad nueva sería escribir buenos encargos. Lo que apareció fue otra cosa: la IA se equivoca con confianza, y es la confianza lo que sale caro.
Explica antes de probar. Cuando las llamadas a Figma empezaron a fallar, llegó una explicación segura sobre la causa. Equivocada. Llegó una segunda, también segura, también equivocada, y por el mismo motivo: formulada sin probar.
Confunde "yo no puedo verificar" con "no se puede verificar". Doce grabaciones de prototipo aparecían como imagen fija, y durante tres rondas la respuesta fue que no se podía comprobar la reproducción. Chrome estuvo instalado en la máquina todo el tiempo, y el defecto era un atributo que faltaba en la etiqueta de vídeo. Una herramienta que no ve el efecto no prueba que el efecto no exista.
Corrige donde se señaló el error, y no el error. Señalé que una frase generalizaba de más. La frase se corrigió; la misma afirmación, en el mismo archivo, unos párrafos más abajo, se quedó como estaba durante días.
Y mide una cosa para concluir otra. Llegó un aviso de que una sección era demasiado larga, con un número de píxeles de scroll como prueba. Lo que se había medido era altura, y lo que se afirmaba era tiempo.
Lo que quedó para mí
Si la ejecución se aceleró tanto, la pregunta honesta es qué queda. Tres cosas, y ninguna se hizo más pequeña.
Elegir el problema. Qué proyectos entran, qué tiene que demostrar cada uno, qué se queda fuera. Uno de los casos traía cuatro tarjetas de "principales aprendizajes" listas para usar, y tres eran genéricas; se quedaron fuera.
Ver qué está mal en la pantalla. El nombre de un caso cortado a media palabra en la tarjeta de la home, una portada que no dialogaba con la de al lado, un diagrama de proceso técnicamente correcto que no decía lo que tenía que decir. Nada de eso rompe el build, nada aparece en la consola, y es exactamente donde se decide un portafolio de diseño.
Responder lo que no está en ningún archivo. El caso de Square, tal como estaba escrito, parecía trabajo hecho para la empresa real. Ninguna lectura del material resolvería la duda: solo yo sabía que el briefing venía de un reto de bootcamp. Esa respuesta se convirtió en la espina dorsal del caso: con el briefing declarado como externo, contradecirlo con investigación deja de ser incoherencia y pasa a ser hallazgo.
La revisión se convirtió en una página
Ver qué está mal en la pantalla solo funciona si consigo verlo. Y lo que la máquina entrega no es una pantalla, es un diff, y leer un diff no es leer una interfaz.
Así que se hizo regla: trozo de interfaz terminado, antes del commit, sale una página de revisión. Las fases del flujo en captura, lo que se decidió en cada una y por qué, y una lista de lo que todavía depende de mí. Yo la abro, señalo lo que está mal, y solo entonces se sube.
La puerta de los casos protegidos con contraseña pasó por ahí. La animación de apertura salió sin una sola objeción mía. El botón justo debajo se llevó dos: en la primera dije que le faltaba hover, y en la segunda que un fondo blanco solo no bastaba, faltaba el contorno azul de la marca.
Lo que resuelve esa página no es documentación. Es el intervalo entre que la máquina termina y el código entra, que antes no existía.
Recortes da própria página de revisão da porta dos cases. Parar libera a rolagem, para ler algum deles com calma.
Seis decisiones, y puedes tocarlas todas
Hasta aquí este caso ha ido de método. Esta parte va del producto: seis decisiones de interfaz que nadie pidió, y que son la diferencia entre un portafolio publicado y un portafolio hecho. Cada una viene con la pieza de verdad, funcionando dentro del caso. Una captura probaría que la cosa existe; lo que hay que probar es que funciona.
Un gato como marca
Steve es mi gato, y se convirtió en la marca del sitio. Es fácil de equivocar: una mascota en un portafolio profesional se desliza hacia lo mono en un segundo, y lo mono es lo contrario de lo que se busca en quien va a diseñar producto. Lo que lo sostiene no es la idea, es el dibujo, y se dibujó tres veces antes de quedar en pie.
La segunda decisión es que se mueve, y que el movimiento espontáneo es raro a propósito, para que se note cuando ocurre.
Três desenhos, na ordem em que existiram. O pixel trava numa forma só; o vetor troca de pose inteira, e o controle acima é dele; o realista tem um rabo com física própria, que não para enquanto você lê. Passe o ponteiro nele.
El letrero es un objeto, no un texto de colores
El saludo podría haber sido una línea de texto con otra tipografía. Se convirtió en un letrero de LED, y lo que cambia es cómo está construido.
En un panel de verdad hay una sola rejilla, y cada celda está encendida o apagada. La primera versión aproximaba eso con dos rejillas de CSS superpuestas; como el texto se desplaza, la rejilla encendida se desplazaba con él y cortaba cada letra por la mitad. El panel de hoy le pregunta a cada celda, una por una, si se enciende. Las letras vienen de una tipografía dibujada punto a punto sobre la propia rejilla: reducir un dibujo a menos líneas de las que tiene detalles hace que el algoritmo elija la media en vez de la forma, y por eso los paneles de aeropuerto y los marcadores de estadio usan tipografías de matriz.
Steve no está dentro del panel, camina encima. Cinco dibujos intentaron caber en la matriz y ninguno funcionó, porque una matriz de puntos es un objeto tipográfico, y un animal naturalista es lo que peor hace. Lo que lo resolvió fue sacar al gato de la rejilla en vez de dibujarlo por sexta vez. Y es la superposición la que hace que la pieza funcione: sus patas apagan los LED que quedan detrás mientras pasa.
Apague o letreiro. O que sobra é a grade de LEDs apagados, que está ali o tempo todo: cada célula do painel está acesa ou apagada, nunca meio ponto. O Steve continua aceso porque ele não é feito de LED: está sentado na frente do painel, e as patas dele tapam os pontos que ficam atrás.
El reproductor, y los 99 dólares que no costó
El camino oficial para tener música aquí costaba noventa y nueve dólares al año. Para un detalle de portafolio, es una suscripción recurrente pagando adorno. La salida fue leer una lista pública mía, con 299 pistas, y reproducir las vistas previas de treinta segundos que ya están abiertas. Cuesta cero y no le pide login a nadie.
Lo que dio trabajo no fue reproducir, fue el nombre. Una pista brasileña acumula colaboraciones, samples acreditados y corchetes, y los puntos suspensivos esconden justo lo que importa. Así que el nombre se desplaza, pero solo cuando de verdad no cabe, y "no cabe" se mide en cada cambio de tamaño, nunca se supone.
Arraste a largura. O nome da faixa só começa a rolar quando de fato não cabe, e a conta é refeita a cada mudança de tamanho. Larga o bastante, ele fica parado: rolar um texto que já cabe é movimento sem informação.
Dos niveles de lectura, y el selector en el sitio correcto
Cada caso tiene dos versiones: una de dos minutos y una completa. El error no estaba en la idea, estaba en la posición. El selector estaba al final, así que funcionaba como continuación y fallaba como elección: quien tiene prisa decide en los primeros segundos y nunca llegaba a saber que existía la versión corta.
Subió arriba y pasó a ser un selector de modo. Y el tiempo de lectura entró dentro del control, porque es lo que decide: entre dos etiquetas sin nada más la elección es un tiro al aire; con los minutos al lado, se vuelve informada.
A integração com o Figma não estava autenticada, e sobraram capturas em que os rótulos de cor têm quatro pixels de altura. A saída foi parar de tentar ler o rótulo e ler o pixel. Saíram as escalas completas, e um dos valores bateu com o que a API já tinha confirmado dias antes.
O mesmo episódio deste case, nos dois níveis. O resumido responde o que aconteceu; o completo responde como e com que prova. Um não é o outro cortado, e é por isso que os dois existem.
La navegación, con el teclado por delante
La fila de casos se desplaza con el ratón, se arrastra con el dedo y avanza con las flechas. Las tres valen igual, y la tercera no es accesibilidad cumplida por obligación: es la forma más rápida de recorrer la selección entera.
El defecto que más tardé en entender lo describí así: el primer toque nunca funciona. Arrastrar la fila con el ratón no actualizaba el índice, así que el primer clic avanzaba desde donde yo ya no estaba.
Escribir la pieza de abajo encontró otro, de pie desde hacía semanas: la página del caso escuchaba las flechas sin preguntar de dónde venía la tecla, así que una flecha dentro de un campo sacaba a la persona del caso, y el sitio tiene un campo de contraseña.
Clique na fileira e use as setas. Enter abriria o case selecionado. É o mesmo modelo da Home, e o teclado aqui não é acessibilidade cumprida por obrigação: é o jeito mais rápido de percorrer a curadoria inteira sem tirar a mão do lugar.
El detalle que ningún test detecta
El título comido por el periodo, ahora con el ancho en tus manos.
No es que el título sea demasiado largo: es el vecino que nunca cede. El periodo estaba marcado para no encogerse, así que toda la pérdida de ancho caía sobre el nombre del caso, y en una de las pantallas que medí quedaba un píxel para él.
Mi primera idea fue revelar el resto en hover. Trataría el síntoma en el sitio equivocado: con un píxel de caja no hay nada que deslizar, y quien llega por toque o por teclado seguiría viendo el texto cortado.
Antes
Depois
Julho a novembro de 2023
Square Register
Arraste e veja as duas versões divergirem da mesma largura. Em cima, o período nunca cede e come o nome do case. Embaixo, ele virou sobrelinha e o título fica com a linha inteira. Nenhum teste pega isto, e nenhum erro aparece no console.
Ninguna de estas seis aparecería en una lista de requisitos. Todas aparecen cuando alguien abre el sitio.
El gato llevó más tiempo que el resto
Ninguna otra parte de este sitio consumió tantas sesiones como la marca, y el motivo no es capricho: dibujar un animal que se mueve sin parecer adorno choca con problemas de geometría que yo no sabía que existían. Dos versiones se rechazaron antes de la actual, una imagen realista, generada y recortada. Yo genero la imagen; el resto del camino es código.
La cola es una cinta rígida, y eso lo cambia todo
La cola salió del cuerpo: recortada una vez, dibujada por debajo del animal y movida por una cadena con física propia. Cerca de la punta se doblaba sobre sí misma y el pelo salía en espejo, como si la cinta se diera la vuelta.
La causa no es de programación, es de geometría: una cinta rígida no hace una curva de radio menor que su propio ancho. En la punta, cada eslabón mide 3,6 píxeles de largo dentro de una banda de 81 de semiancho, una tira 22 veces más ancha que larga. Girarla lo suficiente para seguir la curva obliga al borde interior a pasar por encima de sí mismo.
Y la primera medición no encontró nada. Midiendo el área de cada eslabón en valor absoluto, los 55 daban 1,00 limpio, porque la cadena preserva la longitud y la junta entre eslabones es una cizalla, que preserva el área. El número era correcto y no decía nada. Midiendo el área con signo, cinco eslabones aparecieron invertidos, todos vecinos.
El arreglo pasó a ser un límite por junta, calculado a partir del ancho en ese punto, y no un tope único en grados. Veinte grados es flojo en mitad de la cola e imposible en la punta, porque lo que decide no es el ángulo: es la curvatura dividida por el ancho.
La medición que había aprobado el material equivocado
Hacerlo caminar costó cuatro intentos. Deformar la foto produjo un caballo, porque deformar un fotograma no inventa la silueta que no está en él. Pedir poses generadas falló dos veces, y la segunda es la que enseña.
Yo había anunciado 51,9 puntos de recorrido de pata y lo había celebrado. Ese número cogía el extremo inferior de la silueta, que incluye la cola caída y el corte de la imagen, y no la pata. No fue un error de cuenta, fue un error de diana: medí el envolvente creyendo que medía la cosa que hay dentro. Costó una ronda entera.
Con la diana correcta, las ocho imágenes daban un recorrido de pata entre el 5% y el 16% del cuerpo, frente al 35% a 45% de un gato de verdad, y cinco de ellas levantaban la misma pata. Al tamaño en que Steve aparece, 52 píxeles de alto, esa diferencia son tres píxeles. Eran ocho veces la misma imagen.
El vídeo lo resolvió, y el último defecto estaba entre las fases
El cuarto intento cambió imágenes por vídeo, y la diferencia no es de calidad, es de naturaleza: un vídeo nace como un movimiento, donde fotogramas vecinos son fases del mismo paso y no dibujos que salieron parecidos.
Con eso el test que decide se vuelve simple, y es en coordenadas de mundo: la pata apoyada tiene que quedarse quieta mientras el cuerpo pasa por encima. En el vídeo salió limpio, una pata en 471, 471, 471, 473, 476 durante 24 fotogramas seguidos. Ninguna de las doce imágenes sueltas podía enseñar eso, porque nunca fueron una secuencia en el espacio.
El último defecto no estaba dentro de ninguna fase, estaba entre ellas. Se reportó cuatro veces seguidas, cada vez con un nombre distinto, y las tres primeras busqué dentro de la salida. En la cuarta comparé las fases: la caminata iba a 16 imágenes por segundo y el sentarse a 12, una caída del 25% de cadencia dos veces por vuelta. Uniformarlo costó cero bytes.
Son 147 fotogramas al final: 16 caminando, 33 parando, 16 sentándose y girando la cabeza, 82 levantándose y marchándose.
Dos cosas quedaron de esa secuencia, y valen mucho más allá de un gato. La primera es que un criterio de aceptación en número, escrito antes de encargar el material, es lo que impide la cuarta ronda; en las tres primeras yo no lo tenía, así que miré las imágenes, y parecían buenas. La segunda es que el salto vino de material nuevo, no de más ingeniería sobre material malo: cuando entró el vídeo, el rig de patas entero salió y el código se redujo a un tercio.
Las reglas que nos inventamos por el camino
Tres, y las tres nacieron de un problema concreto.
Nunca inventar una métrica. Cuando falta información, entra un marcador explícito de hueco, y no un número plausible. Es la regla más fácil de escribir y la más fácil de romper sin darse cuenta, porque un número plausible rellena el vacío sin hacer ruido.
Lo que no se pudo confirmar queda marcado como no confirmado. En la extracción del design system, tres cosas no pudieron verificarse. Están anotadas en un comentario del propio código y listadas en el registro de la decisión. La alternativa sería rellenar con un valor razonable y seguir.
Una decisión relevante se convierte en registro. No es ceremonia: es lo que permitió que este caso existiera sin que yo tuviera que acordarme de nada.
Lo que todavía no ha terminado
Falta escribir un caso de trabajo. La puerta que protege ese material ya está en pie, porque enseña producto real de una empresa; falta lo que va detrás. Este caso trata de un proyecto que sigue ocurriendo, así que va a cambiar. El registro sigue abierto.
Y hay una cosa que no sé responder, así que queda anotada como pregunta: no se puede saber si el resultado habría sido mejor sin IA, porque no existe una versión de control. Lo que sí se puede afirmar es lo que está registrado con fecha. Lo que se aceleró, lo que se atascó, y dónde tuve que estar yo.
Lo que se aceleró fue la ejecución. Lo que decide si el resultado sirve sigue siendo mío, y esa parte no se hizo más pequeña. Se hizo más visible.