Extract Design System skill

O que ela faz

Você dá o endereço de um site público e ela roda o programa extract-design-system pelo npx, com um Chromium do Playwright, pra abrir a página e ler o visual. Depois resume o que achou: as prováveis cores primária, secundária e de destaque, as fontes e as escalas de espaçamento, arredondamento e sombra, se existirem.

Gera quatro arquivos: os dados brutos e os normalizados numa pasta .extract-design-system, e os tokens em design-system/tokens.json e design-system/tokens.css. Dá pra pedir só a extração, ou regerar os tokens a partir de uma extração que você já tem.

Pede confirmação antes de mexer em qualquer código, estilo ou configuração do seu app, e não sobrescreve um design system que você já tenha. Avisa que o resultado é ponto de partida, não cópia perfeita.

Nas palavras de quem fez

Quando usar

• Começar um site novo com a paleta e as fontes de uma referência
• Levantar as cores e fontes do site de um cliente que não tem manual de marca
• Montar as variáveis CSS de um projeto a partir do site atual
• Comparar o visual dos concorrentes

Depois de instalar, é só pedir assim

• Extrai o design system de https://exemplo.com.br e me resume as cores e as fontes
• Faz só a extração do site do meu cliente, sem gerar os arquivos de tokens
• Já tenho o normalized.json. Regera o tokens.css

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

• Gen Agent Trust HubAlerta
• SocketPassou
• SnykAlerta

Perguntas