Repolode
Enviar
google-labs-code

google-labs-code/design.md

Uma especificação de formato e uma CLI para descrever uma identidade visual (tokens de design e texto explicativo), ajudando agentes de código a criar UIs consistentes.

Ver no GitHubSite
Estrelas
28,435
Forks
2,250
Issues abertas
42
Último commit
há 5 dias

O que é?

DESIGN.md é um formato de arquivo para descrever um sistema de design para agentes de código. Cada arquivo combina tokens de design legíveis por máquina, escritos no front matter YAML, com texto em Markdown que explica por que esses valores existem e como aplicá-los. Os tokens especificam cores, tipografia, espaçamento, cantos arredondados e propriedades de componentes, enquanto o texto explica a intenção, como o tom, o papel da paleta e as regras de uso.

O projeto oferece o pacote npm @google/design.md, que inclui uma ferramenta de linha de comando. O comando lint valida um arquivo de acordo com a especificação, sinaliza referências inválidas a tokens e verifica as taxas de contraste WCAG entre pares de cores de componentes, retornando JSON estruturado. O comando diff compara duas versões de um sistema de design e relata alterações no nível dos tokens e regressões encontradas pelo lint. O comando export converte tokens para JSON de configuração do Tailwind v3, blocos CSS @theme do Tailwind v4 ou arquivos de tokens W3C DTCG. Também há uma API de linter programática para projetos TypeScript.

O formato está na versão alpha, e a especificação e a CLI continuam em desenvolvimento ativo.

Recursos principais

  • 01Combina tokens de design em YAML com justificativas em Markdown em um único arquivo.
  • 02O comando lint valida a estrutura, referências inválidas a tokens e taxas de contraste WCAG.
  • 03O comando diff relata alterações no nível dos tokens entre duas versões de um sistema de design.
  • 04Exporta tokens para configurações do Tailwind v3 e v4 e para JSON W3C DTCG.
  • 05Oferece uma API de linter para TypeScript e um comando spec para fornecer contexto a prompts.

Casos de uso

  • Fornecer a um agente de código uma descrição persistente das cores, da tipografia e dos estilos de componentes de uma marca.
  • Verificar em CI se um sistema de design tem referências inválidas a tokens ou cores de componentes com baixo contraste.
  • Sincronizar tokens de design com um projeto Tailwind usando o comando export.

Início rápido

  1. 1

    Instalar o pacote de CLI

    npm install @google/design.md
  2. 2

    Validar um arquivo DESIGN.md

    npx @google/design.md lint DESIGN.md

Antes de usar

  • O formato está na versão alfa e pode mudar à medida que amadurece.
  • O projeto não é elegível para o programa de recompensas por vulnerabilidades de código aberto do Google.

Tópicos

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

Perguntas frequentes

O que é design.md?
Uma especificação de formato e uma CLI para descrever uma identidade visual (tokens de design e texto explicativo), ajudando agentes de código a criar UIs consistentes. DESIGN.md é um formato de arquivo para descrever um sistema de design para agentes de código. Cada arquivo combina tokens de design legíveis por máquina, escritos no front matter YAML, com texto em Markdown que explica por que esses valores existem e como aplicá-los. Os tokens especificam cores, tipografia, espaçamento, cantos arredondados e propriedades de componentes, enquanto o texto explica a intenção, como o tom, o papel da paleta e as regras de uso.
design.md é gratuito? Qual é a licença?
design.md é open source sob a licença Apache-2.0. Confira os termos da licença antes de usá-lo em produtos comerciais.
design.md ainda é mantido?
Manutenção ativa. O último commit de design.md foi em 16 de out. de 2026.
Para que posso usar design.md?
Fornecer a um agente de código uma descrição persistente das cores, da tipografia e dos estilos de componentes de uma marca. Verificar em CI se um sistema de design tem referências inválidas a tokens ou cores de componentes com baixo contraste. Sincronizar tokens de design com um projeto Tailwind usando o comando export.
Como instalar design.md?
Instalar o pacote de CLI: npm install @google/design.md Validar um arquivo DESIGN.md: npx @google/design.md lint DESIGN.md
Onde consigo design.md?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/google-labs-code/design.md

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados