Uma alternativa ao CSS Peeper com exportações prontas para colar
O CSS Peeper é um inspetor antigo feito para designers: você clica em um elemento para ler os estilos, navega pelas cores e imagens de uma página e exporta recursos. O Stylasso faz outro trabalho. Ele lê a página inteira como um design system e entrega tudo como código pronto para colar: variáveis CSS, um tema do Tailwind v4, um DESIGN.md para ferramentas de IA ou um tema de shadcn/ui.
Lado a lado
Os dados do CSS Peeper vêm de csspeeper.com/pricing em 8 de novembro de 2026; confira lá os planos atuais.
| CSS Peeper | Stylasso | |
|---|---|---|
| Inspecionar os estilos de um elemento | Sim (básico grátis, avançado pago) | Não, ele lê a página inteira |
| Cores usadas na página | Sim; grupos de cores semânticos no plano Ultra | Sim, com a função de cada uma (primary, background, surface, text, muted, border) e contraste, grátis |
| Tipografia | Ferramentas de tipografia nos planos pagos | Fontes como aparecem, com amostras, e escala tipográfica com altura de linha e espaçamento entre letras, grátis |
| Imagens, ícones, SVGs | Ver e exportar, grátis | Ícones SVG inline e logo, limpos; nunca exporta imagens da página |
| Exportar variáveis CSS, Tailwind v4, JSON | Não consta | Sim, grátis |
| DESIGN.md para ferramentas de IA | Não consta | Sim, grátis |
| Tema de shadcn/ui, tokens do Figma (W3C) | Não consta | Pro |
| Verificação de contraste | Verificador de contraste nos planos pagos | Contraste de cada cor, grátis |
| Preço | Plano gratuito; Professional e Ultra são assinaturas com cobrança mensal ou anual | Grátis; o Pro custa US$ 9,99 uma única vez, sem assinatura |
| Reembolso | Não é oferecido nas assinaturas pagas (segundo o FAQ deles) | 14 dias |
Quando usar cada um
Se você inspeciona elementos um por um, pega imagens das páginas ou quer checar contraste enquanto navega, o CSS Peeper (ou o próprio DevTools do navegador) atende bem. Se você precisa do sistema por trás de um site, pronto para um projeto com Tailwind, um app com shadcn/ui ou um prompt para o Cursor ou o Claude Code, o Stylasso foi feito para isso, e as exportações de código são grátis.
Como o Stylasso funciona
- Abra um site e clique no ícone do Stylasso. Ele só lê aquela aba, e só depois do clique.
- Confira a paleta com as funções, as fontes, a escala tipográfica, o espaçamento, os raios e as sombras.
- Copie como variáveis CSS, tema do Tailwind v4, DESIGN.md ou JSON, ou salve um moodboard em PNG.
Teste com três sites de exemplo na página inicial sem instalar nada.