Tricholomaaurantiumknottiness355/design-dna

O que design-dna faz?

Extrair, estruturar e aplicar a identidade visual de design como Design DNA legível por máquina, abrangendo tokens, estilo e efeitos.

Visão Geral

O Design DNA é uma representação estruturada e padronizada da identidade visual de um projeto. Esta skill capacita o agente a:

• Extrair informações de design a partir de fontes como arquivos Figma, CSS, SVGs ou capturas de tela.
• Estruturar essas informações em um formato consistente (JSON/YAML) com tokens, estilos e efeitos.
• Aplicar o Design DNA a novos componentes, páginas ou temas de forma automatizada.

Plataformas Suportadas

• Claude Code
• Cursor
• Codex
• Outros agentes compatíveis com SKILL.md

Como Usar

1. Execute o comando de extração: design-dna extract
2. A skill analisará as fontes configuradas e gerará um arquivo design-dna.json.
3. Utilize o DNA gerado para aplicar estilos consistentes em novos componentes.

Exemplo de Saída

{
  "tokens": {
    "colors": {
      "primary": "#3B82F6",
      "secondary": "#10B981",
      "background": "#F9FAFB"
    },
    "typography": {
      "heading": {
        "fontFamily": "Inter",
        "fontSize": "2rem",
        "fontWeight": "700"
      }
    },
    "spacing": {
      "sm": "8px",
      "md": "16px",
      "lg": "24px"
    }
  },
  "styles": {
    "shadows": {
      "sm": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
      "md": "0 4px 6px -1px rgba(0, 0, 0, 0.1)"
    }
  },
  "effects": {
    "transitions": {
      "default": "all 0.3s ease"
    }
  }
}

Aplicação

Após extrair o DNA, você pode aplicá-lo gerando CSS, configuração do Tailwind, ou temas para frameworks como React, Vue ou Angular.

# Gerar tema Tailwind a partir do DNA
design-dna apply --framework tailwind

Integração Contínua

Adicione a extração do Design DNA ao seu pipeline de CI/CD para manter a consistência visual automaticamente.

Contribuição

Contribuições são bem-vindas! Consulte o repositório original para detalhes.