Por que extrair um design system antes de começar?
Todo projeto começa com uma análise. Antes de abrir o editor, antes de escrever uma linha de código, a gente precisa entender o que já existe.
Quando um cliente chega com um site rodando, a primeira coisa que fazemos é extrair o design system atual. Cores, fontes, espaçamentos, tokens — tudo que define a identidade visual daquele projeto.
O processo
- Acessa o site e abre o DevTools
- Mapeia as cores — background, texto, accent, borders
- Identifica as fontes — family, weights, sizes
- Extrai os tokens — radius, shadows, spacing scale
- Documenta num arquivo estruturado
Por que criamos uma ferramenta pra isso?
Porque fazer isso manualmente em todo projeto é repetitivo. A gente automatizou o processo e agora qualquer pessoa pode usar.
O Design System Extractor cola a URL, faz o scraping visual e entrega tudo organizado. Sem Figma, sem plugin pago, sem cadastro.
O que vem por aí
Estamos trabalhando na v2 que vai incluir análise de componentes e sugestões de melhoria baseadas em padrões de mercado.