DESIGN.md (Google Labs)

Es un formato para escribir un archivo llamado DESIGN.md que describe la identidad visual de tu proyecto. Dentro lleva dos partes:

• Datos exactos (arriba, entre ---): colores con sus códigos, tipos de letra, tamaños, espacios, etc.
• Explicación en palabras: el porqué de esos valores y cómo aplicarlos.

Piénsalo como una carta de estilo para tu web: en vez de repetirle a la IA "quiero fondo crema, letra oscura, botones rojos" en cada mensaje, lo escribes una vez en DESIGN.md y la IA lo lee siempre.

Ejemplo de contenido:

---
name: Heritage
colors:
  primary: "#1A1C1E"
  tertiary: "#B8422E"
typography:
  h1:
    fontFamily: Public Sans
    fontSize: 3rem
---

Minimalismo arquitectónico con aire periodístico...

Trae además un **programa (CLI)** que comprueba que el archivo está bien escrito:

| Comando | Para qué |
|---------|----------|
| `lint` | Revisa el archivo y avisa de errores (colores mal referenciados, mal contraste...) |
| `diff` | Compara dos versiones y detecta cambios |
| `export` | Convierte tu estilo a formato Tailwind o de tokens |
| `spec` | Muestra la especificación del formato |

Lo interesante: **no es una skill de texto**, sino un **estándar** que tu IA aprende a leer. Es de Google Labs y usa el estándar de "design tokens" del W3C.

Cuando quieres que tu IA aplique siempre el mismo estilo en un proyecto:

• "Define el estilo de mi proyecto en un solo archivo" → escribes DESIGN.md.
• "Que la IA no invente colores cada vez" → el archivo los fija.
• "Revisa que mi estilo sea coherente y accesible" → lint.
• "Pásame mi estilo a Tailwind" → export --format css-tailwind.

Sí, si haces webs/apps y quieres consistencia visual y dejar claro el estilo a la IA.

No te sirve si no haces nada visual ni trabajas con estilos.

Veredicto: ✅ SÍ, es limpia.

• El formato: es un archivo de texto. Nada más.
• El CLI (@google/design.md): los revisé. Solo lee, analiza y escribe archivos en tu ordenador. No hay conexión a internet (solo descarga el propio paquete), ni ejecución de comandos, ni robo de datos.
• Origen: lo publica Google Labs, con licencia Apache-2.0. Muy fiable.
• Estado: el propio README avisa de que el formato está en versión "alpha" (en pruebas), así que puede cambiar. No es un riesgo de seguridad, solo que la especificación puede evolucionar.

• Fijar el estilo del proyecto: creas DESIGN.md con tus colores y fuentes.
• Validarlo: npx @google/design.md lint DESIGN.md.
• Detectar cambios: npx @google/design.md diff DESIGN.md DESIGN-v2.md.
• Exportar a Tailwind: npx @google/design.md export --format css-tailwind DESIGN.md.
• Dárselo a la IA: la IA lee el DESIGN.md y aplica el estilo automáticamente.

npm install @google/design.md
npx @google/design.md lint DESIGN.md

Importante: no "se instala" como una skill en el asistente. Es un archivo que pones en tu proyecto y un CLI de apoyo. Funciona con cualquier asistente que lea los archivos de tu proyecto.

• Repositorio: https://github.com/google-labs-code/design.md
• Especificación: https://github.com/google-labs-code/design.md/blob/main/docs/spec.md
• Google Stitch: https://stitch.withgoogle.com/docs/design-md/specification
• Paquete npm: https://www.npmjs.com/package/@google/design.md