Hace unas semanas publiqué en este blog cómo crear un DESIGN.md desde cero. Paso a paso, con estructura, con tokens y con toda la lógica detrás. Si todavía no lo leíste, te lo recomiendo antes de seguir aquí.
Crear un DESIGN.md desde cero lleva tiempo… no es difícil, pero requiere que ya tengas claro tu sistema de diseño o tu UI kit:
- Colores
- Tipografía (las fonts)
- Espaciados
- Componentes
- Etc
Si tienes todo eso definido, genial… pero si estás empezando un proyecto nuevo, o si quieres un punto de partida antes de afinar, hay formas de adelantar trabajo.
Te cuento…
Cómo extraer el DESIGN.md de un sitio web
Design Extractor es un servicio que hace exactamente lo que su nombre dice.
Pegas la URL pública de una web y el servicio analiza todo: colores, fuentes, espaciados, variables CSS y patrones de componentes.
Finalmente te genera un archivo DESIGN.md estructurado y listo para usar. Dependiendo del sitio puede durar segundos o minutos, ya me contarás.
Para qué sirve esto en la práctica?
Tienes una referencia visual que te gusta. Un competidor bien resuelto, un producto que admiras, un estilo que quieres tomar como punto de partida para tu proyecto, lo que sea…
En vez de analizar la web manualmente y transcribir tokens a mano, pegas la URL, le das al botón y obtienes un DESIGN.md.
Ojito, no te estoy diciendo que copies el sistema de diseño de otra empresa ok?
Te estoy diciendo que uses su estructura como referencia para construir el tuyo.
Cómo usar Design Extractor paso a paso
- Entra design-extractor.com
- Pega la URL de la web que quieres analizar
- Espera a que el servicio procese la página
- Descarga o copia el DESIGN.md generado
- Ábrelo en tu IDE (editor) y empieza a adaptarlo a tu proyecto
El resultado no será perfecto, pero te da una base bastante sólida con la que trabajar en lugar de empezar en un archivo Markdown en blanco.
Una cosa más que te puede interesar, la galería del propio servicio ya incluye archivos DESIGN.md de Airbnb, Stripe, Supabase, Linear y otros productos conocidos, por si quieres ver cómo queda antes de hacer la tuya.
Analizar esos archivos también te enseña cosas: cómo otros estructuran sus tokens, qué nomenclatura usan, qué incluyen y qué dejan fuera.
De verdad, echa un ratito con ello antes de ponerte a editar el tuyo.
Sigamos…
Buscar archivos DESIGN.md ya hechos
Lo de aquí abajo también te va a gustar…
Hay un repositorio público en GitHub llamado awesome-design-md, mantenido por VoltAgent, que recopila archivos DESIGN.md de sistemas de diseño de webs conocidas.
La idea es la misma que con el recurso anterior, descargas un DESIGN.md, lo metes en la raíz de tu proyecto, lo analizas y lo adaptas a tu estilo.
Personalizar archivos DESIGN.md
Siguiendo el hilo de lo que dije antes «metes el archivo DESIGN.md en tu IDE o editor de código» y puedes:
- Editarlo a mano
- O personalizar cada uno de sus detalles con ayuda de Claude, ChatGPT u otro asistente.
Puedes pedirle a Claude o a ChatGPT que adapte el archivo a tus tokens. Le describes tu DS, tus colores, tus fuentes, etc, y la máquina reescribe el DESIGN.md con esos valores.
Por último…
Por dónde empezar con un DESIGN.md
Si nunca trabajaste con DESIGN.md, mi recomendación es esta:
- Primero lee el post anterior donde explico qué es y cómo funciona
- Luego elige uno de los atajos que te conté aquí arriba para tener un archivo base
- Y después usa e itera ese archivo en tu próximo proyecto para ver qué pasa
Aprende haciendo, recuerda siempre una de mis máximas.
Si tienes duda me lo dices,
Seguimos.
Aprende sobre UX/UI + IA, Figma y Product Design
📣 Apúntate a mi newsletter semanal
