Design Systems
Design DNA
Extrai um design de referência para JSON estruturado e depois gera a partir dele.
O que é
Um fluxo em três fases que captura a identidade de design em tokens mensuráveis, estilo qualitativo e efeitos visuais. Ele gera um JSON de Design DNA completo e depois aplica esse JSON a novo conteúdo.
>-
Por que isso importa para design
- Transforma um screenshot ou uma URL em valores nomeados de cor, tipografia e espaçamento.
- Registra clima, composição e voz de marca, não só tokens mensuráveis.
- Captura efeitos de Canvas, WebGL, shader e scroll que o CSS puro não consegue expressar.
O que cobre
- Design system tokens
- Design style
- Visual effects
- Analyzing references
- Generating from JSON
- Phase combinations
Como instalar
Design DNA
-
Clone o repositório.
git clone https://github.com/zanwei/design-dna -
Aponte o Codex para o arquivo da skill.
SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Peça o schema para ver as três dimensões antes de analisar qualquer coisa.
-
Entregue ao Codex imagens ou URLs de referência e peça um DNA JSON preenchido.
-
Passe o JSON junto com seu conteúdo para gerar uma página HTML autocontida.
Todo plugin aqui é gratuito, open source e leva até a sua fonte original.
Mais na lista codex-design ↗Mais plugins de design para o Codex
Frontend & UI O que ele faz gpt-taste Cria landing pages estilo premiado com movimento de scroll em GSAP e grids bento sem falhas. 
Design Systems O que ele faz Stitch Design Taste Escreve um DESIGN.md que guia o Google Stitch para telas que fogem do genérico. 
Frontend & UI O que ele faz image-to-code Gera imagens de design primeiro, analisa cada uma e só depois constrói o código de frontend correspondente. 
Frontend & UI O que ele faz imagegen-frontend-mobile Gera fluxos de telas de app mobile em nível premium, como imagens, não como código. Próximo passo
Projete com o Open Design, sem a configuração
Instale este plugin por conta própria ou rode uma camada de design curada em volta do Codex com o Open Design. Use sua própria chave e seja dono do resultado.