O clip que me fez parar e voltar a vê-lo três vezes tinha dez segundos. Uma versão de mim ilustrada em 3D, a caminhar lentamente por um estúdio vazio em tons de terracota, a parar para olhar de relance para a câmara e depois a desviar o olhar. 4K nativo. Nenhum upscaler no pipeline. E estava por trás do texto hero de um site de portfólio que eu tinha esboçado quarenta minutos antes com instruções que cabiam nas costas de um guardanapo.
É isso, resumido numa frase: construí um portfólio 3D animado — uma homepage completa com um vídeo de personagem em 4K, vivo e em loop, no hero — usando duas ferramentas que não comunicavam entre si e um handoff que as uniu. Claude Design 2.0 para o site. Seedance 2.0 4K da Higgsfield para o vídeo. Claude Code para levar tudo até produção.
Quero guiá-lo pela construção real, não pelo vídeo dos melhores momentos. Onde funcionou assustadoramente bem, onde ficou estranho, e as duas decisões iniciais que fizeram a diferença entre uma "landing page de AI slop" e algo em que eu poria o meu nome. As ferramentas são impressionantes, claro. Mas não foram as ferramentas que fizeram o resultado ficar bom.
Porque é que finalmente vale a pena construir um portfólio 3D animado
Durante anos, um vídeo de fundo no hero de um site de portfólio era um imposto pago em três moedas: um videógrafo ou motion designer, um pipeline de renderização e largura de banda. Ou se filmava material próprio, ou se licenciava um loop de banco de imagens que mil outros sites também usavam, ou se pagava a um artista 3D por uma animação à medida que começava nos quatro dígitos. A maioria dos criadores a solo olhava para essa conta e publicava antes uma imagem estática no hero.
Duas coisas mudaram em 2026 e inverteram a equação.
Primeiro, as ferramentas de web design com IA cruzaram a linha entre "gera um wireframe que reconstrói à mão" e "gera um site real, editável e exportável". Tenho acompanhado isto de perto — a minha análise da renovação do Claude Design de junho de 2026 cobriu o momento em que a ferramenta deixou de ser uma demo queima-tokens e passou a ser algo dentro do qual se conseguia terminar um projeto. O Claude Design 2.0 é o passo seguinte a esse: output totalmente editável, edição direta no canvas e um handoff limpo para o Claude Code.
Segundo — e esta é a parte que a maioria das pessoas subestima — os modelos de vídeo aprenderam a gerar alta resolução nativa. A Higgsfield levou o Seedance 2.0 até ao 4K nativo, segundo a página do modelo da Higgsfield. Não é 1080p ampliado depois. São frames em 4K a sair diretamente do modelo. Esse único detalhe elimina um passo inteiro, uma fase inteira de perda de qualidade e uma categoria inteira de frustração do tipo "porque é que a versão ampliada parece estar a derreter".
Junte as duas coisas e um criador a solo consegue agora produzir um portfólio que parece ter saído de uma agência. O senão — porque há sempre um senão — é que estas ferramentas recompensam a preparação e punem a preguiça com mais força do que qualquer software de design que já usei. O que me leva à primeira lição a sério.
O wireframe que esbocei antes de tocar em qualquer IA
É aqui que a maioria das pessoas se engana, e onde eu também quase me enganei. O instinto com uma ferramenta como o Claude Design 2.0 é abri-la, escrever "constrói-me um portfólio moderno e elegante com um vídeo no hero" e carregar em gerar. Vai receber algo. Vai parecer razoável. Vai também parecer exatamente igual ao algo que toda a gente que escreve esse prompt recebe, porque entregou ao modelo zero restrições e ele preencheu o vazio com a média estatística de todos os portfólios que alguma vez viu.
Por isso, antes de abrir o que quer que fosse, esbocei. Nada de sofisticado — um wireframe tosco da estrutura da página, de cima a baixo:
- Hero: ecrã inteiro,
100vh. Texto centrado. Uma call-to-action ancorada ao fundo do viewport, não a flutuar no meio. - Selected Work: uma grelha de projetos em destaque, logo abaixo da dobra.
- Callout de texto grande: uma frase sobredimensionada, do género que dá a um site um ponto de vista em vez de ser apenas um despejo de portfólio.
- Secção Journal / blog: escrita recente, porque um portfólio sem voz é um currículo.
- CTA no footer: mais um "vamos falar" claro antes de as pessoas saírem.
É tudo. Cinco secções, esboçadas em cerca de quatro minutos. Mas esse esboço é o artefacto de maior alavancagem de toda a construção, e vou explicar exatamente porquê na secção seguinte — porque o que fiz com ele importa mais do que o desenho em si.
Preparar a construção no Claude Design 2.0
Dentro do Claude Design 2.0, as duas primeiras escolhas definem o teto de tudo o que vem depois.
Primeira escolha: nenhum template. Os templates parecem um avanço. Na verdade, são uma jaula — passa o resto da sessão a lutar contra os pressupostos do template em vez de expressar os seus. Comecei de um canvas em branco para que a estrutura viesse do meu wireframe, e não da ideia de outra pessoa sobre o que um portfólio deve ser.
Segunda escolha: escolher o modelo mais capaz disponível. O Claude Design permite escolher o modelo subjacente e, para uma construção de raiz onde tanto o raciocínio de layout como o gosto visual contam, vou buscar o modelo Opus com o raciocínio de design mais forte que estiver disponível. Num site centrado no hero, em que a composição tem de carregar sozinha toda a primeira impressão, esse raciocínio justifica o custo.
Depois, a jogada propriamente dita: carreguei o esboço do wireframe e escrevi as instruções ao lado dele. Não "faz um portfólio". Em vez disso — hero a ecrã inteiro a 100vh, headline centrada, CTA fixada ao fundo, grelha de trabalhos selecionados abaixo, callout de texto sobredimensionado, secção de journal, CTA no footer. Descrevi também a sensação: confiante, editorial, com qualquer coisa de galeria. Terracota e preto como paleta de cor.
É isto que faz a diferença. Um wireframe claro mais instruções específicas não melhora o output só um bocadinho — muda por completo a categoria do output. O modelo deixa de adivinhar a sua intenção e passa a executá-la. Quando carreguei em gerar, o que veio de volta não era um template genérico. Era a minha estrutura: um hero a 100vh com imagens placeholder, um esquema terracota-e-preto que parecia uma decisão de design e não um valor por defeito, e todas as secções do meu esboço pela ordem em que as tinha esboçado.
Os placeholders eram exatamente isso — placeholders. Mas o esqueleto estava certo. E acertar no esqueleto logo na primeira geração é o jogo todo, porque tudo o que vem a seguir é refinamento, não reconstrução. Agora o site precisava de algo real naquele hero. Hora de mudar de ferramenta.
Gerar os assets no Higgsfield
O Higgsfield é uma plataforma, não um modelo único — pense nele como um único login à frente de uma prateleira inteira de geradores de imagem e vídeo. Num dia qualquer tem lá o GPT Image 2, o Nano Banana Pro, o Seedance 2.0 e uma longa lista de outros, todos atrás da mesma interface. O catálogo de modelos da própria Higgsfield continua a crescer, e já usei a plataforma o suficiente para ter opiniões sobre que modelo escolher em cada situação — aprofundei um pipeline de produção completo na minha construção de uma agência criativa automatizada com Claude e Higgsfield.
Para este portfólio, precisava de duas coisas: uma personagem ilustrada em 3D baseada em mim, e depois essa personagem animada num loop de hero em 4K. Dois trabalhos diferentes, dois modelos diferentes.
A estrela do trabalho de vídeo é o Seedance 2.0 4K. A razão pela qual importa não é só a qualidade — é o facto de gerar em 4K nativo. Na maioria das plataformas, "vídeo 4K" significa que o modelo renderiza a 1080p e um upscaler estica o resultado depois, o que suaviza arestas, introduz artefactos e acrescenta um passo de renderização. O Seedance 2.0 salta tudo isso. Os frames saem do modelo em 4K. Para um vídeo de fundo de hero que um visitante pode ver num monitor de 27 polegadas, essa nitidez nativa é o ponto todo. Sem imposto de upscaling.
Mas antes de poder animar o que quer que fosse, precisava da personagem. E essa acabou por ser a parte mais trabalhosa de toda a construção.
Acertar na personagem 3D (para lá do vale da estranheza)
Comecei a partir de uma única fotografia minha. O prompt: uma personagem de corpo inteiro ilustrada em 3D, fundo de estúdio em terracota a condizer com o site, enquadrada em 16:9 para encaixar diretamente no hero.
Primeiro tentei o GPT Image 2. Depois o Nano Banana Pro. E aqui vai a parte honesta — os primeiros resultados foram maus de uma forma muito específica. Eram demasiado realistas. Os modelos insistiam em empurrar para um render hiperdetalhado, quase fotográfico, da minha cara, e o efeito aterrava em cheio no vale da estranheza. Já não era uma personagem 3D estilizada; era um clone de mim ligeiramente errado, e o meu cérebro sinalizou-o como estranho em meio segundo. "Arrepiante" foi o termo técnico que usei na altura.
A solução foi iterar em direção a menos realismo, não mais. Ajustei os prompts para um look 3D claramente ilustrado e estilizado — o tipo de proporções e de acabamento de superfícies que se vê numa boa curta de animação, em que a personagem se lê como um objeto desenhado e não como um humano digitalizado. Ao fim de algumas passagens, acertei no equilíbrio: reconhecivelmente eu, claramente uma ilustração 3D, zero desconforto de vale da estranheza. Corpo inteiro, cenário de estúdio em terracota, 16:9.
Lição para guardar no bolso: quando uma personagem gerada por IA parece arrepiante, o instinto é acrescentar detalhe e realismo para a "corrigir". É ao contrário. O realismo é o que a está a estragar. Empurre para a estilização e o desconforto desaparece.
Com uma personagem de que realmente gostava, passei à animação.
Animar no Seedance 2.0 4K
Alimentei o Seedance 2.0 4K com a imagem da personagem escolhida e um prompt cirúrgico: a personagem caminha lentamente por um estúdio vazio, olha de relance para a câmara, desvia o olhar. Dez segundos. 16:9. 4K. Bitrate alto.
A especificidade ali é deliberada. "Caminha e olha de relance para a câmara" dá ao modelo um arco de movimento claro e simples — nada de acrobático, nada que exija uma física perfeita ao frame que ele possa estragar. Uma caminhada lenta e um único olhar é exatamente o tipo de movimento contido que estes modelos acertam, e contido é, de qualquer forma, o que se quer atrás do texto de um hero. Não está a fazer um videoclipe; está a fazer movimento ambiente que atrai o olhar sem roubar o foco à headline.
O download veio limpo, em 4K. Sem upscaling, sem pós-processamento, sem o passo "deixa-me passar isto pelo Topaz para o salvar". O clip era suficientemente nítido para ficar atrás de texto ao tamanho do viewport inteiro e aguentar-se.
Se preferir que alguém construa por si este tipo de pipeline de site-e-vídeo com IA, de ponta a ponta, é uma boa parte do que faço — pode ver o leque de trabalhos no meu perfil do Fiverr. Mas, honestamente, o workflow aprende-se, por isso deixe-me continuar a mostrar como as peças encaixam.
Colocar o clip 4K no hero
De volta ao Claude Design 2.0, integrar o vídeo foi a recompensa satisfatória. O clip entrou como fundo do hero — e as definições aqui importam mais do que as pessoas esperam:
- Sem som. Um vídeo de hero que toca som ao carregar a página é uma máquina de fazer bounces. Silencioso, sempre.
- Controlos escondidos. Sem barra de progresso, sem botão de play. É um fundo, não um leitor de multimédia.
- Em loop. Dez segundos, sem emendas, em repetição.
- Texto e CTA centrados em baixo, exatamente como o wireframe especificava, por cima da filmagem em movimento.
No momento em que a personagem em 4K começou a andar em loop atrás da headline, o site deixou de parecer um rascunho gerado e passou a parecer algo com pulso. É essa a viragem emocional que um hero em vídeo compra — um site estático diz "aqui está o meu trabalho", um site vivo diz "aqui está quem eu sou". Para um portfólio pessoal, essa diferença é o pitch inteiro.
Agora o site estava vivo, mas ainda não estava certo. O peso da headline era demasiado pesado, o laranja parecia sujo e havia um gradiente no hero que eu não queria. E é exatamente aqui que a edição no canvas do Claude Design 2.0 mostrou o seu valor.
Editar o design sem voltar a fazer prompt da página inteira
Esta é a funcionalidade que separa o Claude Design reconstruído da era "regenera e reza" das ferramentas de design com IA. Em vez de refazer o prompt da página inteira sempre que quer uma pequena alteração — arriscando que o modelo reconstrua algo de que gostava — edita diretamente no canvas. O editor visual reconstruído da Anthropic, segundo o anúncio do Claude Design da Anthropic, dá-lhe controlo WYSIWYG para que os pequenos ajustes não queimem um turno completo do modelo.
Na prática, há aproximadamente três níveis de edição, e saber qual usar é metade da habilidade:
- Manipulação direta — selecionar um elemento e simplesmente fazer: arrastá-lo, redimensioná-lo, reescrever o texto, acertar o alinhamento, sem prompt nenhum. Foi aqui que alinhei o conteúdo do hero à esquerda e aligeirei o peso da fonte da headline — alterações que teria sido absurdo descrever numa frase quando as podia ajustar à mão.
- Ajustes mais profundos — controlos tipo botão rotativo para espaçamento, cor e layout, com a possibilidade de propagar uma alteração pelo design inteiro de uma só vez. Foi aqui que tornei o laranja mais vivo em todo o site e troquei o site inteiro para uma fonte mais limpa num único movimento, em vez de andar à caça de cada bloco de texto.
- Acesso ao nível do código — descer ao markup subjacente quando quer um controlo cirúrgico que o editor visual não consegue dar. Foi aqui que eliminei o gradiente do hero de forma limpa.
Repare no que essa sequência realmente foi: alinhar o hero à esquerda à mão, avivar o laranja globalmente, trocar a fonte do site num movimento, descer ao código para remover o gradiente do hero e, depois, aligeirar o peso da headline. Cinco alterações com significado, zero regenerações da página inteira, e nem uma única vez arrisquei que o modelo reconstruísse "prestavelmente" uma secção com que eu estava satisfeito.
Este é o verdadeiro desbloqueio. O segredo sujo do workflow antigo era que cada novo prompt era uma aposta — pedia um ajuste e recebia três "melhorias" não solicitadas que agora tinha de desfazer. Editar diretamente devolve a iteração de design ao que ela devia ser: uma série de movimentos pequenos, seguros e reversíveis. Se quiser a versão estratégica mais profunda deste handoff, expliquei-a no meu workflow de sites com Claude Code e ferramentas de design com IA.
Com o look fechado, restava um trabalho antes de exportar: garantir que não se desfazia num telemóvel.
Tornar o portfólio 3D animado responsivo
Um vídeo no hero e um layout desktop bem afinado não valem nada se o site colapsar no mobile, onde está, na verdade, mais de metade dos seus visitantes. No Claude Design 2.0, verifiquei o comportamento em ecrã pequeno e corrigi a falha óbvia: as secções Journal e Selected Work, que no desktop viviam confortavelmente lado a lado, precisavam de empilhar na vertical em viewports estreitos, em vez de se espremerem em colunas ilegíveis.
É uma passagem rápida, mas não negociável. O hero em 4K reduz de escala com elegância — uma vantagem do 4K nativo é que faz downsample de forma limpa para ecrãs mais pequenos, em vez de ficar desfocado. Mas a lógica do layout tem de ser tratada deliberadamente. Empilhar as secções de duas colunas, confirmar que a CTA continuava ao alcance, verificar que a headline não transbordava — dez minutos de trabalho que o livram de publicar algo que parece partido exatamente no dispositivo em que a maioria das pessoas o vai abrir.
Com o responsivo resolvido, o protótipo estava genuinamente bom. Mas um protótipo do Claude Design, por mais polido que esteja, continua a ser um protótipo. Para o tornar real, precisava dele em código.
Exportar para o Claude Code para ter controlo a sério
É aqui que muitos sites construídos com IA batem num teto. Vivem dentro da ferramenta que os criou e, no momento em que quer algo que a ferramenta não faz, fica preso. O Claude Design 2.0 evita essa armadilha com um handoff limpo.
Dois caminhos de saída:
- Share → Send to Claude Code empurra o projeto diretamente para uma sessão do Claude Code.
- Download como ZIP entrega-lhe os ficheiros em bruto para abrir onde quiser.
Enviei-o para o Claude Code, pus tudo a correr localmente, e foi aqui que aconteceu o polimento que separa o "gerado por IA" do "construído profissionalmente" — as coisas sobre as quais uma ferramenta visual genuinamente não consegue raciocinar tão bem como um agente de código a trabalhar no codebase real:
- Fluxo e espaçamento das secções — apertar o ritmo vertical entre secções para que a página respire, em vez de parecer blocos empilhados. Já escrevi antes sobre como grande parte do "premium" é, na verdade, apenas disciplina de espaçamento e fluxo.
- Estados de hover nos itens do portfólio — o tipo de microinteração que sinaliza ofício. Uma elevação subtil, um deslocamento, algo que recompensa o cursor.
- Animações de fade-in — secções a surgirem suavemente com o scroll, em vez de aparecerem de repente.
- CTA do footer — refinar a call-to-action final para que a página feche com intenção.
O Claude Code a operar sobre ficheiros reais é uma ferramenta fundamentalmente diferente de um editor visual. Raciocina sobre o codebase inteiro, faz alterações consistentes de uma ponta à outra e dá-lhe o controlo ao nível do código que transforma um protótipo bonito em algo que realmente se põe em produção. A ferramenta de design leva-o quase até ao fim, e com beleza. O Claude Code fecha o último troço — aquele em que toda a gente repara.
Neste ponto, tinha um portfólio 3D animado genuinamente pronto a publicar: hero com personagem em 4K nativo, layout editorial, responsivo, estados de hover e animações de scroll polidos, código real que era meu. Mas continuava a ser, no fundo, uma homepage estática. E um portfólio que não se consegue atualizar é um beco sem saída.
O passo que transforma um protótipo numa plataforma
Aqui está a limitação honesta, aquela que os vídeos de demonstração polidos saltam. Tudo o que está acima produz um belo site estático. O Selected Work está hardcoded. As entradas do Journal estão gravadas no markup. Quer acrescentar um projeto novo? Editar código. Publicar um novo post no journal? Editar código. Isso serve para uma construção pontual e é completamente insustentável para um portfólio vivo.
A solução — e esta é a construção seguinte natural, feita inteiramente no Claude Code — é um CMS de backend. Uma camada de conteúdo que me permite gerir peças de portfólio, criar páginas individuais de projeto e publicar posts no journal sem tocar no codebase de cada vez. É essa a diferença entre uma homepage e uma plataforma. Já construí exatamente este padrão antes e documentei-o em tornar sites editáveis pelo cliente com o Claude Code, e a mesma abordagem aplica-se quer o cliente seja um cliente pagante, quer seja o eu-do-futuro a tentar publicar um novo case study num domingo à noite.
Esse passo do CMS é o que separa discretamente as pessoas que fizeram a demo de um site construído com IA das pessoas que realmente gerem um. A homepage é a parte fácil, a da descarga de dopamina. A infraestrutura de conteúdo por baixo é o que o torna real — e é para aí que a conversa sobre web design com IA se dirige a seguir.
Perguntas frequentes
É mesmo possível construir um portfólio 3D animado com IA e sem programar?
Sim — consegue ter um portfólio totalmente desenhado, responsivo e com hero em vídeo sem escrever código, usando o Claude Design 2.0 para o site e o Seedance 2.0 4K da Higgsfield para a animação. O senão é que a última milha de polimento (estados de hover, animações de scroll, um CMS) é muito mais fácil e controlável depois de exportar para o Claude Code, por isso "sem código" dá-lhe um ótimo protótipo, mas um pouco de código dá-lhe um produto a sério.
O que torna o Seedance 2.0 4K diferente de outros modelos de vídeo com IA?
No Higgsfield, o Seedance 2.0 gera nativamente em 4K, em vez de renderizar numa resolução mais baixa e ampliar depois. Isso remove um passo de perda de qualidade e uma fase extra de renderização, pelo que o clip fica suficientemente nítido para viver atrás do texto de um hero a viewport inteiro em ecrãs grandes, sem artefactos. Também suporta geração multi-shot com personagens consistentes, segundo a documentação do modelo da Higgsfield.
Porque é que a minha personagem 3D gerada por IA ficou arrepiante, e como corrijo isso?
Uma personagem de IA costuma parecer perturbadora porque o modelo empurrou o render demasiado para o fotorrealismo, aterrando no vale da estranheza. A correção é contraintuitiva: peça no prompt mais estilização, não mais detalhe. Ajuste para um look 3D claramente ilustrado, com proporções desenhadas, e o desconforto desaparece, porque o cérebro o lê como uma personagem intencional e não como um clone defeituoso.
Como funciona o handoff do Claude Design para o Claude Code?
A partir do Claude Design 2.0, use Share → Send to Claude Code para empurrar o projeto diretamente para uma sessão do Claude Code, ou faça o download do projeto como ZIP e abra-o localmente. A partir daí, o Claude Code trabalha sobre os ficheiros reais, que é onde trata dos refinamentos ao nível do código que o editor visual não consegue fazer, como espaçamento consistente, estados de hover, animações de scroll e, eventualmente, um CMS de backend. Veja a secção sobre exportação acima para o fluxo completo.
O guardanapo era o truque todo
Volte àquele clip de dez segundos — a versão 3D de mim a percorrer um estúdio vazio, a olhar de relance para a câmara. É a parte em que toda a gente repara. Mas não é a parte que tornou o site bom.
O site é bom por causa de quatro minutos com uma caneta antes de eu abrir uma única ferramenta. O wireframe. As cinco secções claras. As instruções específicas entregues ao modelo em vez de um desejo vago. Tudo o que de poderoso aconteceu depois — o esquema terracota a acertar logo na primeira geração, a edição no canvas a refinar em vez de reconstruir, o handoff limpo para o Claude Code — tudo isso se multiplicou a partir de um plano claro dado a um modelo capaz. A IA não desenhou o meu portfólio. Fui eu que o desenhei, e a IA executou-o a uma velocidade e com uma fidelidade que, há dois anos, me teriam custado um mês e uma fatura a meio dos quatro dígitos.
Portanto, aqui fica o seu desafio para as próximas 24 horas: antes de tocar no Claude Design, no Higgsfield ou em qualquer builder de IA, esboce a coisa. Cinco secções, de cima a baixo, em papel a sério. Escreva três frases sobre como o site deve sentir-se. Depois — e só depois — abra as ferramentas. Vai ficar genuinamente surpreendido com o quanto a primeira geração volta melhor quando o modelo finalmente sabe o que realmente quer.
Quer um site como este construído para si?
Se preferir saltar a tentativa e erro e ter um portfólio movido a IA — hero em vídeo 4K nativo, layout editorial, código real que é seu — construído de ponta a ponta, é exatamente o tipo de projeto que aceito. Envie-me a ideia em bruto e digo-lhe honestamente se este pipeline serve para o caso ou se fica mais bem servido a filmar imagens reais. Pode começar essa conversa através do meu perfil do Fiverr.
