Claude Design: o que dá para editar na mão depois que o Claude gera o rascunho

Fala aí, beleza? Design com IA virou sinônimo de reescrever prompt até a tela sair do jeito que tu quer, e isso é uma meia verdade

No Claude Design o rascunho que o modelo entrega é ponto de partida editável, não resultado final que só muda se tu descrever melhor no chat

O Claude Design é uma ferramenta do Anthropic Labs pra criar designs, protótipos, slides e one-pagers a partir de um prompt de texto mais material de apoio (código, imagens, documentos)

E é justamente o que vem DEPOIS do rascunho que esse post cobre: os controles manuais do canvas, o que cada um resolve e onde a galera gasta prompt à toa

Bora ver? 😀

O que você precisa antes de editar:

O acesso é por claude.ai/design ou pela barra lateral do app desktop

Só web e desktop, não tem versão mobile, então já vai sabendo que ajuste fino no celular não rola

A ferramenta está em beta e vem incluída nos planos Pro, Max, Team e Enterprise, sem custo extra: ela usa os limites da sua própria assinatura

Formação Recomendada

Formação Claude Code

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

• 116 aulas
• 4 projetos
• 9h 23min

Conhecer formação

E aqui tem um detalhe que muita gente não percebe de cara: o limite de uso é COMPARTILHADO com o chat, o Claude Code e o Claude Cowork

Não existe cota separada só do Design, o que significa que prompt gasto à toa no canvas é prompt que falta no resto do dia

Tome cuidado! Se sua conta é Enterprise, o recurso vem desligado por padrão e depende do administrador liberar

Se tu abriu e não achou nada, provavelmente não é bug seu, é política da organização

Passo a passo: os controles de edição do Claude Design

Cada controle abaixo resolve um tipo diferente de ajuste

A lógica é simples: quanto mais específico e visual o ajuste, menos ele deveria passar pelo chat

1. Comentário inline: clique no elemento em vez de descrever onde ele está

Tu clica direto na parte específica do canvas e pede a mudança ali mesmo, apontando pro que quer mudar

O erro comum deste passo é escrever no chat coisas como "aquele card do meio, o terceiro da direita", torcendo pro Claude adivinhar qual é

Se dá pra clicar no ponto, clica: o pedido já nasce direcionado, sem você gastar meia frase explicando localização

2. Edição de texto direta no canvas

Título errado, palavra trocada, um texto que ficou grande demais? Edita na mão, ali mesmo

O erro comum aqui é pedir "troca o título pra X" no chat: é uma volta enorme pra uma coisa que se resolve digitando

3. Sliders de ajuste pra espaçamento e cor

O Claude cria sliders de ajuste pra você regular espaçamento e cor no braço, sem descrever valor nenhum

É o tipo de coisa que é MUITO mais rápida no olho do que na palavra: você arrasta, vê o resultado, para onde ficou bom

O erro comum é tentar traduzir sensação visual em texto ("um pouquinho mais escuro, mas não muito") quando existe um controle pra isso na tela

4. Layout: arrastar, redimensionar e alinhar

O editor tem controles de layout pra arrastar, redimensionar e alinhar elementos diretamente no canvas

E tem um ponto importante: as edições diretas no canvas (rearranjar, apagar, editar texto, redimensionar, mudar cor) NÃO consomem tokens

Ou seja, ajuste de tamanho e alinhamento que se resolve no olho é de graça em termos de limite de uso

O erro comum deste passo é o mais caro de todos: queimar interação do seu limite pedindo pro Claude centralizar uma coisa que você move com o mouse em dois segundos

5. Explorar outra direção sem perder o que já está pronto

Esse aqui é trabalho de prompt mesmo, e tudo bem

Dá pra pedir no chat que o Claude salve o estado atual e tente uma abordagem diferente, mantendo as iterações anteriores como referência

O erro comum é mandar "muda tudo, faz mais moderno" por cima do que já estava bom, sem salvar nada antes, e depois não conseguir voltar pro caminho que agradava

O que mudou na prática quando parei de reescrever prompt

No vídeo abaixo eu mostro uma alternativa aberta ao Claude Design, que roda no agente que você já usa, e o fluxo lá é bem parecido com o que descrevi acima

Não fui atrás dela por falta de nada no Claude Design, foi curiosidade mesmo de ver o mesmo tipo de fluxo em outro lugar

Quando testei, a primeira coisa que me chamou atenção foi a interface: praticamente igual à do Claude Design

A instalação eu segui pelo próprio repositório do projeto, e o quick start estava mais pra baixo na página, não logo no começo (perdi um tempinho procurando, haha)

Num dos comandos tomei erro de permissão no terminal do VS Code, e resolvi abrindo um terminal como administrador na mesma pasta e repetindo

Depois de instalar as dependências apareceu um warning, segui mesmo assim e o uso não foi afetado em nada

Na tela de setup ela detectou sozinha quais agentes eu já tinha na máquina e ainda ofereceu conectar por API

Segui pelo agente e pela assinatura que já uso

Antes de escrever o prompt, escolhi o design system inicial e o nível de fidelidade, de frame simples até alta fidelidade próxima do resultado final

Tinha setups prontos ali, mas preferi escrever meu próprio prompt, que na minha avaliação é o caminho ideal

Depois do prompt veio um briefing com perguntas de direção: superfície principal (desktop e mobile), público, tom visual com limite de duas escolhas e direção visual entre opções nomeadas

No campo de observações eu exigi que o site saísse em português, porque na minha experiência essas ferramentas às vezes entregam tudo em inglês mesmo com contexto em português

Aliás, ajustei o idioma nas configurações também, como reforço

E se tu quer melhorar essa parte da direção, vale dar uma olhada em como escrever prompts melhores no Claude, porque briefing bom economiza rodada depois

Nas configurações achei coisas que ficam fora do prompt e quase ninguém abre: provedores de mídia pra chave de outras IAs que geram imagem e vídeo, idioma da interface, aparência, notificações e a aba de versão

Esse negócio de configurar uma segunda IA pra mídia é massa quando a IA principal não gera imagem ou vídeo

O consumo (usage) aparecia a cada interação

Como eu estava na assinatura, o gasto saiu da cota dela, mas esse painel fica MUITO mais útil pra quem usa API, porque mostra o custo por interação

Durante a geração ela continuou fazendo perguntas de refinamento

Uma delas eu deixei sem responder e o trabalho seguiu do mesmo jeito

Com o rascunho pronto, tinha as opções de abrir ou baixar, e eu abri a página gerada pra conferir

Aí veio a parte que interessa pro assunto deste post: com a página aberta, dava pra ver o código fonte, deixar comentários no que estava na tela e pedir alteração pontual, em vez de refazer tudo

É exatamente a virada de chave: o ajuste fino sai do chat e vai pro que está na tela

Depois testei outro formato dentro do mesmo projeto e criei uma apresentação a partir da landing page, com opção de speaker notes pra deixar menos texto no slide

E notei uma coisa curiosa nessa ferramenta: mudar o tipo de projeto quase não muda a interface, o que muda é uma configuração por baixo

Também achei saídas pra continuar o trabalho fora da ferramenta: compartilhar o código, exportar pra IDE e tocar o projeto de verdade, ou publicar direto como página

Quando ajustar na mão e quando pedir ao Claude

A régua que eu uso é essa: se o ajuste é visual e local, canvas

Se é direção, conceito ou estrutura, prompt

Ajuste de tamanho e alinhamento que se resolve no olho é o caso mais claro de "não gasta prompt com isso"

Já a mudança direcionada em um elemento ("esse bloco aqui precisa de outra hierarquia") é onde o comentário inline brilha: você aponta e descreve o QUE, não o ONDE

E explorar caminho novo continua sendo trabalho de prompt, com o cuidado de pedir pra salvar o atual antes de sair testando

Tem ainda o cenário de organização: com o design system configurado, o que você cria já sai com as cores, a tipografia e os padrões de componente da marca

E o Claude confere o próprio resultado contra o design system antes de te mostrar

Nesse caso o ajuste na mão vira acabamento, não conserto de identidade visual, que é onde a coisa fica realmente produtiva

Conclusão: depois do ajuste, pra onde o arquivo vai

O ponto do post inteiro é esse: o rascunho é do Claude, mas o design continua sendo seu

Comentário inline, texto direto, sliders de espaçamento e cor e os controles de arrastar, redimensionar e alinhar existem justamente pra você não ficar refém de descrever tudo por escrito

Quando o arquivo estiver do jeito que você quer, tem dois caminhos

O primeiro é exportar: bundle HTML, PPTX, PDF ou Canva, dependendo de onde aquilo vai viver

O segundo é virar software, e aqui o handoff pro Claude Code continua do trabalho existente, não de um screenshot da tela (que é como a maioria dos fluxos de design pra código ainda funciona hoje)

Pra puxar o design system, o comando roda a partir do Claude Code:

/design-sync

E a sincronização é em mão dupla entre o Claude Design e o Claude Code, então o trabalho não fica preso de um lado só

Se é pra seguir daí pro código, vale afiar suas técnicas de prompt no Claude Code, porque o handoff rende bem mais quando o pedido chega redondo

Testa os controles do canvas antes de reescrever prompt, se liga no que é de graça e no que consome seu limite, e me conta como foi

até o próximo post! 😀