Ferramentas
Design tokens de qualquer site como variáveis CSS
Digite o endereço de um site e receba os design tokens dele como propriedades customizadas CSS: cores, estilos de texto, espaçamento, raios, sombras e largura do conteúdo, medidos na página como ela é renderizada.
Experimentestripe.comlinear.appairbnb.com
Como funciona
O Stylepack abre o site em um navegador de verdade, mede o que é renderizado (não o que a folha de estilos diz) em quatro larguras e nos dois temas, e guarda o resultado como um pacote de design. Um site já medido responde na hora; um novo leva menos de um minuto. Todo valor nesta página vem desse pacote.
Perguntas
O que é um design token?
Um valor de design com nome (uma cor, um tamanho de fonte, um passo de espaçamento) usado em todo um produto. Como variáveis CSS, os tokens permitem reestilizar um site inteiro mudando uma única declaração.
De onde vêm os nomes?
Da função que cada valor exerce na página medida: --color-primary é o destaque, --text-headline-lg um estilo de título, --space-4 um passo de espaçamento. O tokens.json do pacote traz os mesmos nomes no formato W3C.
Isso é o design system inteiro?
São os valores. O pacote de design adiciona o comportamento (hover, focus, menus, movimento, layout responsivo, modo escuro), as receitas de componentes e as capturas de tela, no formato a partir do qual os agentes de código com IA constroem.