Claude Opus 5.5 no frontend: como sair de um print de tela e chegar no componente funcionando?

Print bonito de um lado, componente que roda do outro, e no meio um abismo

Fala aí, beleza? A Anthropic soltou o Claude Opus 5.5 em 22 de setembro de 2026, o primeiro da família 5.5, e uma das coisas que mais interessa pra quem mexe com tela é que ele aceita texto e imagens como entrada, produzindo texto como saída

A documentação oficial do modelo diz que ele lê valores em gráficos densos e visuais dependentes de layout com muito mais precisão sem precisar de ferramenta extra, e que contornos de prompt criados pra modelos anteriores podem nem ser mais necessários

Só que "lê melhor a imagem" não é a mesma coisa que "entrega o componente pronto"

Então neste post eu vou cobrir o fluxo completo: como enviar a imagem, o que informar sobre stack e design system, como iterar em ajuste visual sem o modelo reescrever o arquivo inteiro a cada rodada, e onde fica o limite que ainda exige mão humana

Bora?

O que você precisa ter antes de mandar o primeiro print

Antes de sair arrastando imagem pra dentro do terminal, vale organizar quatro coisas

1. Acesso ao modelo

O Opus 5.5 aparece no seletor de modelos dos planos Pro, Max e Team desde 22 de setembro de 2026

Conta gratuita não lista ele

Pela API o identificador é claude-opus-5-5, custando US$ 4 por milhão de tokens de entrada e US$ 20 por milhão de saída, 20% abaixo do Opus 5

Se você for jogar muita imagem e muito arquivo de referência no contexto, repare que a leitura de cache caiu pra US$ 0,20 por milhão de tokens em cache read, 60% menos que no Opus 5, e a estimativa é de operação cerca de 40% mais barata que o Opus 5 em cargas típicas cobradas por token

Existe também o Fast mode, até 2,5x mais rápido, a US$ 8 por milhão de entrada e US$ 40 por milhão de saída

2. Uma imagem legível

Parece óbvio, né? Mas print de tela tirado torto do celular, comprimido duas vezes no WhatsApp, com metade do componente cortado, é a receita clássica pra você culpar o modelo por um problema que era seu

3. Decisão de stack tomada ANTES

Framework, versão, sistema de estilos, biblioteca de componentes e tokens de design

Se você não sabe isso, o modelo vai escolher pra você, e aí não reclama do resultado

4. Opcional: o plugin oficial de design

A Anthropic mantém o plugin frontend-design no repositório anthropics/claude-plugins-official, que é o diretório oficial de plugins do Claude Code

A proposta dele é gerar interfaces distintas e de nível de produção, fugindo daquela estética genérica de IA, e a skill é usada automaticamente pelo Claude em trabalho de frontend

Pra começar a instalação, dentro da sessão você digita:

/plugin install frontend-design@claude-plugins-official

O marketplace oficial já vem registrado, então não precisa adicionar fonte nenhuma antes

Tome cuidado com uma coisa aqui: dentro de uma sessão, o /plugin install não instala de imediato

Ele abre o painel /plugin nos detalhes do plugin pra você revisar e escolher o escopo

Se você digitar, ver a tela abrir e sair fora achando que terminou, o plugin simplesmente não está instalado 🙂

Na página do marketplace em claude.com o botão do Claude Code copia a forma de shell:

claude plugin install <nome>@claude-plugins-official

Passo a passo: do print ao componente funcionando

1. Envie a imagem pro Claude Code

Você tem três caminhos: arrastar e soltar a imagem na janela do Claude Code, copiar e colar direto na CLI com Ctrl+V (Alt+V no Windows e no WSL), ou informar o caminho do arquivo dentro do prompt

Dentro do VS Code, dá pra anexar colando do clipboard na caixa de prompt

O erro comum deste passo: usar Ctrl+Shift+V ou o paste normal do terminal no Windows e achar que a imagem foi junto

2. Imagem primeiro, texto depois

A documentação de vision indica que o Claude funciona melhor quando as imagens vêm antes do texto

E quando você manda mais de uma referência, introduza cada uma com um rótulo curto pra conseguir apontar pra elas depois:

Image 1: layout desktop do card de produto
Image 2: mesmo card no mobile, estado com badge de desconto

Quero o componente da Image 1 como base, e o comportamento
responsivo seguindo a Image 2

O erro comum deste passo: escrever três parágrafos de instrução e só no fim anexar o print, ou mandar cinco imagens sem rótulo e depois pedir "ajusta o espaçamento daquela lá"

Daquela lá qual, né? haha

3. Descreva a stack e o design system no mesmo prompt

Aqui é onde a maioria dos pedidos morre

Framework e versão, sistema de estilos, biblioteca de componentes, e principalmente os tokens: nomes de cor, escala de espaçamento, raio de borda, escala tipográfica

Se existe token no projeto, o modelo precisa saber o NOME do token, não o valor hexadecimal que ele leu no print

Stack: React 18 com TypeScript, Tailwind
Componentes base: os do diretorio ui do proprio projeto, nao criar novos
Cores: usar apenas os tokens brand-500, brand-700, surface e muted
Espacamento: multiplos de 4 da escala do projeto
Sem lib nova, sem CSS inline

O erro comum deste passo: prompt sem stack nenhuma, que é praticamente pedir pro modelo inventar um projeto paralelo dentro do seu

4. Nomeie os padrões visuais que você NÃO quer

A documentação oficial de prompting do Opus 5.5 é bem direta: quando ele recebe trabalho de frontend sem direção de design, recai em poucos estilos padrão

E a recomendação é nomear explicitamente os padrões indesejados, porque restrição visual concreta funciona melhor que instrução ampla

Ou seja: escrever "evite design genérico de IA" rende MENOS que listar item por item o que você não quer ver na tela

5. Escolha o effort com consciência

O adaptive thinking está sempre ligado no Opus 5.5 e não pode ser desligado, e o nível de effort padrão é medium, um nível abaixo do padrão high do Opus 5

No Claude Code os níveis disponíveis são low, medium, high, xhigh e max

A recomendação oficial de migração é começar em medium em vez de carregar o nível que você usava no Opus 5

Nos testes da Anthropic, o Opus 5.5 em medium iguala ou supera o Opus 5 em high em avaliações de código e trabalho de conhecimento

O erro comum deste passo: fixar tudo em max por ansiedade e depois achar o fluxo caro e lento

6. Rode o componente e compare com a referência

Abre no navegador, coloca o print do lado e compara na ordem: estrutura, hierarquia, espaçamento, cor, tipografia

Nessa ordem mesmo, porque corrigir cor antes de corrigir hierarquia é retrabalho garantido

Aliás, esse assunto de em que ordem pedir cada parte da tela muda bastante o resultado e vale uma leitura separada

O erro comum deste passo: aceitar o primeiro resultado porque "ficou bonito"

Bonito e funcionando são coisas diferentes

E quando for corrigir, não solta pedido amplo: fala qual região muda, qual valor muda e o que precisa ficar intacto

É isso que evita o modelo reescrever o arquivo inteiro a cada rodada e levar embora o ajuste bom da anterior

O limite que ainda exige mão humana eu detalho no fim da próxima seção

7. Guarde as regras num lugar permanente

A orientação oficial pra Claude Code é manter uma skill de frontend ou um arquivo de regras de design com uma lista de banimentos contínua, acrescentando cada novo padrão indesejado conforme ele aparece

O conteúdo vive mais ou menos assim:

REGRAS DE DESIGN DO PROJETO

Sempre:
- usar somente os tokens de cor do projeto
- espacamento em multiplos de 4
- componentes base do projeto, nunca criar variante nova

Nunca (lista de banimentos):
- gradiente roxo para azul em qualquer fundo
- card com sombra forte e borda arredondada exagerada
- emoji dentro de botao
- centralizar tudo verticalmente sem necessidade
- fonte diferente da escala tipografica definida

O erro comum deste passo: repetir as mesmas dez proibições no prompt todo dia, em vez de escrever uma vez num lugar que persiste

Iterar sem reescrever tudo: o que ainda sai errado e como corrigir

Aqui entra a parte que ninguém coloca no anúncio de lançamento

Sintoma: a estrutura está certa, mas o espaçamento e a hierarquia estão fora

Causa: o print mostra proporção, não mostra a escala do seu projeto

O modelo aproxima pelo que vê e acaba escolhendo valores que não existem no seu sistema

Solução: peça o ajuste em cima da escala, com nome de token, e limite o pedido a uma região

So no cabecalho do card: o titulo precisa ser um nivel acima na
escala tipografica e o gap entre titulo e subtitulo vai para o
menor valor da escala de espacamento. Nao altere o resto do arquivo

Sintoma: cor e tipografia caíram no padrão genérico

Causa: faltou direção de design, e a própria documentação avisa que nesse cenário o modelo recai em poucos estilos padrão

Solução: restrição concreta, nominal, item por item

E cada padrão novo que aparecer vai direto pra lista de banimentos do arquivo de regras, pra não voltar na semana seguinte

Sintoma: o modelo regenera o arquivo inteiro a cada pedido de ajuste

Causa: pedido amplo demais

"Melhora o visual desse componente" é convite aberto pra reescrita

Solução: escopo por região e verbo de edição, não de criação

Diga qual parte muda, qual valor muda, e diga explicitamente o que deve permanecer intacto

Essa disciplina economiza token e evita aquele efeito de perder o ajuste bom da rodada anterior

Sintoma: um detalhe de layout denso foi lido errado

Causa: print pequeno, área apertada, muita informação junta

Mesmo com a melhoria de leitura de visuais dependentes de layout, tela densa continua sendo tela densa

Solução: print anotado só daquela área, recortado, com rótulo

Image 1: recorte da tabela, apenas as duas primeiras colunas

A coluna de status precisa de alinhamento a direita e o divisor
entre linhas e mais claro do que ficou. Ajuste somente a tabela

E o limite honesto, sem enrolação: fidelidade pixel a pixel continua pedindo ajuste manual

Não existe número oficial de acerto de layout a partir de print, e prometer isso seria conversa de vendedor

A mão humana continua entrando em três frentes: micro ajuste de espaçamento e alinhamento, que só aparece quando você põe o print do lado da tela rodando, estados de interação (hover, foco, erro, carregando, vazio) que simplesmente não existem dentro de uma imagem estática, e o teste de que aquilo funciona de verdade, não só parece

O ganho real está em chegar perto do resultado em minutos e gastar teu tempo no acabamento, que é justo a parte que o print não mostra

Um detalhe que ajuda quando o projeto cresce: a janela do Opus 5.5 é de 1M tokens de contexto com 128K de saída máxima (e até 300k de saída na Message Batches API com o header beta output-300k-2026-03-24)

Mesmo assim, design system grande somado a muitas imagens enche contexto rápido, e aí valem as estratégias pra trabalhar com projetos grandes

O que mudou na prática no fluxo de frontend dentro do Claude Code

Agora o testemunho, e vou ser claro: os testes que eu gravei foram na rodada anterior, no vídeo sobre o Opus 4.7 e as novidades do Claude Code, não no Opus 5.5

Mas o que eu aprendi ali vale exatamente pro fluxo que descrevi acima

Eu pedi um clone do Trello com UI moderna, animações e efeitos ao mover os cards, tudo em um único prompt

O visual ficou bonito, sério

Só que várias funcionalidades estavam quebradas: não consegui abrir a edição de cards, o filtro não funcionou e a busca também não

E a aplicação dava reload sozinha toda vez que uma tarefa terminava

Esperava mais, confesso

No jogo de kart gerado com um prompt só deu pra escolher pista e carro, mas o carro bugou, girou e ficou de cabeça pra baixo no meio do jogo, sem som nenhum

Já o projeto de flash cards com IA teve login funcionando, autenticação validada

E o blog foi o mais sólido de todos: autenticação, contagem de visualizações, menu âncora, troca de tema, login de admin e criação de postagem em markdown que publicou e apareceu no ar

Eu também criei uma dashboard só pra avaliar a qualidade de interface, já que essa era uma das melhorias mais faladas no lançamento

Ficou bom, mas aí bateu a dúvida: dashboard é um padrão de mercado MUITO comum, então isso é mérito do modelo ou é repetição de dados de treinamento? Fiquei sem resposta

No geral achei o modelo honesto, com evolução real nos benchmarks, mas na prática mais parecido com uma atualização incremental do que com uma virada revolucionária em geração de interface

A lição que fica pro Opus 5.5 é direta: interface bonita em um prompt é o barato

O caro é interface bonita que FUNCIONA, e é por isso que o passo 6 lá em cima é rodar e testar de verdade, não só olhar

No vídeo acima eu mostro esses projetos rodando na tela, inclusive os bugs, então você vê o tipo de quebra que aparece quando se pede tudo de uma vez

Próximo passo

O ganho no frontend com o Opus 5.5 não vem de prompt secreto, vem de três coisas somadas: imagem antes do texto, contexto de stack e design system escritos com nome de token, e uma lista de banimentos que cresce junto com o projeto

O resto é iteração com escopo pequeno

Seu próximo passo é bem concreto: cria hoje o arquivo de regras de design do teu projeto, mesmo que ele comece com cinco linhas

Testa em medium, que é o padrão do modelo e o ponto de partida recomendado na migração, e sobe pra high ou xhigh só quando a tarefa realmente pedir

Depois volta no arquivo e adiciona cada padrão chato que aparecer

É isso que separa quem briga com o modelo toda semana de quem só cuida do acabamento final 😀

até o próximo post!