Como se fez um portefólio de design nativo em IA

Um portefólio construído pelas suas próprias ferramentas

“Este portefólio não foi montado. Foi orquestrado — um resultado coordenado de direção criativa humana e execução com IA em paralelo, a um ritmo que nenhuma pessoa conseguiria igualar sozinha.”

Em junho e julho de 2026 construí este portefólio com um método que a maioria dos designers não experimentou: tratei o Claude Code como uma equipa de engenharia júnior, dei-lhe um brief para cada tarefa e deixei-o executar — enquanto mantinha toda a direção criativa, a propriedade do conteúdo e o critério de qualidade.

O resultado são 25 páginas de portefólio, um sistema de design vivo sincronizado com o Claude Design, oito ecrãs Figma para uma app cívica móvel, um protótipo interativo de planeamento urbano e uma identidade de marca completa — tudo produzido numa única sessão prolongada, publicado na Netlify e mantido como um produto coerente do princípio ao fim.

Este documento explica como foi construído, o que cada ferramenta contribuiu, onde a IA foi genuinamente útil e onde não foi, e o que este processo demonstra sobre o futuro do trabalho de design.

Os entregáveis

Numa única sessão orquestrada, foi produzido ou substancialmente melhorado o seguinte:

• 25 páginas de portefólio — cada caso de estudo revisto, elevado estruturalmente e etiquetado por secções para uma leitura rápida e consistente
• Identidade de marca PereX — um tratamento CSS em gradiente para o carácter “X” usando -webkit-background-clip: text, aplicado de forma consistente nas 25 páginas e em ambos os rodapés através de uma única classe .logo-x partilhada
• Ruta Fresca — uma app cívica móvel para a segurança contra o calor em Barcelona, desenhada no Figma com qualidade premium v2.0: sistema escuro, tipografia Inter, urgência conduzida pela tipografia, margens de 24px, 8 ecrãs para iOS e Android
• Sol Planner — um protótipo HTML interativo em ecrã inteiro para urbanistas que simulam intervenções contra o calor urbano, incorporado no portefólio
• Sincronização com o Claude Design — 14 fichas de componentes e 51 ficheiros no total carregados num projeto Claude Design, permitindo ao agente de design gerar novo trabalho de portefólio com os tokens e componentes reais da PereX
• Documento de entrega de design — um handoff completo em Markdown que regista os IDs de nós do Figma, os tokens de design, a especificação de movimento, o trabalho pendente e as decisões fechadas

Cada ferramenta e o seu papel

Claude Code

A camada principal de orquestração. O Claude Code correu como uma sessão persistente em segundo plano — emitindo leituras de ficheiros, edições de HTML, comandos Bash, chamadas à API do Figma e lançamentos de subagentes a partir de uma única interface conversacional. Substituiu o que normalmente exigiria um programador frontend, um engenheiro de build e um coordenador de projeto. Dirigi-o como um diretor criativo instrui uma equipa: intenção e restrições, não passos de implementação.

Claude Design

Um agente de design com IA em claude.ai/design. De origem, desenha com componentes genéricos. Depois da sincronização do sistema de design, consegue desenhar com componentes PereX: a navegação real, o rodapé, os padrões de cartão, as etiquetas de secção, os blocos de decisão e os tokens tipográficos deste portefólio. Qualquer instrução como “constrói uma nova página de caso de estudo” produz agora um resultado estrutural e visualmente coerente com o site existente.

MCP — Model Context Protocol

A camada de integração que liga o Claude Code a ferramentas externas. Os servidores MCP deram acesso ao Figma, Notion, Google Calendar, Canva e outros através de um protocolo padronizado. Cada servidor expõe ferramentas que o Claude Code pode chamar com a mesma naturalidade de qualquer outra função. O MCP do Figma foi o mais usado: permitiu ler e escrever ficheiros Figma de forma programática, sem abrir a app do Figma.

Figma MCP

Usado para ler ficheiros Figma existentes como contexto (IDs de nós, tokens de design, estrutura de ecrãs) e para escrever novo conteúdo neles (criação de ecrãs para a Ruta Fresca, frames de anotação, documentação de tokens). A ferramenta use_figma do plugin do Figma é a interface principal de escrita: executa comandos da Plugin API no ficheiro ativo e traduz instruções estruturadas em nós reais do Figma.

Agentes fork

Subagentes paralelos em segundo plano lançados com a ferramenta Agent e subagent_type: "fork". Um fork herda todo o contexto de conversa do pai e corre de forma independente em segundo plano, devolvendo um único resultado quando termina. No pico, mais de 25 forks correram em simultâneo — um por página do portefólio — cada um dono de exatamente um ficheiro, sem sobreposição e, portanto, sem conflitos.

DesignSync

A ferramenta que carrega um sistema de design para o Claude Design. Aceita uma pasta local de fichas de componentes, ficheiros de tokens e um CSS agregado, e envia-os para um projeto Claude Design através de um portão de aprovação finalize_plan e chamadas subsequentes a write_files. O carregamento da PereX incluiu 51 ficheiros em 14 grupos de componentes, construídos manualmente a partir das propriedades personalizadas de CSS extraídas da folha de estilos do portefólio — sem Storybook, sem React, sem Webpack.

Netlify CLI

Um único comando: npx netlify-cli deploy --prod --dir .. Todo o portefólio — os 25 ficheiros HTML, todos os recursos, todo o CSS, todo o JavaScript — é publicado em menos de 30 segundos. A simplicidade da publicação é consequência direta da decisão de não ter sistema de build. Não há nada para compilar; a Netlify serve a pasta tal como está.

Propriedades personalizadas de CSS

A camada de tokens de design. Todos os agentes leem e escrevem sobre o mesmo conjunto de tokens definido em assets/css/style.css: --bg, --accent, --sans, --radius, espaçamento de --space-xs a --space-2xl. Uma única fonte de verdade referenciada pelas 25 páginas e pelos 14 componentes do Claude Design. Quando um token muda, muda tudo — sem passo de build.

Como a orquestração funcionou na prática

A sessão seguiu um modelo de coordenador e forks: uma sessão principal do Claude Code a atuar como coordenadora, lançando agentes fork para o trabalho paralelizável e tratando inline as tarefas sequenciais. A coordenadora mantinha o estado, acompanhava que agentes eram donos de que ficheiros e sintetizava os resultados à medida que chegavam.

Trabalho sequencial (coordenador inline)

As tarefas com dependências — decisões de design, portões de aprovação, carregamento de ferramentas, escrita de configuração — correram inline na sessão coordenadora. O fluxo do DesignSync é o exemplo mais claro: criar projeto → fixar configuração → construir o bundle → obter aprovação do utilizador → carregar. Cada passo dependia do resultado anterior, por isso nenhum podia ser paralelizado.

Trabalho em paralelo (agentes fork)

As tarefas independentes e limitadas a um ficheiro correram como forks em paralelo. A elevação das 25 páginas do portefólio é o exemplo mais claro: cada página era independente, cada agente era dono de um ficheiro e os 25 correram em simultâneo. O tempo total foi determinado pelo agente mais lento, não pela soma de todos.

Portões de aprovação humana

Duas categorias de decisões exigiram intervenção humana e nunca foram automatizadas. A primeira: direção criativa — que tratamento de marca usar, como devia ficar o gradiente, se um ecrã estava suficientemente bom para captura. A segunda: aprovação do carregamento — a chamada finalize_plan do DesignSync exigia um clique explícito antes de qualquer ficheiro chegar à nuvem. Estes portões não são atrito; são os pontos onde o critério humano é genuinamente insubstituível.

Deteção de desvios

Depois de qualquer sessão multiagente que toque em vários sistemas (ficheiros HTML, Figma, Claude Design, Netlify) é necessária uma verificação de desvios. Cada agente concluiu a sua tarefa? Algum agente fez uma alteração em conflito com outra? A publicação na Netlify teve sucesso? O carregamento no Figma chegou corretamente? O coordenador corre estas verificações como passagem final antes de comunicar a conclusão.

O que a IA fez — e o que não fez

A IA tratou de

• Ler os 25 ficheiros HTML e identificar lacunas estruturais
• Adicionar spans .section-label antes de cada secção principal em todas as páginas
• Envolver as imagens fora da grelha em elementos semânticos <figure> com legendas descritivas
• Adicionar secções de aviso de validação aos produtos ainda por validar
• Construir 14 fichas HTML de componentes para o Claude Design, cada uma com props em TypeScript e documentação de utilização
• Extrair ficheiros de tokens CSS (cores, tipografia, espaçamento) da folha de estilos principal
• Adicionar ligações flutuantes de retorno às páginas de protótipo sem tocar na sua estrutura interna
• Escrever e publicar o portefólio completo na Netlify
• Comparar o antes e o depois para confirmar que nenhum conteúdo existente foi modificado
• Correr a auditoria completa — 25 páginas — no tempo que levaria auditar três à mão

As pessoas trataram de

• Toda a direção criativa: como o portefólio devia sentir-se, o que “premium” significava para a Ruta Fresca
• A decisão de marca: o gradiente de ciano a magenta no X, e a escolha de o fazer em CSS em vez de imagem
• Todo o conteúdo dos casos de estudo: cada palavra de cada caso de estudo foi escrita pelo Josue, não por um agente
• Critério de qualidade de design: o Josue corrigiu à mão ícones desalinhados no Figma antes de permitir as capturas — “I WASN'T GOING TO LET YOU USE THESE WITH misaligned text and icons.”
• Decisões de produto: que ecrãs incluir no portefólio, que nós do Figma capturar
• Aprovação do carregamento: o portão de um clique antes de qualquer ficheiro chegar ao Claude Design
• Correção de rumo: apanhar de imediato o erro no nome da marca e redirecionar
• Tom e voz: todas as decisões sobre o que este portefólio comunica e a quem

“A IA é extraordinariamente boa a executar. Não é boa a julgar. A divisão é mais nítida do que a maioria espera — e mais importante de manter do que a maioria das ferramentas hoje incentiva.”

Tecnologia calma · Human-in-the-loop · Pensamento sistémico

A mesma filosofia de design que atravessa os casos de estudo deste portefólio também moldou a forma como foi construído.

Tecnologia calma significa que o sistema faz o seu trabalho sem exigir atenção. Os 25 forks correram em segundo plano enquanto a conversa continuava. Sem esperas. Sem consultar o estado. O trabalho chegava como notificações. É tecnologia calma aplicada a um fluxo de design: a ferramenta recua; o resultado aparece.

Human-in-the-loop não é uma medida de segurança acrescentada depois; é uma decisão de arquitetura. Cada ação com consequências nesta construção teve um portão humano: aprovar o carregamento, confirmar a direção de marca, rever as capturas antes de as incorporar. A IA não é autónoma — é assistiva. A pessoa continua a ser quem decide do princípio ao fim.

O pensamento sistémico aparece na restrição que tornou tudo o resto possível: um agente por ficheiro, sem exceções. Esta única regra — simples, clara, aplicada com consistência — tornou segura uma paralelização de 25 vias sem qualquer infraestrutura de bloqueio. Um bom design de sistemas reduz a coordenação complexa a invariantes simples.

O que isto demonstra

Não é uma história sobre a IA substituir designers. É uma história sobre o que acontece quando um designer entende o seu domínio e as suas ferramentas bem o suficiente para dirigir a IA ao nível da intenção, e não da instrução.

Um designer a solo pode agora operar ao ritmo de uma equipa. A auditoria e elevação de 25 páginas desta sessão teria levado dois dias inteiros a uma equipa humana de três pessoas. Correu em menos de duas horas. O tempo do designer foi gasto em direção, revisão de qualidade e decisões criativas — não no trabalho mecânico de adicionar etiquetas de secção a 25 ficheiros HTML.

O sistema de design é agora uma interface viva. Antes desta sessão, o sistema de design da PereX existia apenas como um ficheiro CSS. Depois da sincronização com o Claude Design, é um projeto de design com IA já semeado. O trabalho futuro — novas páginas, novos layouts, novas estruturas de caso de estudo — pode ser prototipado pedindo ao Claude Design em linguagem natural e recebendo propostas que usam os componentes reais. A barreira entre “quero experimentar um layout novo” e “tenho uma proposta para avaliar” reduziu-se a segundos.

O design UX nativo em IA exige um novo tipo de critério. As decisões que mais importaram nesta construção não eram sobre HTML ou CSS. Eram sobre quando confiar no resultado do agente e quando o corrigir, que tarefas paralelizar e quais exigiam atenção sequencial, e como instruir um agente no nível de abstração certo. São novas competências de design. Ainda não se ensinam nos bootcamps. Vão ensinar-se.

A restrição dura mantém-se: a IA não pode ter gosto. O gosto — o critério sobre o que é bom, o que é coerente, o que vale a pena manter — é irredutivelmente humano. Cada agente nesta construção executou com fidelidade. A qualidade do resultado foi determinada pela qualidade da direção. “Lixo entra, lixo sai” continua a ser a regra; a IA só processa o lixo mais depressa.

O portefólio como prova do método

Este portefólio faz duas coisas ao mesmo tempo. É um corpo de trabalho de design — casos de estudo, protótipos, investigação, sistemas. E é uma demonstração de como esse trabalho foi feito — um exemplo funcional de prática de design nativa em IA à escala de produção.

Os projetos que contém — Sol OS, Ruta Fresca, BaseLine, ThroughLine, as experiências JAY — refletem um conjunto coerente de valores: agência humana, arquitetura ética, processo guiado pela investigação, pensamento sistémico. O método que produziu o portefólio reflete os mesmos valores: a pessoa mantém-se no comando, a IA trata da execução e o sistema é desenhado para a clareza acima da complexidade.

Se és designer e te perguntas se a IA muda o teu papel: muda a proporção. Menos tempo no mecânico. Mais tempo no significativo. A questão é se estás pronto para operar nessa proporção — para pensar com clareza suficiente sobre o que queres e dirigir com precisão suficiente para o conseguir.

Este portefólio é a prova de que a resposta é sim.