CSS
Coletar estilos das páginas
Insira uma URL. O Milten lê as folhas de estilo disponíveis e agrupa cores, fontes, tamanhos, espaçamentos, raios dos cantos, sombras e propriedades personalizadas recorrentes.
Cores, fontes e espaçamento do seu site
Reúna cores, fontes e espaçamentos da página em um relatório. Encontre valores repetidos e diferenças para uniformizar o design.
Como o scanner funciona
Das fontes CSS a um resumo de frequência de valores
Frequência
Agrupar valores repetidos
O relatório conta com que frequência cores, fontes, tamanhos, espaçamentos, border-radius, box-shadow e variáveis CSS idênticos aparecem. Quanto mais um valor se repete, mais ele se parece com um token de sistema.
Resumo
Mostrar concentração e dispersão
O resumo ajuda você a ver rapidamente onde os valores se repetem de forma consistente e onde a interface acumulou uma ampla dispersão de cores, tamanhos, fontes ou sombras.
Leitura
Ajuda a escolher o que revisar primeiro
Compare cores, tamanhos de fonte e espaçamentos repetidos com sua função nos componentes. Valores próximos podem ser intencionais. O resumo de CSS ajuda a planejar tokens, mas não gera um design system pronto nem atribui nomes semânticos.
O que está no relatório
Sete grupos de valores de estilo
Cores
Cores repetidas
O scanner mostra os valores de cor e suas contagens de uso para que você possa separar cores de sistema de tons locais acidentais.
valorusos
Fontes
Fontes e tamanhos de texto
O relatório inclui valores de font-family detectados, com que frequência aparecem, e valores de font-size repetidos.
font-familyfont-size
Espaçamento / tamanho
Tamanhos, margin, padding, width e height
O resumo destaca valores de tamanho e espaçamento usados com frequência. Uma grande dispersão aqui geralmente indica consistência fraca de grid.
pxrem
Raio / sombras
Raios e sombras
Grupos separados mostram valores repetidos de border-radius e box-shadow, incluindo casos em que um valor aparece mais vezes que os outros.
raiosombra
Variáveis CSS
Propriedades personalizadas detectadas
O scanner mostra as propriedades personalizadas do CSS e suas contagens de uso para que você veja quais variáveis já funcionam como tokens.
--varusos
Perguntas frequentes
Perguntas frequentes sobre o scanner de Tokens CSS
Respostas curtas sobre quais valores entram no relatório e como ler o resumo de frequência.
Qual é a diferença entre o scanner de Tokens CSS e exportar variáveis CSS?
Ele olha mais amplamente: além das propriedades personalizadas, o relatório mostra cores, fontes, valores de font-size, tamanhos, espaçamentos, border-radius e box-shadow repetidos. A frequência de uso importa para cada valor.
Posso analisar um site sem acesso ao repositório?
Sim. A primeira passagem pode rodar em páginas públicas e estilos vinculados. Se parte do CSS estiver atrás de autenticação ou não carregar na página, ela não entrará no resumo.
O relatório mostra conflitos de tokens?
O relatório mostra valores repetidos e sua distribuição. Ele não determina conflitos semânticos nem sugere nomes de tokens. Sua equipe decide como organizar os tokens.
O scanner é útil se os tokens já existem?
Sim. O relatório mostra quais variáveis CSS foram encontradas e com que frequência são usadas, além de onde ainda existem valores brutos repetidos por perto: cores, tamanhos, espaçamentos ou sombras.
Como devo ler valores vazios ou raros?
Um valor raro pode pertencer a um estado ou componente importante. Verifique onde ele é usado antes de agrupá-lo ou removê-lo. A frequência ajuda a priorizar a investigação, mas não decide quais valores devem se tornar um único token.
Serviços relacionados
O que verificar em seguida neste serviço
Auditoria de CSS
Encontre folhas de estilo grandes, duplicatas e estilos não utilizados durante o carregamento. Esses estilos podem ser necessários em outras páginas ou após ações do usuário.
AbrirVerificação de HTML
Encontre erros de HTML e estruturas de página complexas demais. O relatório identifica os elementos afetados.
AbrirAcessibilidade
Encontre problemas de acessibilidade com uma verificação automática. Receba recomendações; uma avaliação completa também exige verificações manuais.
AbrirVerificação de JavaScript
Verifique arquivos JavaScript, erros de carregamento e código não utilizado durante o carregamento. Encontre scripts que precisam de uma análise mais detalhada.
Abrir