Repolode
Enviar
google-labs-code

google-labs-code/design.md

Especificación de formato y CLI para describir una identidad visual (tokens de diseño y texto) y ayudar a los agentes de código a crear interfaces coherentes.

Ver en GitHubSitio web
Estrellas
28,435
Forks
2,250
Issues abiertos
42
Último commit
hace 5 días

¿Qué es?

DESIGN.md es un formato de archivo para describir sistemas de diseño a agentes de código. Cada archivo combina tokens de diseño legibles por máquinas, escritos como front matter YAML, con texto en Markdown que explica por qué existen esos valores y cómo aplicarlos. Los tokens especifican colores, tipografía, espaciado, esquinas redondeadas y propiedades de componentes; el texto explica aspectos como el tono, la función de cada color de la paleta y las reglas de uso.

El proyecto incluye un paquete npm, @google/design.md, con una herramienta de línea de comandos. El comando lint valida un archivo conforme a la especificación, detecta referencias a tokens no válidas y comprueba las relaciones de contraste WCAG entre pares de colores de componentes; devuelve JSON estructurado. El comando diff compara dos versiones de un sistema de diseño e informa de los cambios en los tokens y de las regresiones detectadas por lint. El comando export convierte los tokens en JSON de configuración para Tailwind v3, bloques CSS @theme para Tailwind v4 o archivos de tokens W3C DTCG. También hay una API de linter programática para proyectos de TypeScript.

El formato está en versión alpha, y tanto la especificación como la CLI siguen en desarrollo activo.

Funciones clave

  • 01Combina tokens de diseño en YAML con explicaciones en Markdown en un solo archivo.
  • 02El comando lint valida la estructura, detecta referencias a tokens no válidas y comprueba las relaciones de contraste WCAG.
  • 03El comando diff informa de los cambios en los tokens entre dos versiones de un sistema de diseño.
  • 04Exporta tokens a configuraciones para Tailwind v3 y v4, y a JSON de W3C DTCG.
  • 05Ofrece una API de linter para TypeScript y un comando spec para proporcionar contexto a los prompts.

Casos de uso

  • Proporcionar a un agente de código una descripción persistente de los colores, la tipografía y los estilos de componentes de una marca.
  • Comprobar en CI que un sistema de diseño no tenga referencias a tokens no válidas ni colores de componentes con poco contraste.
  • Sincronizar tokens de diseño con un proyecto de Tailwind mediante el comando export.

Inicio rápido

  1. 1

    Instalar el paquete de CLI

    npm install @google/design.md
  2. 2

    Validar un archivo DESIGN.md

    npx @google/design.md lint DESIGN.md

Antes de usarlo

  • El formato está en versión alfa y puede cambiar a medida que madure.
  • El proyecto no reúne los requisitos para participar en el programa de recompensas por vulnerabilidades de código abierto de Google.

Temas

#design-tokens#design-system#coding-agents#llm#tailwind#css#linting#typescript

Preguntas frecuentes

¿Qué es design.md?
Especificación de formato y CLI para describir una identidad visual (tokens de diseño y texto) y ayudar a los agentes de código a crear interfaces coherentes. DESIGN.md es un formato de archivo para describir sistemas de diseño a agentes de código. Cada archivo combina tokens de diseño legibles por máquinas, escritos como front matter YAML, con texto en Markdown que explica por qué existen esos valores y cómo aplicarlos. Los tokens especifican colores, tipografía, espaciado, esquinas redondeadas y propiedades de componentes; el texto explica aspectos como el tono, la función de cada color de la paleta y las reglas de uso.
¿design.md es gratuito? ¿Qué licencia tiene?
design.md es open source bajo la licencia Apache-2.0. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿design.md sigue mantenido?
Mantenimiento activo. El último commit de design.md fue el 16 oct 2026.
¿Para qué puedo usar design.md?
Proporcionar a un agente de código una descripción persistente de los colores, la tipografía y los estilos de componentes de una marca. Comprobar en CI que un sistema de diseño no tenga referencias a tokens no válidas ni colores de componentes con poco contraste. Sincronizar tokens de diseño con un proyecto de Tailwind mediante el comando export.
¿Cómo se instala design.md?
Instalar el paquete de CLI: npm install @google/design.md Validar un archivo DESIGN.md: npx @google/design.md lint DESIGN.md
¿Dónde consigo design.md?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/google-labs-code/design.md

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados