Qual IA está por trás do Claude Design e o que ela usa para montar o rascunho?

Fala aí, beleza? Tu escreve duas linhas, o canvas pisca e aparece uma tela inteira montada: hero, features, pricing, footer, tudo no lugar

Aí bate a dúvida que ninguém fala em voz alta: quem exatamente desenhou aquilo, e dá pra confiar?

O Claude Design é um produto do Anthropic Labs e está disponível em beta para os planos Pro, Max, Team e Enterprise (no Enterprise ele vem desligado por padrão e precisa ser habilitado antes de qualquer uso)

E a resposta curta do post é essa: o modelo pesa, claro, mas o que separa um rascunho genérico de um rascunho com cara da sua marca é o MATERIAL que tu coloca na frente dele

Claude Opus 4.7: o que muda por ser um modelo de visão

No anúncio de lançamento, em 17/04/2026, a Anthropic informou que o produto é movido pelo Claude Opus 4.7, descrito como o modelo de visão mais capaz dela, e naquele momento ele saiu como research preview

De lá pra cá o acesso virou beta, nos planos que citei ali em cima

Agora, por que insistir tanto no "modelo de visão"?

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Porque o Opus 4.7 aceita imagens com até 2.576 pixels no lado maior, cerca de 3,75 megapixels, mais de três vezes o que os modelos Claude anteriores aceitavam

E isso casa direto com o tipo de insumo que o produto trabalha: screenshot de tela, protótipo, captura de elemento do seu próprio site

Se você conhece a diferença entre mandar uma foto comprimida e mandar o arquivo original pra alguém avaliar, é bem isso: quanto mais detalhe sobrevive na imagem, menos o modelo precisa adivinhar espaçamento, hierarquia e peso de fonte

O que o modelo recebe como contexto antes de desenhar

Aqui mora o coração da coisa

O acesso é na web, em claude.ai/design, ou pela barra lateral do Claude Desktop

A interface tem duas áreas principais: chat à esquerda e canvas à direita, onde o resultado é gerado

O ponto de partida de um projeto pode ser:

• um prompt de texto
• upload de imagens e documentos (DOCX, PPTX, XLSX)
• apontar o Claude para o seu codebase
• usar a ferramenta de captura web pra pegar elementos direto do seu site

E tem uma etapa anterior que muita gente pula: o onboarding

É nele que você sobe os ativos que definem a marca e o produto, tipo codebases (uma biblioteca de componentes React, por exemplo), protótipos e screenshots, decks ou documentos, e ativos avulsos como logos ou paleta de cores

A partir desses ativos, o Claude gera um design system (um UI kit) para a organização, que normalmente inclui paleta de cores (primária, secundária e de destaque), tipografia (famílias, tamanhos e pesos) e componentes reutilizáveis como botões, cards e navegação

E o melhor: projetos criados depois do onboarding herdam automaticamente esse design system da organização, sem precisar subir asset de marca nem configurar nada de novo

Sacou a lógica? O prompt descreve a TELA

O design system define a LINGUAGEM

Quando a linguagem não existe, o modelo inventa uma, e é aí que nasce aquele rascunho bonitinho que não parece seu 😀

Como melhorar o insumo que o Claude Design usa (passo a passo)

1. Suba os ativos de marca no onboarding antes de pedir qualquer tela. Codebases, protótipos, screenshots, decks, documentos, logos e paletas: é esse pacote que vira o design system da organização. O erro comum deste passo é entrar direto no prompt e tentar consertar depois na base do "use nossa cor azul", o prompt descreve o que você quer, ele não substitui o ativo que nunca foi enviado

2. Se o design system vive em código, linke ou suba o repositório. No caso de uma biblioteca de componentes React, por exemplo, o Claude lê os componentes e os estilos. O erro comum aqui é mandar só um screenshot do Storybook: a imagem mostra o resultado, o repositório mostra a regra

3. Use o /design-sync para trazer um ou vários design systems. Ele roda dentro do Claude Code e aceita repositório GitHub, arquivos de design, uploads brutos ou o codebase local:

/design-sync

4. Lembre que esse sync é de mão dupla. O /design-sync mantém as duas pontas sincronizadas nos dois sentidos: puxa o design system pro canvas e permite entregar ao Claude Code um design pronto pra virar software, entrega que sai empacotada num handoff bundle quando o design está pronto pra construir. O erro comum é tratar como importação de uma vez só e esquecer que o caminho de volta existe

5. Refine em cima do rascunho, não do zero. O refino acontece por chat, por edição direta no canvas ou por comentários inline. Se você quer entender bem o que dá pra editar na mão antes de sair pedindo regeneração, vale separar o que é ajuste pontual do que é mudança de direção. O erro comum deste passo é pedir "refaz tudo" quando o problema era um espaçamento

Insumo bom x insumo ruim: o que esperar de cada tipo de material

Nem todo ponto de partida entrega a mesma coisa

Dá pra pensar assim:

Não é que prompt de texto seja ruim, longe disso

Só que ele carrega sozinho um peso que não era pra ser dele, e daí a descrição vira o único guardrail do resultado, por isso vale caprichar em o que escrever na descrição do projeto

E se a primeira extração não pegar bem a sua marca?

O caminho documentado é subir ativos adicionais ou diferentes, e atualizar o design system dentro do próprio Claude Design quando ele mudar

Ou seja: a correção é por insumo, não por insistência no chat

O que vi na prática quando o design system entra antes do prompt

O teste que eu mostro no vídeo é no Open Design, uma ferramenta que segue a mesma lógica de briefing + design system + rascunho funcional

Instalei pelo terminal e, ao abrir a versão web, a ferramenta detectou sozinha os agentes de IA que eu já tinha na máquina e ainda ofereceu a opção de usar APIs

Segui com o Claude Code

Ao iniciar o projeto, ela apareceu conectada pela minha assinatura Claude e o modelo detectado na sessão era o Opus

Aí veio a parte que eu achei mais massa: antes de gerar qualquer coisa, ela me entrevistou

Briefing curto, com superfície principal (desktop ou mobile), público-alvo, tom visual com limite de duas escolhas, contexto de marca e, mais adiante, direção visual

Pra mim é esse o mecanismo anti-slop na prática: em vez de sair cuspindo tela, a IA pergunta antes, e o resultado não sai com aquela cara de saída padrão de IA

Na criação do projeto dava pra escolher um design system inicial e o nível de fidelidade (só frame ou alta fidelidade) antes mesmo de escrever o prompt

Pedi uma landing page SaaS com hero, features, como funciona, pricing, logos, depoimentos, FAQ e footer

O rascunho saiu funcional em HTML, com opção de abrir, baixar, ver o código-fonte, comentar e pedir alteração pontual

Depois de pronto, apareceram as opções de exportar o código pra IDE, compartilhar ou fazer deploy direto na Vercel, justamente por ser HTML

Detalhe que eu sempre faço: escrevi nas observações do briefing que o site deveria ficar em português, porque na minha experiência essas ferramentas às vezes geram tudo em inglês

(tem configuração de idioma no app também, mas eu reforço no briefing mesmo)

Nas configurações dava pra cadastrar provedores de mídia pra geração de imagem e vídeo, caso a IA principal da sessão não gere esse tipo de conteúdo

Repeti o mesmo fluxo pra criar uma apresentação, um pitch deck do projeto, e a interface e a lógica das perguntas eram praticamente iguais às da landing page

E acompanhei um painel de usage mostrando o consumo a cada interação: como eu estava na assinatura, o gasto saía da usage dela, e rodar com Opus é caro, sem romantizar

Tome cuidado na instalação: o comando de habilitar o Corepack falhou aqui por erro de permissão no terminal do VS Code

Resolvi reabrindo o terminal como administrador na pasta do projeto

Recomendo ler o repositório junto com o vídeo, porque a documentação explica a instalação e o funcionamento do pacote com detalhe

No vídeo tu vê o fluxo completo rodando: instalação, briefing, escolha de design system, a landing page saindo em HTML e o pitch deck logo depois

Dá para confiar no rascunho? Ajustando a expectativa

Vamos ser adultos sobre o estado da coisa

O produto saiu como research preview no lançamento e hoje está em beta para os planos Pro, Max, Team e Enterprise, lembrando que no Enterprise ele vem desligado por padrão e precisa ser habilitado

O uso consome os limites que o membro já tem no plano, compartilhados com chat, Claude Code e Cowork, sem cota separada pra provisionar

Juntando tudo: o rascunho é ponto de partida pra refino, não entrega final

Ele acelera absurdamente a primeira versão, mas quem decide se aquilo é a sua marca continua sendo você, com chat, edição direta no canvas e comentário inline na mão

Conclusão

A parte de IA do Claude Design é o que a Anthropic comunicou no lançamento: Claude Opus 4.7, modelo de visão, com limite de imagem bem maior que o dos modelos Claude anteriores

Só que o veredito prático é outro, e é o que eu queria deixar gravado aqui: a qualidade do rascunho é reflexo do material que você entregou, não do capricho da frase que você digitou

Próximo passo concreto?

Organize os ativos de marca ANTES de abrir o produto: logos, paleta, screenshots, protótipos, deck

E se o seu design system já vive em código, sincroniza com /design-sync no Claude Code, aí depois é só exportar (Canva, PDF, PPTX ou HTML standalone) ou mandar pro Claude Code com o handoff bundle pra virar software

Faça o teste com insumo bom e com insumo ruim no mesmo pedido, a diferença aparece na primeira tela 🙂

até o próximo post!