Como usar o Claude Code para criar sites e efeitos de animação de nível de US$ 10.000.

Seguindo as habilidades de design de instalação, coletar materiais de referência, escrever dicas de construção, implementar animações de cursor spotlight, revisar e corrigir rodada por rodada, e depois refiná-las, este guia completo permite que você comece com zero conhecimento de programação. Este artigo é organizado e traduzido do artigo do monokern X.
(Nota anterior: Claude Code lança novo comando /goals: separar execução e avaliação para evitar que agentes de IA sejam preguiçosos e mintam)
(Complemento de contexto: Mão na massa: aprenda passo a passo como usar 7 Agentes para atualizar o Vibe Coding para um fluxo de desenvolvimento de nível profissional)

Índice

Toggle

• Primeiro passo: Instalar habilidades de design
• Segundo passo: Encontrar materiais de referência
• Terceiro passo: Escrever dicas de construção
• Quarto passo: Animação do bloco herói
• Quinto passo: Revisão e correção
• Sexto passo: Refinamento e polimento
• Resultado

Um agente cobra 5.000 dólares para criar um site de portfólio tão bem feito.

Eu terminei o meu em 2 horas. Aqui está o processo completo.

Este é um registro prático real, não um guia genérico de modelo.

Usei meu próprio portfólio como exemplo: os materiais de referência que realmente usei, os prompts que realmente enviei, os bugs que realmente encontrei e corrigi.

Não é necessária nenhuma experiência em programação.

Primeiro passo: Instalar habilidades de design

Por padrão, a saída de design do Claude é medíocre. As mesmas fontes, o mesmo layout, a mesma aparência plana. Duas habilidades resolvem isso.

• Frontend Design — Desenvolvido pela Anthropic, roda em segundo plano, bloqueia fontes excessivamente usadas como Inter, incentiva tipografia mais ousada e melhora a qualidade do texto.

Cole isto no Claude Code:

Instale esta skill: github.com/anthropics/skills/tree/main/frontend-design

Quando aparecer o prompt, permita a alteração e instale globalmente.

• UI/UX Pro Max — 57 estilos de interface, 95 esquemas de cores, 56 combinações de fontes. Você o chama diretamente ao construir.

Cole isto no Claude Code:

Instale este plugin usando NPM: github.com/nextlevelbuilder/ui-ux-pro-max

Mude o seletor de modo para o Modo Auto, para que o Claude não pergunte se você permite em cada etapa.

Segundo passo: Encontrar materiais de referência

Não descreva seu site ideal do zero; em vez disso, mostre ao Claude como você quer que ele pareça.

Meu portfólio usou "Il Capo Production" do Awwwards como referência principal.

awwwards.com/sites/il-capo-production

Aquele estilo escuro e cinematográfico era exatamente o que eu queria.

Aqui está como eu realmente usei:

Em vez de tirar um print da página inteira e dizer "faça isso para mim", capturei parte por parte do que gostei:

• 1.png — Bloco herói
• 2.png — Bloco abaixo do herói (trabalhos apresentados como vídeo + título/descrição)
• 6.png — Rodapé e base do site
• 11.png — Página de projeto individual
• 12.png — Tela de carregamento

Quanto à página de portfólio (página listando todos os trabalhos), o site de referência não tinha um layout correspondente. Fui ao Pinterest e encontrei um layout diferente com estilo semelhante, tirei um print separado e nomeei como 11.png.

Não tente copiar um site inteiro; pegue emprestado as partes boas de cada site.

Coloque todos os materiais na pasta /reference dentro do projeto.

Terceiro passo: Escrever dicas de construção

No início do prompt, use /ui-ux-pro-max para ativar as habilidades de design.

Este é o prompt exato que usei para o portfólio:

Prompt para copiar:

/ui-ux-pro-max
Crie um site de portfólio pessoal de alto nível para um desenvolvedor front-end. Deve parecer caro, moderno e tecnicamente impressionante,
com animações elegantes que carregam suavemente em qualquer dispositivo.
Use as referências de design na pasta reference: 1.png é o bloco herói, 2.png é o bloco abaixo do herói
(exibindo projetos no formato vídeo + título/descrição), 6.png é o rodapé/base do site, 7.png é a página de portfólio listando todos os projetos,
11.png é um exemplo de página de projeto individual ao clicar em qualquer projeto no portfólio, 12.png é a tela de carregamento.
No centro do bloco herói, use me.png para colocar minha foto.
Use example.png como placeholder para todas as imagens de trabalhos/projetos.

Antes de começar a construir, me faça quaisquer perguntas que precisem de esclarecimento.

A última linha é crucial
O Claude vai parar e fazer 4-6 perguntas sobre estilo, fontes, layout, nível de animação, tom do conteúdo. Suas respostas se tornarão a base de todo o site.

Seja específico ao responder; quanto mais preciso aqui, menos idas e vindas depois.

Depois que você responder, o Claude leva cerca de 5 minutos para planejar e mais 10 para construir. A primeira saída já é bastante sólida.

Quarto passo: Animação do bloco herói

Colocar uma foto comum no centro de um bloco herói escuro é entediante.
Algo precisa acontecer quando o usuário move o mouse.

Para meu portfólio, pensei na ideia do spotlight:

• O bloco inteiro é escuro
• Minha foto fica quase invisível por padrão
• O cursor age como uma lanterna — "iluminando" a mim
• Uma segunda camada é apenas uma versão mais clara e quente da mesma foto

Descrevi esse conceito para o Claude e pedi que implementasse:

"No bloco herói, quero um efeito de cursor tipo lanterna/spotlight. Fundo escuro. Minha foto quase invisível por padrão. Quando o cursor se move sobre o bloco, ele atua como um spotlight — revelando uma versão mais clara e quente da foto abaixo através de uma máscara circular de bordas suaves que segue o cursor. Raio 100-150px, com bordas esmaecidas suaves. Por favor, implemente esse efeito."

O Claude fez de primeira. O efeito ficou exatamente como descrito — o usuário move o cursor, a foto ilumina onde ele aponta.

Quinto passo: Revisão e correção

Antes de fazer uma verificação formal de qualidade, role pelo site e anote tudo que parecer errado.

Minha lista após a primeira construção:

• Transições entre rotas de página parecem abruptas — preciso de fades suaves
• O efeito spotlight tem um atraso perceptível, não acompanha o cursor
• Alguns elementos transbordam da tela, não se ajustam à tela
• As fontes não correspondem ao site de referência — parecem mais genéricas que a estética Il Capo

Anote todos os problemas, e então envie todos de uma vez:

"Aqui estão alguns problemas que precisam ser corrigidos, por favor resolva todos:\

2. [Descrever problema 1]\
3. [Descrever problema 2]\
4. [Descrever problema 3]"

Enviar todos os problemas de uma vez é muito importante.

Sexto passo: Refinamento e polimento

Depois de corrigir os bugs óbvios, faça uma verificação estruturada de qualidade. Cole isto no Claude:

"Por favor, revise este site de acordo com os seguintes critérios e aponte honestamente onde precisa melhorar:
— Tipografia (estamos usando fontes de IA excessivamente usadas como Inter?)
— Cores (o esquema de cores é contido ou bagunçado?)
— Hierarquia (o tamanho do texto guia o olhar corretamente?)
— Animações (suaves e intencionais, ou saltitantes e aleatórias?)
— Versão móvel (é realmente projetada para celular, ou apenas uma versão desktop reduzida?)
— Texto (contido e específico, ou preenchimento genérico de IA?)"

O Claude dará uma pontuação para cada item. Leia tudo, concorde ou discorde de cada ponto, e então compile os problemas que deseja corrigir em um único prompt e envie de uma vez.

Não peça para corrigir pontos com os quais você discorda. Você conhece seu site melhor que ele.

Resultado

Você termina com um site sólido. Não perfeito — mas bom o suficiente.

Na primeira construção, algumas coisas não estarão totalmente corretas. Talvez a versão móvel precise de mais uma passada, ou alguma animação pareça ligeiramente errada. Isso é normal.

Itere a partir daqui. Encontre uma coisa para melhorar e corrija-a a cada dia.