Como deixar um site com cara de R$50.000 usando o Claude Code (skill overkill-web-design)

Você já entrou num site de produto top (Linear, Stripe, Vercel, Apple) e pensou: "por que o meu site não tem esse impacto"?

Não é o framework. Não é o orçamento. É um conjunto de decisões de detalhe — micro-interações, hierarquia visual, animação no momento certo, cor que respira — que somadas fazem um site parecer caro.

A skill overkill-web-design é o cérebro de design que ensina o Claude Code a aplicar essas decisões. Neste post você vai:

1. Instalar a skill
2. Aplicar ela num site qualquer (ex: uma landing page Next.js comum)
3. Ver a diferença antes/depois

Se você ainda não instalou o Claude Code, começa por aqui.

O mandato da skill

A frase que ela carrega é direta:

"A diferença entre um site de R$5k e um de R$50k são 10.000 detalhes que ninguém nomeia mas todo mundo sente."

Quando você ativa essa skill, o Claude vira um auditor de design obsessivo. Em vez de dizer "tá bonito assim", ele aponta:

• "O hover do botão tá sem feedback — adiciona micro-translação no eixo Y"
• "A hierarquia tipográfica tá flat — primeiro título precisa ser 2,5x maior que o segundo"
• "A seção 3 não tem nada pra rolar — o usuário não sabe que tem mais conteúdo"
• "A imagem da hero não tem parallax — perdeu profundidade"

Tudo isso aplicado em código de produção, não em comentário de "talvez seja bom mudar X".

Passo 1: Baixar a skill

Vai em /skills/overkill-web-design e clica Baixar skill. Vai vir o overkill-web-design.zip.

Passo 2: Instalar

Mesma estrutura de qualquer skill — descompacta em ~/.claude/skills/:

# Mac / Linux
mkdir -p ~/.claude/skills
unzip ~/Downloads/overkill-web-design.zip -d ~/.claude/skills/

# Windows (PowerShell)
mkdir $env:USERPROFILE\.claude\skills -Force
Expand-Archive $env:USERPROFILE\Downloads\overkill-web-design.zip -DestinationPath $env:USERPROFILE\.claude\skills\

Confere:

ls ~/.claude/skills/overkill-web-design/
# Deve listar: SKILL.md

Passo 3: Aplicar num site real

Vou usar uma landing page Next.js comum como exemplo. Você pode usar qualquer projeto frontend — React, Vue, Svelte, vanilla, não importa.

Cria uma página simples primeiro (sem nenhuma firula):

mkdir teste-overkill
cd teste-overkill
npx create-next-app@latest .
claude

E manda pro Claude:

Quero uma landing page pra um SaaS chamado "Mestre do Tempo" — app de produtividade. Faz uma landing comum, sem nada de especial, só o básico funcionando: hero, 3 features, CTA, footer.

O Claude faz a página padrão. Roda npm run dev e abre em http://localhost:3000 — vai ver uma página funcional, mas chata. Hero centralizado, 3 cards iguais, botão azul-padrão.

Agora aplica a skill:

Aplica overkill nessa landing. Estética: tech moderno, dark mode, laranja como cor primária. Quero parallax na hero, micro-interações em cada hover, animação on-scroll, e uma seção de "como funciona" com cinema-grade transitions.

O Claude lê o SKILL.md da overkill-web-design, e em vez de jogar 4-5 animações genéricas, ele vai aplicar o checklist completo:

1. Hierarquia visual — fontes, pesos, espaçamento revistos
2. Micro-interações — hover, focus, active states em todos botões/links
3. Movimento intencional — parallax sutil, scroll-triggered animations no momento certo
4. Feedback no toque — cursor custom, ripple, ou indicador de carregamento
5. Profundidade — sombras em camadas, blur de fundo, glassmorphism onde fizer sentido
6. Detalhes "secretos" — easter eggs no console, animação no logo no hover, transição entre páginas
7. Performance — tudo isso sem matar o LCP (a skill avisa quando algo pesa demais)

Antes / depois (real)

A primeira versão (sem skill):

• Hero: H1 + parágrafo + botão azul
• Features: 3 cards iguais com ícone genérico
• CTA: caixa centralizada, botão padrão
• Footer: 3 colunas de links

A versão com overkill-web-design aplicada:

• Hero com parallax, badge animado pulsando, headline com SplitText letra-por-letra, botão com back.out easing no hover, glow de fundo respirando
• Features em grid assimétrico com card destaque maior, ícones animados no hover (não só cor mudando), conexão visual entre cards
• CTA com timeline GSAP que orquestra entrada de elementos, contador animado de "X pessoas usando agora"
• Footer vivo — animação no logo, transition no hover dos links, decoração sutil de fundo

Mesma estrutura, dez vezes mais polish. E sem você pedir cada uma dessas coisas — a skill já tem o checklist.

Quando NÃO usar

A skill é honesta sobre quando não ativar:

• ❌ Painel admin / CRUD interno
• ❌ Site de documentação (precisa ler rápido, não impressionar)
• ❌ Dashboard performance-critical onde cada KB importa
• ❌ Quando o cliente pediu explicitamente "simples"

overkill-web-design é pra showcase, portfólio, marketing site, landing de produto — lugares onde a primeira impressão é o produto.

Como combinar com outras skills

Pareia muito bem com a design-style, que tem 30+ prompts de estética específica (Brutalism, Cyberpunk, Modern Dark, Bauhaus). Você instala as duas e pede:

Aplica overkill com estética modern dark cyberpunk nessa página

A design-style injeta o sistema visual cyberpunk. A overkill-web-design aplica o polish. As duas trabalham juntas sem conflitar.

Resumão

1. Baixa em /skills/overkill-web-design
2. Descompacta em ~/.claude/skills/
3. Cria sua landing comum primeiro
4. Pede pro Claude "aplica overkill" com a estética que você quiser
5. Veja seu site virar uma versão "$50k" sem ter contratado um estúdio

Próximo post vou mostrar a ebook-publishing — a skill que cobre o ciclo inteiro de lançar um ebook (KDP, Apple Books, audiobook narrado por IA). Pra não perder, cadastra seu email.