Claude Code e design: dá para sair de uma referência visual e chegar em interface no terminal?

Um print de referência e uma tela funcionando estão bem mais longe um do outro do que parece

Você tem a imagem salva, o projeto aberto e uma decisão pra tomar: joga a referência no terminal, dentro do repositório, com o agente enxergando os arquivos que já existem, ou pede a interface numa conversa isolada, onde o visual aparece na hora e você olha antes de aprovar?

Os dois caminhos funcionam, e os dois cobram um preço diferente

Esse post separa o que cada um ganha e o que cada um perde, com passo a passo do que dá pra fazer hoje e um relato do que aconteceu quando juntei os dois na prática

Como entregar uma referência visual ao Claude Code no terminal

A parte mais simples é a entrada da imagem, que muita gente nem sabe que existe

1. Coloque a imagem no prompt Você pode arrastar e soltar o arquivo na janela do terminal, colar com Ctrl+V (no macOS, Cmd+V também funciona no iTerm2) ou simplesmente informar o caminho do arquivo dentro do prompt:

Analise esta imagem: /caminho/para/imagem.png

O erro comum deste passo: mandar a imagem e nada mais

A referência sozinha não diz o que importa nela, se é o espaçamento, a hierarquia de tipografia ou só a paleta, então escreva isso junto

2. Confira se a imagem certa entrou Quando o Claude Code referencia uma imagem no terminal (aquele [Image #1]), a documentação orienta abrir o link com Cmd+Click no Mac ou Ctrl+Click no Windows/Linux, que abre o arquivo no visualizador padrão do sistema

Parece bobo, mas é o passo que evita você discutir meia hora sobre um print que não é o que você acha que é 😅

Pré-inscrição Formação Claude Code

Domine o Claude Code do básico ao avançado

Você vai aprender a criar sistemas completos com Claude Code, sem precisar ser programador. Inscreva-se para ter acesso a um desconto de lançamento e bônus especiais!

Quero minha vaga

3. Peça o que a documentação já lista como caso de uso São dois pedidos bem diretos: gerar o CSS que bate com um mockup de design e descobrir qual estrutura HTML recriaria um componente

O erro comum deste passo: pedir "faz igual" sem apontar o alvo

Diga se você quer o CSS do componente, a estrutura do markup ou os dois, e em qual arquivo isso deve cair

4. Deixe a direção estética escrita no repositório É aqui que o caminho do terminal mostra a vantagem dele: o Claude Code lê arquivos CLAUDE.md subindo a árvore de diretórios a partir do diretório atual, verificando CLAUDE.md e CLAUDE.local.md em cada nível, e carrega isso no início da sessão

Ou seja, a decisão de estilo para de ser um prompt que você repete e vira parte do projeto

Se você conhece um arquivo de configuração de lint, a ideia é parecida: a regra mora no repo e vale pra todo mundo que abrir ali

O erro comum deste passo: transformar o CLAUDE.md num manual gigante

A recomendação oficial é manter cada arquivo abaixo de 200 linhas, porque arquivo maior consome mais contexto e reduz a aderência

Vale a mesma lógica de escrever bom prompt: se você quer entender melhor como estruturar instruções pro agente, o que funciona no prompt funciona no arquivo de memória também

Plugins oficiais de design: Frontend Design e Design

Se o seu problema é não ter estética definida, tem plugin oficial pra isso

1. Instale o Frontend Design Ele está no diretório oficial anthropics/claude-plugins-official e vem marcado como Anthropic Verified

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

2. Deixe ele definir a direção antes do código O plugin trabalha propósito, público e um estilo específico (brutalista, maximalista, retrofuturista) antes de codar, e funciona com Vue, React, Svelte e HTML/CSS puro

É o contrário do que a maioria faz, que é pedir componente e torcer pra sair bonito

O erro comum deste passo: esperar preview visual

O plugin atua na decisão estética e no código, não numa tela que aparece pra você aprovar

3. Conheça o plugin Design, que resolve outra dor Esse é voltado a crítica de design, gestão de design system, UX writing, auditoria de acessibilidade, síntese de pesquisa e handoff para desenvolvimento

Ou seja, um serve pra criar a cara do produto, o outro pra revisar e manter o que já existe

Como o agente confere o que desenhou

O ponto fraco do terminal é óbvio: ele não vê a tela

E aí? Aí você devolve o resultado pro agente por outro caminho

1. Conecte o Chrome O Claude Code se conecta ao navegador pra testar aplicações web, depurar com logs de console e extrair dados de páginas, usando a extensão Claude in Chrome

O comando /chrome mostra status, permissões e reconexão

2. Confira o requisito antes de brigar com a configuração A integração pede a extensão Claude in Chrome na versão 1.0.36 ou superior e um plano direto da Anthropic (Pro, Max, Team ou Enterprise)

O suporte é para Google Chrome e Microsoft Edge, e o Claude Code também detecta a extensão em outros navegadores baseados em Chromium, como Brave, Arc, Vivaldi e Opera

O erro comum deste passo: culpar o agente quando o problema é versão de extensão

3. Ou instale o Playwright MCP O servidor é mantido pela Microsoft no repositório microsoft/playwright-mcp:

claude mcp add playwright npx @playwright/mcp@latest

Um detalhe que muda a expectativa: ele opera por snapshots estruturados da árvore de acessibilidade da página, não por captura visual, ainda que exponha uma ferramenta de screenshot (browser_take_screenshot)

Traduzindo: ele entende a estrutura da página muito bem, mas não é um par de olhos julgando se ficou bonito

4. Se você quer ver a mudança sem sair do editor A extensão oficial do Claude Code para VS Code oferece interface gráfica com diffs inline, @-mentions de arquivos, revisão de plano e histórico de conversa dentro do editor

Dentro do repositório ou em conversa isolada: o que muda

Agora a comparação direta, que é o que interessa na hora de escolher

De um lado o Claude Code, no terminal, dentro do repo

Do outro o Claude Design, produto do Anthropic Labs, que gera protótipos, design systems, sites interativos, decks e one-pagers a partir de conversa, disponível em research preview para os planos Pro, Max, Team e Enterprise, acessado em claude.ai/design na web ou pela barra lateral do Claude Desktop

Repare que a última linha é a parte mais interessante: não é escolher um e abandonar o outro, é decidir onde a coisa começa

O que aconteceu na prática ao juntar Claude Design e Claude Code

Eu rodei esse fluxo inteiro e gravei

O projeto que escolhi foi um analisador de sites integrado a uma API de IA: você cola um link e ele devolve análise de SEO, estrutura e pontos de melhoria

Limitei o mocap a duas telas de propósito, pra explicar o conceito sem esparramar

Criei o projeto no Claude Design em alta fidelidade e sem design system, começando só com prompt

Dá pra dar mais contexto na criação (anexar um design system existente ou um screenshot de referência), mas eu quis ver o que saía do texto puro

O prompt descrevia tela por tela: home com hero, título, subtítulo, campo de input pra colar a URL, chips clicáveis de URLs sugeridas e uma faixa com as categorias avaliadas

A segunda tela era o resultado: URL no topo, nota geral, cards por categoria (SEO, conteúdo, performance, UX e acessibilidade) com nota e explicação, e botões de copiar relatório ou analisar outro site

O estilo também foi escrito ali: tema escuro com fundo quase preto, cor de destaque laranja para CTA e elementos ativos, tipografia limpa e cards com cantos arredondados

O resultado veio com as duas telas pedidas e mais uma etapa intermediária de carregamento com skeleton, que eu jurei que era idêntica à tela final porque a animação ainda não tinha aparecido 😄

Depois pedi dois ajustes por prompt: compactar o hero da tela inicial pra o input e as categorias caberem sem rolagem, e colocar a nota geral dentro de um círculo com a cor variando conforme o valor

Os dois vieram aplicados, header mais enxuto e nota dentro do círculo

Aí veio a parte que interessa aqui: usei a opção de compartilhar e escolhi o handoff para o Claude Code

Abri o Claude Code dentro do VS Code, colei o que o próprio Claude Design me deu e acrescentei o contexto de que o projeto deveria ser Next.js integrado à API da Anthropic

A primeira tentativa falhou, o Claude Code não conseguiu trazer o arquivo de design por aquele caminho, e não foi a primeira vez que isso aconteceu comigo

O caminho alternativo de entrega do material funcionou sem eu precisar mexer em nada

Com o material em mãos, o Claude Code analisou o que veio do design e começou a recriar o projeto em Next.js

Depois disso instalei o PostHog no projeto local antes de subir, pra já ir testando e verificando o comportamento

E tem um detalhe prático: o instalador pedia escolhas na tela (login, região, organização, projeto, autorização), então tirei o comando de dentro do Claude Code e rodei direto no terminal

No fim o que era protótipo virou interface real rodando local: as duas telas saíram como projeto Next.js, com o tema escuro, a faixa de categorias, os cards por categoria e a nota geral dentro do círculo que eu tinha pedido no ajuste

Daí pra frente é ciclo normal de projeto, com arquivo no lugar certo, e não bloco de código pra copiar de uma conversa

Minha conclusão honesta: o fluxo de sair do design pronto e cair no Claude Code pra virar projeto Next.js funciona e é bem facilitado, com a ressalva de que a leitura direta do arquivo de design pode falhar e você precisa saber que existe um plano B

No vídeo abaixo eu mostro isso na tela, do prompt do mocap até o Claude Code montando o projeto:

O que esse caminho ganha e o que ele perde

Sem enrolação, os dois lados

Ganha:

• Código no lugar certo, dentro do repositório, e não num bloco pra você copiar e colar depois
• O agente lê os arquivos reais, então ele vê o componente que já existe, o padrão que você já usa e o que não pode quebrar
• A direção estética mora no CLAUDE.md e é carregada no início da sessão, sem você repetir o mesmo briefing toda vez
• A conferência é possível: Chrome pela extensão oficial ou Playwright MCP pela árvore de acessibilidade
• Como o resultado cai em arquivos versionados, o fluxo normal segue, incluindo pedir commits e PRs pelo próprio agente

Perde:

• Iteração visual rápida, porque o terminal não te devolve a tela a cada ajuste
• Cada verificação custa um passo a mais (subir o projeto, conectar navegador, olhar, voltar e pedir de novo)
• Explorar estética é caro assim: descobrir que você não gostou depois de o código já estar escrito é pior do que descobrir num protótipo

Quem deve aceitar essa troca? Quem já tem projeto de pé e sabe mais ou menos o que quer

Quem está no zero absoluto de identidade visual sofre, porque vai iterar no lugar mais lento

Quando começar no terminal e quando começar pelo visual

Ajustar um componente que já existe no projeto: terminal ganha fácil

O agente lê o arquivo, o padrão do projeto e o CLAUDE.md, e a mudança nasce versionada

Tirar isso do repositório pra uma conversa isolada só cria trabalho de reintegração

Partir de uma referência sem nada de estética definido: comece no visual

Defina a cara na conversa, veja, corrija por prompt, e só então mande o pacote de handoff com protótipo, decisões de design e contexto de código pro Claude Code

É literalmente o fluxo que eu descrevi ali em cima

Replicar um mockup em CSS num projeto vivo: terminal, com a imagem no prompt

Gerar CSS que bate com um mockup e descobrir a estrutura HTML de um componente são casos de uso listados na documentação, e você quer esse CSS caindo no arquivo certo, não numa conversa paralela

Revisar acessibilidade ou consistência de design system: aqui o plugin Design é o encaixe natural

Ele cobre crítica de design, design system, UX writing e auditoria de acessibilidade

E se a dúvida for estrutural, o Playwright MCP trabalha justamente por snapshot da árvore de acessibilidade

Conclusão

No fundo a escolha é entre duas coisas boas que não vêm juntas: ver rápido ou acertar o lugar do código

A conversa visual te dá o olho, o terminal te dá o repositório

E dá pra usar as duas em sequência, com o pacote de handoff fazendo a ponte

Próximo passo prático, hoje mesmo: pega uma referência, joga no terminal do projeto que você já tem, escreve no CLAUDE.md a direção estética (curto, menos de 200 linhas, lembra?) e confere o resultado no navegador antes de pedir o próximo ajuste

É um ciclo mais lento que olhar um protótipo, mas cada volta dele deixa código de verdade no lugar certo

Bora testar? até o próximo post!