SkillUI

O que faz

Já viu um site lindo e pensou "queria o meu com essa cara"? Essa skill ensina o Claude Code a usar a SkillUI, uma ferramenta gratuita que funciona como um conta-gotas de designer: ela olha o site, anota as cores, as letras, os espaçamentos e as animações, e entrega uma "ficha de estilo" pro Claude.

Com essa ficha, o Claude monta a sua página com o mesmo visual, mas com o seu conteúdo. Nada de "deixa mais bonito" no chute: ele usa os códigos de cor e as fontes exatas.

Quando usar

Landing page com cara profissional: você gosta do visual de um site famoso e quer algo no mesmo nível pra sua mentoria, curso ou produto.

Manter o padrão da sua marca: você já tem um site e quer que toda página nova saia com as mesmas cores e fontes.

Reaproveitar o visual de um projeto seu: a SkillUI também lê uma pasta do seu computador ou um repositório do GitHub (o "Google Drive de código").

Como instalar

1. Baixa o ZIP e descompacta dentro de ~/.claude/skills/ (no Windows: C:\Users\SEU-USUARIO\.claude\skills\).

2. Precisa ter o Node 18 ou maior (o programa que roda ferramentas como a SkillUI). Baixa a versão LTS em nodejs.org.

3. Abre o Claude Code e pede em português:

copia o visual do site https://linear.app e monta uma landing page pra minha mentoria com esse estilo

O Claude roda a SkillUI sozinho com npx (o "executa sem instalar" do Node), confere o resultado olhando o print do site e constrói a página.

Os 4 jeitos de usar

Rápido (padrão): lê as cores e fontes do site. Leva segundos.

Ultra: abre um navegador invisível, rola a página, tira prints e captura animações e efeitos de passar o mouse. Precisa instalar o Playwright antes (o Claude te guia).

Pasta: lê o visual de um projeto que está no seu computador.

Repositório: baixa um projeto do GitHub e lê o visual dele.

O que essa skill faz que a SkillUI sozinha não faz

Testei a SkillUI aqui no próprio Mestre do Claude e ela errou duas coisas: disse que o site é claro (ele é escuro) e chamou o laranja da marca de "cor de erro". A skill manda o Claude comparar a ficha com o print antes de construir e corrigir o que estiver errado.

Ela também resolve uma pegadinha: a SkillUI salva sozinha uma cópia incompleta da ficha na sua pasta de skills, e essa cópia passa a valer em todos os seus projetos. A skill faz o Claude perguntar se você quer guardar (e completa a cópia) ou apagar.

Cuidados

Inspiração, não cópia: use cores, letras e estilo. Nunca copie logo, nome, textos ou fotos de outra marca. O Claude recusa essa parte.

Só leia projeto de confiança: nos modos pasta e repositório, a SkillUI executa arquivos de configuração do projeto lido. Use só em projeto seu ou de fonte confiável.

Link privado não: pra tirar o print, a SkillUI manda o endereço do site pro microlink.io (um serviço de fora). Não use com link de painel interno ou com senha no endereço.

Crédito

A SkillUI foi criada por Amaan (github.com/amaancoderx/npxskillui), licença MIT. Esta skill em português, que ensina o Claude a usar a ferramenta com segurança, é do Mestre do Claude.