Passo a passo
Como eu fiz o site do JD com IA
O jdandrade.art é o portfólio do João Daniel Andrade, artista e escritor. Eu fiz com o Claude Code e o Higgsfield, e a primeira versão foi pro ar no mesmo dia.
Aqui estão os prompts que fizeram diferença, na ordem e do jeito que eu escrevi, com erro de digitação e tudo. As obras da galeria são do JD, feitas à mão por ele.
Desenhe o site antes de pedir o site
Em vez de descrever o site em palavras, eu gerei uma imagem de como ele ficaria, com as cores e o estilo de arte do JD. Usei o Higgsfield com o GPT Image, o modelo de imagem do ChatGPT, e anexei quatro referências: um fundo de gradiente com granulado, duas artes do JD e um site de outro estúdio como referência de layout. O JD gostou da imagem antes de existir uma linha de código.
High-fidelity desktop portfolio website comp, 1440x900. Panoramic stage website: compact nav above one uninterrupted horizontal illustrated procession. Oversized JD ANDRADE typography recedes behind three scene windows like cinema frames; foreground silhouettes cross frame edges; a lit storybook aperture labeled LIVROS anchors the right, ARTE anchors the left. Red-orange-deep-blue grain fills the canvas, bold editorial rhythm, kinetic but highly legible. Show start of next project strip. Real text only: JD ANDRADE, ARTISTA + ESCRITOR, ARTE, LIVROS; greek all other text. (anexei 4 imagens: o gradiente com granulado, uma pintura do JD, uma ficha de personagem do JD e o site de referência)
O primeiro prompt pro Claude
Abri o Claude Code na pasta do projeto, no computador, e mandei isto com a imagem do passo 1 anexada:
Preciso fazer um site de portfolio para um autor e artista, JD Andrade (joao daniel andrade) que ele fez os livros Maldito destino e Cavaleiro da terra Esse é o instagram dele, use os mcps pra realmente ver o estilo de arte dele: https://www.instagram.com/jdandradeilustra/ https://www.instagram.com/jdandradearte/ Tem um artstation dele: https://www.artstation.com/jdandrade eu gerei um template com o higgsfield e ele gostou: (anexei a imagem do passo 1) nessa imagem eu gostaria que o site fosse interativo, digno de um artista, e que tivesse essas camadas que se movem em efeito paralax, como podemos ver tem a camada da silkhueta das crianças/arbustos, queria que isso fosse implementado também
Logo depois, mais duas mensagens curtas:
se precisar pode usar o higgsfield MCP, tem 1800 creditos, pode gerar quantas imagens necessárias
https://fonts.google.com/?preview.script=Latn&query=zalando eu uso essas aqui, normal e a expanded
Ajuste olhando a tela, com print
Daqui pra frente eu não explicava o problema. Tirava um print, marcava onde estava errado e mandava uma frase. Estas foram de verdade, nessa ordem:
o efeito do parallax quando a gente scrolla pra baixo fica meio estranho, da pra ver as bordas da imagem
ajeita só a lua aqui, nao ta batendo
adicione a logo maior nesse aqui, e faça um padding maior ,ta grudado no topo
Faz o efeito do mouse na foto dele uma aba de arrastar tipo antes/depois
errei, deixa o efeito da lente, deixa o arrastar apenas no mobile
ajeite a hero section para mobile, ta estranho
quando scrollo rapido as fotos das artes tem um flicker
Cole o pedido do cliente do jeito que veio
Quando o JD viu a primeira versão, ele me mandou uma lista de alterações. Eu não reescrevi nada: colei a lista inteira com uma frase em cima.
o cliente pediu algumas alteraçoes GERAL - trocar o laranja do destaque pelo verde que tá na logo - link do meu behance tá quebrado, vou mandar ele aqui de novo: https://www.behance.net/joodaandrade - colocar Zalando Sans Expanded nos títulos PÁGINA 1 - diminuir só um pouco a logo - mudar ordem do índice pra SOBRE / ARTE / LIVROS / COMISSÕES (tirar o contato, e deixar opção de contato só no que tá junto com o menu) - tirar o "explore" do meio e colocar uma sessão nova de Design - tirar o "artista + escritor" - vou mandar dps uma silhueta legal pra usar no lugar das que tão ali - vou mandar dps quais imagens usar em cada um dos blocos principais - colocar o texto "arte" e "livros" dentro do bloco, e quando passa o mouse por cima fica um preto sobrepondo a imagem, dando foco pro texto (a lista seguia com mais sete seções: Parte 2, Arte, Livros, Universos, Comissões, Sobre e Contato)
Depois de aplicar, uma frase pra não quebrar o que já existia:
garanta que o painel admin bate com essas alteraçoes que fizemos
Um painel pra ele atualizar sozinho
Portfólio de artista muda toda semana. Se cada obra nova dependesse de mim, o site ia ficar velho em um mês. Então pedi um painel com senha, onde o próprio JD edita tudo.
Queria que pegasse automaticamente os posts do artstation, mas se fosse dar muito trabalho e nao ficasse igual esse, deixa quieto, vamos fazer uma aba com login e senha protegidos para que ele possa publicar os posts/artes e editar as informaçoes do site, artes em destaque, adicionar livros, editar etc, alterar fotos
a aba de projetos é customizavel pelo painel de adm?
Na aba admin e projetos, permita o ajuste da posiçao da imagem de abertura, para nao cortar igual o exemplo acima
https://linktr.ee/jdandradeart ele tem um linktree, vamos fazer uma aba de links, onde ele pode editar pelo painel de ADM
faça uma versão em ingles tbm, garanta que os textos possam ser escritos tanto em ptbr quanto em ingles na pagina de admin
Colocar no ar
Três mensagens. A Vercel é onde o site fica hospedado; o GitHub guarda cada versão do código.
manda pro vercel, usando o MCP e me mande o link
faz o vercel conectar nesse github, que ai quando commita o github o vercel atualiza
ele comprou um dominio no namechap, mande uma mensagem pra eu copiar e colar mandando pra ele configurar o dns
Com os dois conectados, quando o JD salva alguma coisa no painel, aquilo vira uma versão nova no GitHub e o site se atualiza sozinho. Ninguém precisa me chamar.
Acabamento: peça nota
No fim, em vez de caçar defeito sozinho, eu pedia pro Claude revisar e dar nota.
BELEZA, garanta que ta tudo 100% responsivo no mobile, tem
garanta que o site está performando bem em celulcares menos potentes
Como tá o SEO do site?
arrume tudo
qual nota vc dá pra esse site? considerando que é um portifólio
e agora? veja novamente, considere a nota como design, responsivo, etc, um site pika
O site no ar
