zanwei/design-dna

O que é?

Recursos principais

• 01Extrai tokens de design de cor, tipografia, espaçamento, layout e movimento a partir de referências.
• 02Descreve aspectos qualitativos do estilo, como clima, composição e sensação de interação.
• 03Cataloga efeitos visuais, incluindo WebGL, partículas, shaders e movimento controlado pela rolagem.
• 04Gera novas UIs a partir de um JSON de DNA salvo e do seu próprio conteúdo.
• 05Medição opcional de cores baseada em pixels, com verificação ΔE da saída gerada.
• 06Instala pela skills CLI para Cursor, Claude Code, Codex e outros agentes.

Casos de uso

• Reproduzir a aparência de um site de referência em um novo projeto sem precisar adivinhar os valores.
• Salvar a linguagem visual de uma equipe em uma especificação JSON versionada e compartilhada entre projetos.
• Verificar se uma UI gerada corresponde à paleta de cores da marca dentro de uma tolerância medida.
• Transformar um conjunto de screenshots de inspiração em um briefing de design consistente para um agente.

Início rápido

1. 1

   Instale o skill com o skills CLI (requer Node.js)

   npx skills add zanwei/design-dna
2. 2

   Ou instale-o para um agent específico, como o Cursor, sem interação

   npx skills add zanwei/design-dna -a cursor -g -y
3. 3

   Peça ao seu agent para analisar screenshots de referência ou URLs e convertê-los em Design DNA JSON; em seguida, gerar a UI com base nisso

Antes de usar

• !Este é um agent skill, então precisa de um agent de programação com IA compatível para ser executado.
• !Os scripts opcionais de cores determinísticas exigem um clone local do repositório e a execução de npm install.

Tópicos

Perguntas frequentes

O que é design-dna?

Uma skill de agente que extrai a identidade visual de UIs de referência para um JSON estruturado de Design DNA e, em seguida, gera UIs correspondentes. design-dna é uma skill de agente que captura a identidade visual de designs existentes em JSON legível por máquina. Ela recebe screenshots, imagens ou URLs e cria um perfil em três dimensões: tokens de design (cor, tipografia, espaçamento, layout, forma, elevação, movimento e componentes), estilo qualitativo (clima, linguagem visual, composição, imagens e sensação de interação) e efeitos visuais, como Canvas, WebGL, partículas, shaders, movimento controlado pela rolagem e glassmorphism.

design-dna é gratuito? Qual é a licença?

design-dna é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.

design-dna ainda é mantido?

Atualizado nos últimos 6 meses. O último commit de design-dna foi em 28 de ago. de 2026.

Para que posso usar design-dna?

Reproduzir a aparência de um site de referência em um novo projeto sem precisar adivinhar os valores. Salvar a linguagem visual de uma equipe em uma especificação JSON versionada e compartilhada entre projetos. Verificar se uma UI gerada corresponde à paleta de cores da marca dentro de uma tolerância medida. Transformar um conjunto de screenshots de inspiração em um briefing de design consistente para um agente.

Como instalar design-dna?

Instale o skill com o skills CLI (requer Node.js): npx skills add zanwei/design-dna Ou instale-o para um agent específico, como o Cursor, sem interação: npx skills add zanwei/design-dna -a cursor -g -y Peça ao seu agent para analisar screenshots de referência ou URLs e convertê-los em Design DNA JSON; em seguida, gerar a UI com base nisso

Onde consigo design-dna?

O código-fonte e as instruções de instalação estão no GitHub: https://github.com/zanwei/design-dna