Otra semana y otro experimento con la suscripción más barata con acceso a Claude Code, al momento de redacción. El
experimento de esta semana es un poco distinto; en lugar escribir una aplicación desde cero, decidí usar Claude Code para
recrear un poco el layout del legendario y super early-2000’s Blades Dashboard para este mismo sitio web.
The anti-rabbit-hole-diving medication
Desde que inicié mi iniciativa personal The Azimetrico Way, para acabar con mi parálisis por análisis, y desde mi
experimento anterior he estado buscando cómo comenzar a utilizar LLMs y
Agentic Engineering, para combatir el pasatiempo favorito de mi procrastinación, rabbit hole diving. Esta semana
tenía planificado comenzar a construir este mismo sitio web.
Inicialmente estaba tomando inspiración del sitio web de 37Signals, pero no me inspiraba para
poder incluir una sección sobre mí y cómo contactarme y otra para publicar mi escritura. Luego me crucé con el sitio
personal de Mitchell Hashimoto simple, sobrio, al punto y con las dos secciones que me hacían
falta. Pero no lograba encontrar ese hook visual que me permitiera superar a mi procrastinación. Finalmente caí en uno de
mis rabbit holes favoritos, los rumores y filtraciones sobre hardware para gaming, principalmente porque me siento
falsamente productivo al consumir análisis sobre el tema, ya que combina mi pasión por los videojuegos, al mismo tiempo
que me da una visión sobre cómo AMD e NVIDIA están estructurando su hardware de consumidor en base a sus estrategias
para data-center e inteligencia artificial. Hasta que una chispa de inspiración mientras escuchaba sobre el APU de la
próxima generación de Xbox; recordé mi primera experiencia con un Xbox 360 cuando tenía 13 años en casa de un amigo del
instituto. Recordé ese Blades Dashboard. Recordé los años que llevo intentando replicar este diseño. Recordé quien soy.
I tried for years to learn how to code, because I want to make video games!
Donde dejé mis gafas de color rosa
Traté durante un par de horas replicar el diseño de ese legendario Blades Dashboard, sin mucho éxito, así que antes de
perder el momentum que había generado y caer nuevamente en rabbit hole diving, lancé Claude Code, pero esta vez en
lugar de pedirle a Claudio que escribiera una aplicación desde cero, acoté el scope a simplemente implementar el layout
y UX del Blades Dashboard. Con el mismo flujo de trabajo del experimento anterior.
Plan mode, brainstorming with superpowers, implement!
Aunque esta vez la experiencia fue un poco frustrante, ya que Claudio no parecía entender que el proyecto usa Tailwind
CSS para los estilos, y cuando se lo recordé en mitad del plan lo leyó cómo todos los estilos deben estar escritos inline
en el atributo style de cada elemento ó en style tags, para usar las funcionalidades de componentización de Astro.
Debo dejar claro antes de seguir, esto fue un error mío por no haber incluido estos detalles del proyecto en un documento
CLAUDE.md en el root del proyecto. Aunque es de mi gusto personal que Claude Code me recuerde que dicho documento
no existe en el proyecto, entiendo que no sea un requerimiento por defecto sí lo único que quiero hacer en dicho proyecto
es que Claudio me dé una mano unos minutos sin tener que preocuparme configurar el agente de programación.
A pesar de mi frustración, tuve mi primera experiencia haciendo lo que llaman steering (personalmente lo traduzco
como direccionado) cuando la primera versión que implementó Claudio no era exactamente el Blades Dashboard, sino algo
que llamaría una interpretación moderna de la UX del mismo.
Le dí unas nuevas direcciones para que la implementación fuera una destilación un poco más fiel al diseño original,
manteniendo mi interpretación de brutalismo digital. La primera iteración logró su cometido, la segunda iteración pasó
de ser meramente client-side a integrarse con el routing de Astro.
No tuve que pasar horas ó días sumergiéndome en cada rabbit hole que me cruzara mientras intentaba replicar sin
éxito la idea que tenía en mi cabeza, parando mi progreso. 2 horas in-and-out, una aventura rápida con mi amigo Claudio.
Pair Programming with my computer can be fun!
Finalmente adapté los componentes de Astro implementados por Claudio para crear un sub-layout el cual luego anime
usando la implementación de Web Transitions API que ofrece Astro y alcanzar un feel good-enough para transmitir la idea
de la UX del Blades Dashboard, con cada navegación entre páginas. Y finalmente, limpiar los estilos para usar Tailwind
CSS para que el código siguiera mi estilo personal.
Esto me recordó a la entrevista de DHH con The Pragmatic Engineer, sobre cómo ha cambiado su opinión sobre el uso
de la inteligencia artificial en la programación con la introducción de los arneses de agentes de programación.
Personalmente, me sorprendió cómo el agente tomó mis direcciones e idea y sin muchos problemas logró algo que yo pude
adaptar rápidamente a mi estilo personal e integrar con el resto del proyecto de la forma que yo quiero mantener. Fue
cómo tener una sesión de pair programming con mi computadora y se sintió genial y divertido.
Y agregando el hecho de que no alcancé ningún limite de uso de mi suscripción, hizo que me sintiera en el año 2035 cuando
los avances en el hardware de inferencia local hagan de estos una cuestión del pasado. Al mismo tiempo que no perdí mi
atención en mi mal hábito de rabbit hole diving simplemente hace que me sienta más a gusto con mi nueva experiencia
usando LLMs para programar, y me da ganas de seguir experimentando con esta nueva forma de escribir código.
También utilize Claude Code cómo proofreader de esta entrada en mi diario.
- Cover Image source