Con la amplia exposición de herramientas de inteligencia artificial, se está democratizando su uso con herramientas de diseño (Figma, Canva, Pencil.dev, entre otras), lo que ayuda a optimizar flujos de trabajo en el proceso de diseño, desde interfaces hasta la creación de agentes.
Uno de los recursos más utilizados recientemente para escalar interfaces y experiencias es la estandarización de reglas de diseño a través de Markdown, donde design.md parece que se está convirtiendo en un estándar para que la inteligencia artificial reconozca los estilos de un sistema de diseño para generar propuestas acordes al producto.
Con esto pasas de un diseño genérico a un estilo de diseño personalizado.
¿Qué es Markdown y por qué necesitas aprender a usarlo?
Markdown es un lenguaje de marcado light que se utiliza para dar forma, estilos y jerarquía a contenido de texto. La mayoría de las personas llevan mucho tiempo usándolo a través de interfaces gráficas que ahorran el tener que hacerlo a mano (escribiendo cada instrucción).
Por ejemplo, cuando seleccionas un texto y le agregas negrita o cursiva estás dándole formato de markdown (en algunos casos conocido también como texto enriquecido). Lo mismo cuando al texto le pones jerarquía de encabezados (H1, H2, H3, H4, H5). Esta jerarquización del texto tiene muchos casos de uso adicionales:
– Dar estructura a contenido que cumpla buenas prácticas de SEO.
– Mejorar el formato del texto simple para que sea más fácil de entender y leer.
– Instruccion para agentes IA.
– Biblioteca de patrones UX.
– Scripts para test de usuarios.
El caso que hoy nos interesa es darle instrucciones a un LLM para que entienda las reglas clave que debe cumplir a fin de que funcione correctamente. ¿Y cómo esto se conecta con el diseño de productos digitales, UX y UI? Se conecta porque, mediante ellos le damos las instrucciones para que respete todo el sistema de diseño del producto.
Caso de uso: Open Design
Lo que ves en esta captura es el listado de sistemas de diseño que tiene por defecto OpenDesign, la alternativa open source a Claude Design. En Open Design puedes elegir cualquiera de estos sistemas de diseño para que se apliquen los estilos visuales y componentes basados en esa selección.
Acá vemos la opción al estilo Starbucks. Al abrirse la ventana emegente ves el sistema de diseño de Starbucks y a su lado las instrucciones en markdown con design.md (de lo que ya hablaremos en breve)
Francesca Piovani
Con el archivo markdown (bien escrito) logras que la consistencia que hay entre lo que tienes diseñado y lo que se va a implementar se respete al 100%. Por lo tanto, saber cómo se escribe correctamente un archivo markdown te servirá para acelerar tu flujo de trabajo.
Es clave que como diseñador aprendas (como no-diseñador también) a crear este tipo de entregables, comprenderlo y saber usarlos para diseñar considerando los nuevos requerimientos al usar inteligencia artificial.
Te enseño a como crear estas instrucciones.
Otros casos de uso
Selección de las mejores herramientas de la semana
Para diseño gráfico
Estandarizar las bases del diseño de una marca. Con el markdown puedes documentar (y que la IA use): colores, tipografía, uso del logo, márgenes, usos no permitidos. Perfecto para mantener la consistencia al crear propuestas con IA.
Para creación contenido
Estandarizar concepto visual, tono de comunicación, piezas de contenido, formato, call to actions, hooks, pilares de contenido. Sirve para acelerar el trabajo y asegurarte de que el resultado de la IA no es contenido aleatorio.
Para diseño de producto
Estandarizar heurísitcas, patrones de diseño componentes, espaciados, tipografías, tokens de diseño (colores, tamaño, jerarquía y casos de uso), empty states, estados de éxito, error. Te ayuda mucho a escalar las interfaces.
Para estilo de comunicación
Estandarizar tono comunicacional, palabras permitidas, mensajes de éxito y error, instrucciones textuales en productos digitales. Acelera el flujo de trabajo en UX Writing.
Design.md: consistencia en el diseño de producto a través de instrucciones
Design.md es un estándar para documentar las principales reglas de diseño en un producto digital. Contiene la información necesaria para que la IA mantenga la consistencia en el diseño de producto. Principalmente lo usan los diseñadores pero de este mismo documento también se puede:
– Crear documentación interactiva para que desarrolladores, diseñadores y product managers conozcan los estilos de diseño y sus variantes.
– Generar propuestas conceptuales en diseño, lo que permite iterar rápidamente (en el flujo tradicional de diseño te tomará más tiempo).
– Scripts para test con usuarios, notas de entrevistas, casos de uso funcionales, historias de usuario, criterios de accesibilidad.
¿Por donde comenzar?
Define el objetivo
Define para que quieres usar el design.md – Mi recomendación es que comiences con objetivos que te ayuden a acelerar el trabajo. Te permite explorar su uso, ganas experiencia creándolo y te da confianza para usarlo en proyectos de mayor escala.
Define sus partes esenciales
Crea la estructura del documento. Una sección dedicada a los tokens de diseño (colores, tipografías, márgenes, etc), otra dedicada a los botones, inputs. Esto puede ser tan extenso como lo sea el sistema de diseño. No es necesario hacerlo en una sola pasada ni necesitas tener el documento perfecto para darle uso. A medida que vas avanzando vas a agregando nuevos componentes.
Crea las especificaciones
Una vez con la estructura lista, comienza a crear cada una de las especificaciones. Tu sistema de diseño ya existe y ahora tienes que traducirlo de un formato visual (figma) a un formato markdown (a menos que tengas conectados MCPs). Este proceso se enfoca en traducir el sistema de diseño en un lenguaje que la IA pueda interpretar. Puedes hacerlo con este editor de Markdown online o puedes escribir un documento y luego pedirle a la IA que lo convierta a formato markdown.
Carga el design.md a la IA que usas
Dependiendo de cada IA tendrás que cargar design.md de una forma u otra pero todas coinciden en que tienes que cargar este archivo. Chatgpt a través de la creación de agentes o adjuntando el documento en la barra de chat, Gemini a través de integración con Drive, NotebookLM o directamente sobre el agente, con Claude a través de la estructura de proyectos.
Pide al agente que cree la propuesta de una funcionalidad
Comienza a usar el agente IA que tiene cargada las instrucciones del design.md. Esto te dará la oportunidad para verlo trabajar en algo real y ver que puedes corregir. Es normal que mientras no tengas el sistema de diseño completo algunos componentes (botones, inputs, tipografía, por ejemplo) sean distintos a lo que documentaste. Eso es señal de que tienes que agregar instrucciones adicionales o revisar las que ya tienes. Cuando el agente cometa un error generado diseño, pídele que te explique por que cometió ese error. Eso te ayuda a aprender sobre como funciona.
Aprende a crear design.md – Clase online en vivo
Aprende las herramientas y los métodos para crear tu propio design.md. Con ello podrás dar instrucciones específicas a la inteligencia artificial para crear propuestas personalizadas que respeten la consistencia de tu producto.
Clase de 2 horas.
Online, en vivo y participativo.
No necesitas conocimiento previos
Agregar un comentario