Mejorando las VIBES de mi aplicación con DESIGN.md

VIBES

El diseño de interfaces es complejo. A pesar de que me gusta mucho la pintura y el aspecto visual de las cosas, como a muchos desarrolladores, mis esfuerzos no dan para aprender tanto.

Antes, con ayuda de Claude y una gran lista de requerimientos, logré desplegar mi aplicación HablemosManga. Con un diseño frío y genérico. Robótico.

HablemosManga antes del rediseño con DESIGN.md

No es novedad. Desde que uso herramientas de LLM para desarrollar la ejecución se ha acelerado muchísimo pero la experiencia de usuario y la inferfaz no tanto.

Tal vez sea mi culpa, pero siempre termino dándole un montón de prompts y trabajando en diseñar a mi manera un sistema de diseño para mi proyecto.

Scrolleando por internet encontré DESIGN.md y resulta que hay muchos repos implementado sus sitemas de diseño. Simple, replicable y con buenos resultados. Vi que viene de Google Stitch, y aprovechando que tengo Gemini Pro me fui a quemar tokens:

Google Stitch generando un sistema de diseño para mi proyecto

Intenté darle contexto sobre mi proyecto, pero el diseño de Gemini me parece sobresaturado. No convence. Pero mira, te genera un design.md!

El DESIGN.md que genera Stitch — simple y estructurado

En fin. Luego encontré getdesign.md/shopify/design-md y estoy usando ahora la plantilla de Shopify, que es un negocio de e-commerce, similar a mi aplicación. Luego le pedí a Claude que aplique el nuevo sistema de diseño al proyecto y estos son los resultados...

HablemosManga tras rediseño con DESIGN.md

Luego mientras estoy escribiendo salió Claude Design. Se ve prometedor. Y también salió Claude 4.7, que al parecer es el 4.6 antes de que le redujeran capacidad de pensamiento, así que este artículo sigue vigente.

Claude Design también genera un DESIGN.ms y Claude Code es compatible con el estándar.