Ir para o conteúdo

SkillUI: CLI para extrair design systems

SkillUI é uma interface de linha de comando que extrai o sistema de design completo de qualquer site, repositório Git ou código‑local, gerando uma pasta que o Claude Code consome automaticamente para criar interfaces que seguem exatamente aquele visual.

Instalação

Para usar o SkillUI basta instalá‑lo globalmente com o npm. É necessário ter Node.js versão 18 ou superior. 

npm install -g skillui

Para ativar o modo “ultra”, que realiza extração visual completa usando Playwright, instale também essa dependência: 

npm install playwright
npx playwright install chromium

Dica

Após a instalação, verifique a versão com skillui --version para garantir que tudo está funcionando.

Como funciona

O SkillUI percorre o alvo fornecido (URL, repositório ou diretório local) e coleta:

  • Cores utilizadas em CSS e assets
  • Tipografia (fontes, tamanhos, pesos)
  • Espaçamento (margens, paddings, grid)
  • Animações e transições definidas em CSS ou JavaScript
  • Componentes reutilizáveis (botões, cards, modais etc.)
  • Screenshots de telas importantes

Todo esse material é organizado em uma estrutura de pastas que o Claude Code lê automaticamente. A extração padrão é feita por análise estática pura — não há chamadas a modelos de IA nem necessidade de chaves de API.

Observação

Se o alvo for um site que depende fortemente de renderização client‑side, considere usar o modo ultra com Playwright para obter resultados mais fiéis.

Uso rápido

Siga os passos abaixo para extrair o design system de um site e pedir ao Claude Code que gere uma UI correspondente.

  1. Extrair o design system a partir de uma URL: 

    skillui --url https://notion.so

    O comando cria uma pasta chamada notion-design (ou o nome baseado no host) contendo os artefatos extraídos.

  2. Abrir a pasta no Claude Code: 

    cd notion-design
claude

  3. Solicitar a criação da interface:

    Dentro do chat do Claude Code, digite algo como:

    "Build me a landing page that matches this design system"

    O modelo já possui todas as informações de cores, tipografia, componentes etc. e produz código que segue exatamente o visual extraído.

Atenção

Certifique‑se de ter o Claude Code instalado e autenticado em seu ambiente antes de executar o passo 3.

Pontos-chave

  • SkillUI é um CLI que extrai sistemas de design de sites, repositórios ou código‑local usando análise estática pura.
  • A saída é uma pasta consumível pelo Claude Code, permitindo que o modelo gere UI fiel ao visual original sem necessidade de API keys ou IA externa.
  • Para captura visual completa, opcionalmente instale Playwright (modo ultra).
  • O fluxo de uso envol

Ferramentas e Tecnologias

  • [[npm]]
  • [[Playwright]]

Nota pessoal

https://github.com/amaancoderx/npxskillui

Tags

design-system #extração #claude