Como criar websites e efeitos de animação de nível de 10 000 dólares com Claude Code

Desde instalar competências de design, recolher materiais de referência, escrever instruções de construção, até implementar animações de cursor spotlight, rever e corrigir iterativamente, e depois polir e refinar, este guia completo permite-te começar sem qualquer experiência em programação. Este artigo foi organizado e traduzido a partir do artigo do monokern X.
(Contexto anterior: Claude Code lança novo comando /goals: separar execução e avaliação, evitando que o agente AI seja preguiçoso e minta)
(Contexto adicional: Prática: guia passo a passo para usar 7 Agentes para elevar o Vibe Coding a um fluxo de desenvolvimento de nível especialista)

Índice

Toggle

• Primeiro passo: Instalar competências de design
• Segundo passo: Procurar materiais de referência
• Terceiro passo: Escrever instruções de construção
• Quarto passo: Animação da secção hero
• Quinto passo: Revisão e correção
• Sexto passo: Polimento e refinamento
• Resultado

Um agente cobra 5.000 dólares para criar um site de portfólio com um aspeto tão bom.

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

Este é um registo de implementação real, não um guia de modelo genérico.

Uso o meu próprio portfólio como exemplo: os materiais de referência que realmente usei, as instruções que realmente enviei, os erros que realmente encontrei e corrigi.

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

Primeiro passo: Instalar competências de design

Por predefinição, a saída de design do Claude é medíocre. As mesmas fontes, a mesma tipografia, o mesmo aspeto plano. Duas competências resolvem este problema.

• Frontend Design — desenvolvido pela Anthropic, corre em segundo plano, bloqueia fontes excessivamente usadas como Inter, promove tipografia mais ousada, melhora a qualidade do texto.

Cola isto no Claude Code:

Instala esta competência: github.com/anthropics/skills/tree/main/frontend-design

Quando aparecer o aviso, permite as alterações e instala globalmente.

• UI/UX Pro Max — 57 estilos de interface, 95 esquemas de cores, 56 combinações de fontes. Invocas-no diretamente durante a construção.

Cola isto no Claude Code:

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

Muda o seletor de modo para Modo Auto, para que o Claude não te pergunte se permites a cada passo.

Segundo passo: Procurar materiais de referência

Não descrevas o teu site ideal do zero; em vez disso, faz o Claude ver como queres que seja.

O meu portfólio usou o "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 queria.

Eis como usei na prática:

Não tirei um screenshot da página inteira e disse "faz-me isto"; em vez disso, capturei partes individuais de que gostei:

• 1.png — Secção hero
• 2.png — Secção abaixo do hero (trabalhos apresentados como vídeo + título/descrição)
• 6.png — Rodapé e fundo do site
• 11.png — Página de projeto individual
• 12.png — Ecrã de carregamento

Quanto à página do portfólio (página que lista todos os trabalhos), o site de referência não tinha um layout correspondente. Fui ao Pinterest e encontrei um layout diferente, de estilo semelhante, e tirei um screenshot separado, nomeando-o 11.png.

Não tentes copiar exatamente um site. Pega emprestadas as boas partes de cada um.

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

Terceiro passo: Escrever instruções de construção

No início das instruções, usa /ui-ux-pro-max para ativar as competências de design.

Esta é a instrução exata que usei para o meu portfólio:

Instrução para copiar:

/ui-ux-pro-max
Cria um site de portfólio pessoal de alto nível para um programador frontend. Deve parecer caro, moderno e tecnologicamente impressionante,
com animações elegantes que carregam suavemente em qualquer dispositivo.
Usa as referências de design na pasta reference: 1.png é a secção hero, 2.png é a secção abaixo do hero
(apresentando trabalhos no formato vídeo + título/descrição), 6.png é o rodapé/fundo do site, 7.png é a página de portfólio
listando todos os trabalhos, 11.png é um exemplo de página de projeto individual ao clicar em qualquer trabalho do portfólio, 12.png é o ecrã de carregamento.
No centro da secção hero, usa me.png para colocar a minha foto.
Todos os marcadores de posição de imagens de trabalho/projeto usam example.png.

Antes de começares a construir, faz-me quaisquer perguntas que precises de esclarecer.

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. As tuas respostas vão tornar-se a base de todo o site.

Sê específico nas respostas. Quanto mais preciso fores aqui, menos idas e vindas terás depois.

Depois de responderes, o Claude demora cerca de 5 minutos a planear e depois cerca de 10 minutos a construir. A primeira saída já é bastante sólida.

Quarto passo: Animação da secção hero

Colocar uma foto normal no centro de uma secção hero escura é aborrecido.
Quando o utilizador move o rato, algo tem de acontecer.

Para o meu portfólio, tive a ideia do spotlight:

• Toda a secção é escura
• A minha foto está quase invisível por predefinição
• O cursor age como uma lanterna — "ilumina-me"
• A segunda camada é apenas uma versão mais brilhante e quente da mesma foto

Descrevi este conceito ao Claude e pedi-lhe que o implementasse:

"Na secção hero, quero um efeito de cursor tipo lanterna/spotlight. Fundo escuro. A minha foto está quase invisível por predefinição. Quando o cursor se move sobre a secção, atua como um spotlight — revela uma versão mais brilhante e quente da foto por baixo, através de uma máscara circular de borda suave que segue o cursor. Raio 100-150px, bordas esbatidas suaves. Por favor, implementa este efeito."

O Claude fez logo à primeira. O efeito é exatamente como descrito — o utilizador move o cursor, a foto ilumina-se onde ele aponta.

Quinto passo: Revisão e correção

Antes de fazeres uma verificação de qualidade formal, percorre primeiro o site por ti próprio e anota tudo o que pareça estranho.

A minha lista após a primeira construção:

• As transições entre rotas de página pareciam abruptas — precisava de fades suaves
• O efeito spotlight tinha um atraso percetível, não acompanhava o cursor
• Alguns elementos ultrapassavam o ecrã e não se adaptavam
• As fontes não correspondiam ao site de referência — pareciam mais genéricas do que a estética Il Capo

Anota todos os problemas, depois envia-os de uma só vez:

"Aqui estão alguns problemas que precisam de ser corrigidos. Por favor, trata de todos: \

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

É muito importante enviar todos os problemas de uma só vez.

Sexto passo: Polimento e refinamento

Depois de corrigires os erros óbvios, faz uma verificação de qualidade estruturada. Cola isto no Claude:

"Por favor, revê este site de acordo com os seguintes critérios e diz honestamente o que precisa de ser melhorado:
— Tipografia (estamos a usar fontes AI excessivamente usadas como Inter?)
— Cor (o esquema de cores é contido ou confuso?)
— Hierarquia (o tamanho do texto guia corretamente o olhar?)
— Animação (suave e intencional, ou brusca e aleatória?)
— Versão mobile (é verdadeiramente desenhada para telemóvel, ou é apenas uma versão de desktop encolhida?)
— Texto (contido e específico, ou texto genérico de IA de preenchimento?)"

O Claude vai dar uma pontuação a cada ponto. Lê tudo, depois concorda ou discorda em cada ponto. Depois, junta os problemas que queres corrigir numa única instrução e envia-a de uma só vez.

Não deixes que ele corrija os pontos com que discordas. Tu conheces o teu site melhor do que ele.

Resultado

Acabas por ter um site sólido. Não perfeito — mas suficientemente bom.

Na primeira construção, algumas coisas não vão estar completamente certas. Talvez a versão mobile precise de mais uma volta, ou uma animação pareça ligeiramente desviada. É normal.

A partir daqui, itera. Encontra uma coisa para melhorar todos os dias e corrige-a.