Las referencias de diseño y el archivo design.md

Acá también me quiero detener un poco. La diferencia entre una página hecha profesionalmente y una que no, muchas veces, es un archivo. Se llama design.md.

Es el manual de normas del diseño de tu sitio. Qué colores usa y para qué sirve cada uno. Qué tipografía va en los títulos y cuál en el texto. Qué tamaños. Cómo son los botones, los bordes, las sombras, los espacios. Todo eso, escrito en un archivo que ChatGPT lee cada vez que va a dibujar una página.

Lo interesante es lo que eso produce: unifica el diseño en todas las páginas del sitio. El botón de la página de producto es igual al botón del checkout porque los dos salen del mismo archivo. Sin design.md, cada página es una aventura.

En este paso no vamos a escribir ese archivo a mano. Vamos a generar varios, a partir de imágenes de diseños que nos gusten. La skill transforma cada imagen en un archivo de diseño.

Paso 6: buscar referencias

Después de aprobar los wireframes, la skill te pregunta si ya tenés archivos de diseño de otro proyecto. Si ya usaste esta skill para hacer otra web, podés importar los que generaste entonces y te ahorrás este paso. Como yo estaba empezando de cero, le dije que analicemos.

Para buscar fui a Dribbble, una web donde diseñadores de todo el mundo muestran su trabajo. No vamos a copiar nada: vamos a enseñarle a ChatGPT qué es, para nosotros, un diseño que está bien. Busqué «tienda», «store», «e-commerce». Cuando algo me gustaba, lo descargaba a la carpeta Descargas.

Dos cosas que aprendí haciendo esto:

Mirá el diseño, no la estructura. Acá es al revés que en el paso de las capturas. Ahora ChatGPT se va a fijar en los colores, la tipografía, los espacios, el estilo de los botones. No en cómo está organizada la página. Así que no importa que la referencia sea de una tienda: puede ser de un banco, de un portfolio, de lo que sea. Lo que importa es que te guste cómo se ve.

Con cuatro alcanza. Elegidas con cabeza. Podés poner más, pero después vas a tener que generar más propuestas, más plantillas, y el proceso se alarga y cuesta más. Cuatro que de verdad te gusten y que se parezcan a lo que querés hacer, mejor que ocho tiradas.

Yo me tomé un rato, porque las primeras que encontraba se parecían todas entre sí y quería algo distinto. Vale la pena dedicarle tiempo: esta búsqueda sienta los cimientos sobre los que se va a construir todo el diseño.

Un nombre para cada una

Cada referencia se la pasás a ChatGPT arrastrando la imagen, y le decís cómo querés que la guarde:

Este diseño se llama Dark.

Yo no me complico con los nombres. Les puse Dark, Verde, Violeta y Pink, por el color dominante de cada una. Es una etapa de las tantas, y el diseño después se va a modificar; los nombres sirven para distinguir las versiones cuando las compares.

Por cada imagen, ChatGPT genera un archivo .md en el Obsidian: un design.md con lo que extrajo de esa referencia. Son los que vas a poder reutilizar en tu próximo proyecto.

Cuando tengas las tuyas (tres, cuatro), escribís «listo» y después «continuemos».

Cerrar las referencias

La skill cierra la lista, valida que los cuatro archivos tengan sentido, y te pide aprobación. Si cambiás de idea sobre alguna referencia, es ahora. Si no, seguimos: lo que viene es la marca.