Probando Open Design para actualizar mi Web Personal

La primera versión de mi web (https://karlosencalada.dev/) la desarrollé en 2020, como estaba de moda el JAMstack, utilicé Gatsby siguiendo un tutorial de YouTube.

Luego de un tiempo, me apunte para que sea revisada sin piedad por Dani de Web Reactiva y me dió varios consejos que se pueden ver aquí.

Siguiendo las recomendaciones, empecé por cambiar el dominio y conseguir un template más completo. Como seguía enganchado al JAMstack y me atraí Vue, decidí utilizar Gridsome. El resultado me gustó, tenía más contenido y mejor estructura. Por acá se puede ver una versión muy parecida (convertida a estática y con algunos cambios).

En el último capítulo de WR mencionaron una alternativa a Claude Design: Open Design. Me llamó la atención y me animé a instalarlo, muy sencillo utilizando el instalador descargado desde su web.

El apartado de configuración es extenso, permite definir varios detalles para sacar el máximo partido a la herramienta. Quizás el más importante para iniciar es la selección del modelo, tiene integración con la mayoría de agentes más usados actualmente.

Otro punto interesante es el de Skills (132) y Design Systems (145) en donde se puede seleccionar los que queremos activos para la sesión.

Para la prueba, utilicé Claude Code configurado con API Key de Anthropic con el siguiente prompt:

Use this site as inspiration and make the necesary changes
https://christyprice.com/

Usa la siguiente paleta de colores:
#4C6472
#57A4B1 (main)
#B0D894
#FADE89
#F95355

Me tomó más tiempo ubicar una web con un estilo similar al que quería y seleccionar una paleta que me guste, que al agente generar el sitio (menos de 10 minutos). El resultado fue bastante bueno y con un costo total en tokens de $3.53.

Como tenía varios detalles que afinar (paddings, contraste en fuentes, alineación, etc.) era necesario realizar ajustes. No me animé a seguir iterando en Open Design (por que no lo conozco y por que no quería gastar más tokens) así que continué con Open Code configurado con Oh My OpenAgent.

Luego de unas 4h y más de 25 commits, logré un resultado que me dejó satisfecho https://carlosencalada.dev/

Conclusión

¿Se puede crear una web funcional con IA? Si.
¿Se lo puede lograr en minutos a costo 0? Definitivamente no.

Al final las cosas no han cambiado mucho, lo importante es conocer las herramientas disponibles y saberlas usar de la mejor manera.

Seguramente si colocaba un prompt más elaborado hubiese obtenido una primera versión con menos detalles que ajustar y si fuera más diestro en el desarrollo frontend no hubiese necesitado tantas iteraciones para conseguir el resultado final.

Seguiré probando Open Design para landings de algunas soluciones que tengo listas y otras que están en desarrollo. Quiero ver que resultados tengo con modelos gratuitos de Ollama y OpenCode.