Contacto
gabriiel66@gmail.com
Gabs

Caso de estudo de Gabriel Espinheira, engenheiro full-stack sénior

Taste Vault, onde agentes de IA reconstroem os designs que estudo

Agentes transformam um site que estou a estudar num prompt de construção. Depois, um agente de programação reconstrói a página sem ver o original, para testar se o prompt guarda o design.

Abrir a montra ao vivoFalar sobre o seu produto

Em quatro semanas, em números

56

designs reconstruídos a partir do seu próprio prompt

192.198

palavras de prompts de construção

802

problemas que os agentes apanharam nas suas próprias reconstruções

125

commits de 13/09 a 11/10/2026

Contagens do vault e do seu repositório a 12/10/2026.

A reconstrução é o teste

Trato um prompt de construção como código: não está acabado até algo o verificar. Aqui, a verificação é um agente de programação a reconstruir a página a partir do prompt, sem a captura de ecrã.

01

Capturar

Uma captura de ecrã, um URL ou um clique direito no Chrome acrescentam uma referência. A maioria são capturas; um URL ao vivo passa por um Chrome headless, que fotografa cada secção quando deixa de se mexer.

02

Ler

A paleta é medida a partir dos píxeis, e o CSS de uma página ao vivo revela as fontes. Depois, um modelo dá título ao design e etiqueta-o a partir de uma lista fixa, para que o vault possa ser pesquisado por estilo, layout ou secção.

03

Prompt

Um agente escreve o prompt de construção: estrutura, espaçamento, tipografia, cores em hex, movimento, regras responsivas e o que evitar. Tem de levar o design sozinho, porque o passo seguinte nunca vê a captura.

04

Reconstruir

O GPT Image 2 cria primeiro as imagens necessárias, a partir do seu próprio prompt e com o original como referência de estilo. Depois, um agente de programação constrói uma página independente a partir do prompt, sem a captura.

05

Rever

O agente abre a sua página a 1440, 768 e 390 píxeis de largura e procura conteúdo a transbordar, texto sobreposto, imagens partidas e animações que nunca correram. Depois corrige a sua própria página.

06

Comparar

A reconstrução fica por cima da referência, com uma linha que desliza entre as duas. Quando diferem, corrige-se o prompt ou a próxima construção recebe uma nota de correção escrita, e as versões anteriores ficam guardadas para comparar.

Duas das reconstruções mais próximas

O Taste Vault é uma ferramenta de estudo, e as referências são trabalho de outros designers. Arraste sobre cada par: o layout e a tipografia vêm do prompt, e cada reconstrução escreve o seu próprio nome e texto.

Reconstrução: o mesmo pavilhão, relvado e luz de fim de tarde, um título serif centrado em três linhas e o novo logótipo Evergold.
Referência: uma página de jardinagem com um pavilhão num relvado à luz do fim de tarde, um título serif centrado em três linhas e um logótipo manuscrito a dividir o menu.
ReferênciaReconstrução

Hero de serviços de relva, a partir de um pin do Pinterest. O Claude Opus 5.5 reconstruiu o título serif centrado e o menu dividido a partir do prompt, com o nome Evergold.

Reconstrução: um arco de pedra acima das nuvens, um título verde em dois tons, um cartão de vídeo em vidro e um menu em forma de pílula, com o nome Spanwise.
Referência: uma paisagem de margem a margem com um arco de pedra acima das nuvens, um título verde em dois tons, um cartão de vídeo em vidro e um menu em forma de pílula.
ReferênciaReconstrução

Hero de paisagem de uma empresa de IA fictícia. O Claude Opus 5 reconstruiu o título verde em dois tons e o cartão de vídeo em vidro a partir do prompt, com o nome Spanwise.

47 reconstruções que pode abrir

Aqui estão 47 das 56, cada uma construída por um agente de programação a partir do seu prompt sem ver o original. A montra põe cada uma ao lado da sua referência.

Earth-tone skincare heroOpus 5Full-bleed landscape heroOpus 5Cinematic AI agent heroOpus 5Construction firm photo heroOpus 5.5Dark AI model landingOpus 5Photography studio heroOpus 5AI image studio about pageOpus 5.5Furniture shop homepageOpus 5Therapy practice homepageOpus 5.5Data gateway heroOpus 5Smart garden case study heroOpus 5.5Builder real estate landingOpus 5Solar energy landing pageOpus 5.5Tennis academy landing pageOpus 5.5Dark post carouselOpus 5Red creative agency landing pageOpus 5.5
Cinematic AI heroOpus 5Exhibition microsite heroOpus 5Cinematic AI platform heroOpus 5Dark AI editing tool heroOpus 5Compliance platform homepageOpus 5Golden-hour lawn services heroOpus 5.5AI image generator landing pageOpus 5.5Lit doorway AI heroOpus 5Accounting landing pageOpus 5Adventure travel heroOpus 5Charity fundraising heroOpus 5Dark skincare heroOpus 5AI support copilot landingOpus 5.5Social events club landing pageOpus 5.5Wellness treatment landing pageOpus 5AI sales agents landing pageOpus 5.5
Ver as 56 reconstruções

Seis decisões, com as suas razões

O código é privado: 27.130 linhas de TypeScript, sem contar código de terceiros, e os ficheiros principais abrem com o raciocínio por trás deles. Estas são as seis decisões que lhe mostraria primeiro.

Uma página inteira a partir de frames reais

A captura de página inteira do Chromium estica a janela ao documento todo, por isso as secções de altura total incham e os cabeçalhos fixos repetem-se. Uma captura voltou com 32.000 píxeis de altura e o hero impresso três vezes, por isso o Taste Vault faz scroll a sério e junta os blocos onde foram tirados.

Movimento lido da página ao vivo

Um carregamento separado da página acompanha algumas centenas de elementos, meio ecrã de cada vez, e lê o registo do ScrollTrigger do GSAP quando o site o tem. O prompt de construção copia os tempos desse registo em vez de os inventar.

Uma imagem de cada vez

Duas gerações de imagens ao mesmo tempo trocam as imagens, porque a ferramenta encontra o resultado comparando uma pasta de sessões do Codex. Depois de um simples ficheiro de lock perder 17 imagens a 17/09/2026, uma fila justa com senhas passou a tratar disso, uma imagem de cada vez.

Sem chaves de API

A geração corre através dos CLIs do Claude Code e do Codex que já têm sessão iniciada na minha máquina, por isso não precisa de chaves de API. O GPT Image 2 chega da mesma forma, através do Codex na minha subscrição do ChatGPT.

Nada que se possa escrever a partir da web

A montra pública é uma exportação estática: as Server Actions são trocadas por stubs e as rotas de API ficam de fora durante a build, por isso não sai nenhum caminho de escrita. Localmente, a extensão do Chrome envia para uma API em localhost que recusa qualquer pedido com origem web.

Sem estatísticas antes do consentimento

O PostHog nem sequer é descarregado até aceitar, por isso nada é guardado no seu dispositivo nem enviado antes disso. Recusar fica ao lado de Aceitar, com o mesmo peso, e os eventos de antes da sua escolha esperam em memória e só seguem se aceitar.

Precisa de alguém responsável pela construção?

Estou disponível para uma função a tempo inteiro ou para um projeto por contrato. Leio todas as mensagens pessoalmente e respondo em 2 dias úteis.

Ler o CV (abre num novo separador)
Gabriel Espinheira sentado numa cadeira num estúdio fotográfico azul-marinho, de pernas cruzadas para a câmara, com um MacBook Pro ao colo e um iPhone levantado junto à cara.