O Claude tem um novo recurso chamado Design.
O Claude Design é uma prévia de pesquisa lançada pela Anthropic em 17 de abril, parte da linha de produtos Anthropic Labs, rodando no modelo de visão mais forte deles atualmente, o Opus 4.7. Ele foi criado para gerar rascunhos visuais com o Claude—protótipos web, PPTs, pitch decks, landing pages, one-pagers e muito mais estão no seu escopo. Ele consegue ler seu repositório de código e arquivos de design existentes, aplicar seu sistema de design ao resultado, para que o estilo combine com seus projetos atuais.
A melhor parte é o resultado final: além de exportar PDF/PPTX/HTML ou enviar para o Canva, ele também pode empacotar tudo em um bundle de handoff e passar para o Claude Code local continuar modificando o código do projeto.
Assim que isso foi lançado, fez o preço das ações do Figma cair—fechando em baixa de 6,89%.
Uma breve introdução ao Figma: uma empresa que cria ferramentas de design colaborativo online, concorrendo com Adobe e Canva. Dezenas de milhões de designers no mundo todo o usam para criar designs. Na verdade, já existia um MCP que permitia usar IA para controlar o Figma, mas como meu senso estético é muito básico e minha mente fica em branco, sem ideias, nunca usei aquele produto.
Por que eu realmente precisava disso
Lembra do plugin do Obsidian que fiz para publicar conteúdo no WeChat Official Accounts?
Até agora, em todos os canais, vendi um total de 0 cópias. Que maravilha (TAT).
Claro, é possível—e não estou me gabando—que isso tenha a ver com meu gosto básico de design.
Dê uma olhada na aparência original da interface do meu plugin:
Duas fileiras de barras de ferramentas, 9 botões amontoados em uma fileira. Formato, conta, nome de conta predefinido, configuração de conta, compra e ativação, guia do usuário, atualizar renderização, copiar HTML, colar no WeChat Official Account, publicar rascunho… tudo empilhado no local mais proeminente.
Todas as funcionalidades estão lá, mas é exaustivo só de olhar.
Abaixo disso, tem um prompt super longo: ‘Clique no botão abaixo para selecionar uma imagem do seu computador; deixe em branco para usar uma capa placeholder; se uma capa padrão estiver definida, use a capa padrão.’ Um amigo viu e disse: ‘Isso é para quem? Uma descrição de campo de banco de dados?’
Então, quando vi o Claude Design ser lançado, experimentei na hora. Vamos ver como ele realmente se saiu.
Como usar
Primeiro, abra a versão web do Claude, clique em Design à esquerda para entrar. No topo, há uma caixa de entrada chamada ‘New prototype’, basta preencher o nome do projeto.
Você pode escolher Wireframe (baixa fidelidade) ou High fidelity (alta fidelidade com ativos da marca). Escolhi baixa fidelidade porque no começo são apenas conceitos brutos, sem necessidade de alta fidelidade. Na verdade, depois que você termina, ele atualiza automaticamente para você.
Em seguida, informe o caminho da pasta do programa e envie uma captura de tela da página que deseja modificar.
Ele vai primeiro fazer algumas perguntas: o que mudar, o que manter, qual é a ação principal, qual é a ação secundária. Confessei honestamente—o que mais queria era destacar ‘Publicar Rascunho’ e ‘Trocar Conta’, o resto pode ficar recolhido.
Depois de perguntar, ele começou a trabalhar sozinho.
Ele criou 4 opções
Pouco depois, ele me entregou uma página de comparação wireframes.html.
A primeira coisa foi uma comparação—ele listou os ‘pecados’ da minha interface atual um por um em texto vermelho:
- ‘Duas fileiras de barras comprimindo a prévia’
- ‘9 botões’
- ‘Mistura de chinês/inglês + descrições de símbolos confusas’
Esse recurso realmente me surpreendeu. Pensei que ele apenas me ajudaria a modificar coisas, mas ele realmente viu o conteúdo e apontou os problemas. Parecia um designer de verdade se comunicando cara a cara, não uma IA fria.
Depois vieram as 4 opções:
- Opção A: Linha única minimalista, botão principal ‘Publicar Rascunho’ + cápsula de conta, resto ícones + menu
⋯ - Opção B: Card breadcrumb + gaveta, mantém entrada para editar meta informações
- Opção C: Barra lateral (como VSCode), barra superior apenas com título
- Opção D: Card flutuante de publicação no canto inferior direito, ação principal mais proeminente
A mais interessante foi a Opção D. Ela desenhou um post-it com ‘Regras Comuns de Design’ e ‘Ordem Recomendada’:
A → Mais econômico em espaço, baixo custo de aprendizado D → Visualmente mais bonito, ação principal mais satisfatória C → Amigável para usuários avançados (biblioteca de ícones) B → Seguro, mantém edição de meta informações
Isso não é apenas ‘aqui estão algumas opções’, é ‘aqui estão algumas opções + dizendo para quem cada uma é indicada’. Faço plugins há muito tempo, e ninguém nunca me disse seriamente ‘onde esse botão deveria ficar’.
Você pode continuar iterando
Depois de escolher uma direção, você pode continuar se comunicando. À esquerda há uma caixa de chat, à direita clique em Edit para selecionar elementos diretamente e modificar (mas as configurações lá eram muito profissionais, não consegui entender, então pulei). Clique em Draw para desenhar círculos e setas na prévia e dizer ‘quero mover isso para cá’:
Acho o recurso Draw incrível. Desenhei uma seta bem grosseira de um botão para o canto inferior direito, e ele entendeu—provavelmente relacionado à grande atualização no reconhecimento visual do Opus 4.7 (como mencionado antes, ele aumentou a precisão do reconhecimento de imagens para 3,75 megapixels).
Da barra de ferramentas ao layout
Depois de modificar a barra de menu, pedi para ele criar vários estilos de layout de artigo—afinal, a função principal do meu plugin é formatar Markdown em algo publicável no WeChat Official Accounts.
Ele abriu uma nova página com o título ‘Formatar Markdown em um artigo do WeChat que vale a pena ler’. No canto superior direito, há um botão Tweaks que, ao ser clicado, permite ajustar tamanho da fonte, peso, cor, espaçamento entre linhas, etc., igual ao Figma:
Observe que esta é uma página verdadeiramente clicável e alternável, não uma falsa. Essa interação é muito melhor do que fazer no Claude Code no terminal. Com o Claude Code, você precisa esperar ele terminar para ver o efeito, depois pedir para modificar. Aqui, você tem prévia em tempo real.
Depois de finalizar, clique em Export no canto superior direito. Ele dá várias opções: baixar PPT, exportar PDF, exportar HTML independente, ou—a última—‘Handoff to Claude Code’, que envia todo o arquivo de design para o Claude Code local continuar codificando.
Esta é a melhor parte de toda a cadeia.
Depois de projetar na web, ele gera um comando para você. Copie e cole no terminal, e o Claude Code local assume:
> Fetch this design file, read its readme,
and implement the relevant aspects of the design.
Implement: option-b-hifi.html
Então ele começa a ler o pacote de design, olhar o código atual, entender quais arquivos modificar e, finalmente, altera diretamente todo o código fonte do meu plugin. A página de design forneceu option-b-hifi.html (acabei escolhendo a versão de alta fidelidade da Opção B), e o Claude Code lê cores, tamanhos de fonte, espaçamento do arquivo de design e os aplica ao meu código React.
Não escrevi uma única linha de código durante todo o processo.
O resultado final
De qualquer forma, acho que ficou muito melhor do que o original. Embora um designer de verdade pudesse ter feito ainda melhor, para um plugin pessoal, é mais que suficiente (comparado ao meu design original).
Título + meta informações recolhidos em uma linha, conta se torna uma cápsula (com um ponto verde ativo), a ação principal é apenas um único botão roxo ‘Publicar Rascunho’ à direita, todo o resto está escondido no menu ⋯.
Acontece que minha pilha de ‘funcionalidades’ não carecia de senso de design—era que ninguém me ajudou a fazer concessões.
Adicionar um botão é fácil, mas remover um da interface é contraintuitivo para um desenvolvedor—você sempre pensa ’e se alguém precisar?’. Mas um designer toma essa decisão por você: ‘Coloque isso em um menu secundário, os usuários não vão clicar de novo depois da primeira vez.’
Desta vez, o Claude Design tomou essa decisão por mim.
O custo
É intensivo em recursos
Nos planos de assinatura do Claude, o Design tem sua própria cota (tenho que dizer, as cotas separadas do Claude estão realmente se acumulando).
Fazer esse conjunto—4 comparações de opções + 5 temas de artigo + implementação de alta fidelidade—consumiu 36% da minha cota diária. Tenho uma conta Max 5x; para uma conta Pro, isso consumiria a cota do dia inteiro.
Um amigo meu tem uma conta Pro. Ontem à noite, ele usou o Design para fazer um PPT de 30 páginas e a cota diária dele foi completamente esgotada.
Falhas ocasionais
Às vezes, no meio do trabalho, você pode encontrar uma situação: você envia uma mensagem, e ele responde com <empty>. Envia de novo, ainda <empty>:
A solução é atualizar a página e dizer ‘por favor, continue’, e geralmente ele retoma. Mas você perde um pouco de contexto. Se você estiver no meio de iterações críticas de design, lembre-se de tirar capturas de tela como backup de vez em quando, para não ter que recomeçar do zero se quebrar na última etapa.
Considerações finais
Meu plugin do Obsidian com design básico finalmente parece um produto de verdade.
Mas, para ser honesto, quando me sentei na frente do computador e cliquei em ‘Publicar Rascunho’, não estava totalmente animado. Tenho muito claro uma coisa—se alguém como eu, sem treinamento em design, consegue fazer uma interface decente em duas horas, então aqueles que ganham a vida com o ‘decente’ vão passar por alguns anos difíceis.
Eu costumava me preocupar que a IA fizesse os escritores perderem um interlocutor com gosto literário. Desta vez é o oposto—os designers estão prestes a perder a parte mais grossa do mercado: a faixa de iniciante a intermediário.
Cada vez que a IA dá um passo à frente, algumas pessoas comemoram, e algumas pessoas saem silenciosamente. Desta vez sou eu quem está comemorando, mas consigo ouvir aquele suspiro atrás de mim.
Recentemente, passei muito tempo e dinheiro com IA, preocupado que um dia ela possa me substituir, mas até agora não encontrei uma saída. Ela ajuda no meu trabalho diário, mas nenhuma mudança fundamental. O mais importante é que não ganhei dinheiro com isso.
Se você também tem um pequeno produto, plugin ou site juntando poeira como o meu—vá experimentar o Claude Design.
Pode não te trazer a primeira venda, mas pelo menos vai fazer parecer mais apresentável. E isso, por si só, já é uma grande melhoria.