O fluxo da designer do Claude Code, passo a passo

Quem comentou DESIGN no carrossel, seja bem-vindo(a). Aqui está tudo o que a Meaghan Choi mostrou na palestra: o prompt que ela usa (do jeito que estava na tela), uma skill /prototype pronta pra você copiar, cada comando explicado e o que dá pra usar no seu plano.

O quê	Pra que serve	Precisa de	Link
Worktree (claude --worktree)	Rodar vários Claudes no mesmo projeto sem um atropelar o outro	Repositório git	Docs
Skill /prototype	Gerar 5 versões de uma tela antes de decidir	Claude Code	Seção abaixo
O prompt dela	Do protótipo ao PR com print, num pedido só	Claude Code	Seção abaixo
/loop	Fazer o Claude continuar até terminar	Claude Code	Docs
Claude in Chrome	O Claude abre o app e testa sozinho	Extensão + plano Pro, Max, Team ou Enterprise	Docs
Claude Code na nuvem	Dezenas de ajustes pequenos rodando em paralelo	Plano Pro, Max, Team ou Enterprise	Docs
/simplify, /code-review, /commit-push-pr	Limpar, revisar e abrir o PR	Claude Code (o último é plugin)	Docs
Routines	Tarefas agendadas que rodam na nuvem	Plano Pro, Max, Team ou Enterprise	Docs

Quem é ela e de onde veio essa palestra

Meaghan Choi é a design lead do Claude Code e do Cowork na Anthropic. Antes passou pela Meta e pela Cloudflare. A palestra tem uns 12 minutos e foi no Dive Club LIVE, um evento do podcast de design Dive Club com a Double Diamond, gravado na sede da Ramp em Nova York em maio de 2026 (a data na tela do computador dela marca quinta, 21 de maio).

Ela avisa logo no começo que é "die hard" de terminal, mas que tudo o que mostra também funciona no app de desktop. A demo inteira é feita num projeto open source, o Excalidraw, aquele quadro branco com cara de desenho à mão. Ela escolheu esse projeto porque ele tem um backlog bom de issues e uma comunidade aberta: dá pra treinar esse fluxo nele também.

A ideia que guia tudo: a IA ainda não é boa em design

Antes dos truques, ela mostra três princípios. O primeiro é o que virou o gancho do carrossel:

"Claude, tragically, and most LLMs are not good at design yet." (O Claude, infelizmente, e a maioria dos LLMs ainda não são bons em design.)

O que ela tira disso é prático: você continua responsável pelo acabamento e pelas decisões. Ela diz que isso não vai ser verdade pra sempre, mas que monta os fluxos dela em cima da ideia de que quem decide o que entra no produto ainda é uma pessoa.

Os outros dois princípios:

1. Passe pro Claude mais do que código. Ela delega muito trabalho que não é programação e diz que, se você só pede código, não está usando a ferramenta do jeito mais automatizado.
2. Todo mundo consegue lançar, mas nem tudo deveria ir pro ar. Quando qualquer pessoa consegue mandar código pra produção, o time precisa de sistemas que segurem a qualidade.

![Os três princípios no telão: Claude isn't good at design...yet; Hand off more than just code to Claude; Everyone can ship, but not everything should]

A palestra tem duas partes: o fluxo de uma funcionalidade nova, do zero ao PR, e três coisas que ficam rodando em paralelo enquanto o Claude trabalha.

Parte 1: do zero ao PR

1. Comece sempre numa worktree

A analogia: imagine três estagiários escrevendo no mesmo caderno ao mesmo tempo. Um apaga o que o outro escreveu. A worktree dá um caderno pra cada um, todos copiados do mesmo original.

Por dentro: uma git worktree é uma pasta de trabalho separada, com os próprios arquivos e a própria branch, mas que compartilha o histórico e o remoto do repositório principal. O Claude Code cria uma com uma flag:

claude --worktree nome-da-tarefa
# ou
claude -w nome-da-tarefa

Segundo a documentação, ela fica em .claude/worktrees/<nome>/ na raiz do repositório, numa branch nova chamada worktree-<nome>. Sem nome, o Claude inventa um (no vídeo saiu quizzical-honking-teapot). Ao sair da sessão, se a worktree estiver limpa, o Claude remove sozinho; se tiver trabalho, ele pergunta se você quer manter.

Passo a passo:

1. Abra o terminal na pasta do projeto e rode claude uma vez pra aceitar a confiança na pasta.
2. Coloque .claude/worktrees/ no .gitignore.
3. Pra cada tarefa, abra um terminal novo e rode claude --worktree nome-da-tarefa.
4. Se o projeto usa .env, crie um arquivo .worktreeinclude com .env dentro. Assim ele é copiado pra cada worktree nova.

Limites: cada worktree é um checkout novo, então você precisa instalar as dependências de novo dentro dela. Só funciona com git (pra SVN ou Perforce tem um caminho com hooks).

Dica: a frase dela que resume: se você vê um engenheiro com quatro ou cinco Claudes abertos, ou ele tem cópias do repositório chamadas repo 1, repo 2, repo 3, ou está usando worktree. Worktree é mais fácil de manter. No app de desktop é só marcar a opção worktree ao abrir a sessão.

2. Modelo grande e modo rápido

Ela conta que trabalha sempre com o Opus de 1 milhão de tokens de contexto e com o fast mode ligado. Na tela aparece o Claude Code v2.1.147 com "Opus 4.7 (1M context)" e "Fast mode ON · $30/$150 per Mtok".

A analogia: o fast mode é pagar o frete expresso. O produto é o mesmo, chega mais rápido e custa mais.

Por dentro: segundo a documentação, o fast mode não é outro modelo. É o mesmo Opus com uma configuração de API que prioriza velocidade, até 2,5 vezes mais rápido. Liga e desliga com /fast.

Limites (quando escrevi este texto, em outubro de 2026): funciona no Opus 5 e no Opus 4.8, custa US$ 10 por milhão de tokens de entrada e US$ 50 de saída, e nos planos de assinatura sai dos créditos de uso, não do limite do plano. O preço da tela dela era de outra versão. Ela mesma avisa que isso não está disponível pra todo mundo e que usou ali pra acelerar a demo.

Dica: se for usar, ligue no começo da conversa. A documentação explica que ligar no meio cobra o contexto inteiro da conversa no preço do fast mode.

3. Modo automático (auto mode)

"Todo mundo na Anthropic está sempre no auto mode", ela diz. É o que tira aquele "sim, aceito, sim, sim" a cada comando.

A analogia: em vez de você aprovar cada passo, um segundo funcionário fica do lado olhando e só barra o que parece perigoso.

Por dentro: no auto mode, um modelo separado, o classificador, revisa as ações antes de rodarem. Ele bloqueia o que vai além do que você pediu, mexe em infraestrutura desconhecida ou parece induzido por conteúdo malicioso que o Claude leu. Você alterna os modos com Shift+Tab e a barra de status mostra auto mode on.

Limites: a própria documentação avisa que o auto mode reduz os pedidos de permissão, mas não garante segurança. Use em tarefa em que você confia na direção geral, não em operação sensível.

O prompt que ela usa

Ela fala que não manda especificação de design nenhuma. Só diz que quer autocompletar no Excalidraw e quer ver como fica. Este é o prompt que estava na tela, do jeito que ela digitou:

help me /prototype a few different options for adding autocomplete suggestions for text in excalidraw. Once you have options, review and pick the one that is most in-line with the current patterns in excalidraw. Feel free to do some research online to form an opinion on the best one. Once that's done please implement the best option, verify and do some design iteration so it feels like it matches the style of excalidraw. Put up a PR with a screenshot please. Don't forget to verify that it works and /loop until you're done

![O prompt no terminal, já dentro de uma worktree, com Opus 4.7 de 1M de contexto e fast mode]

Versão em português pra adaptar ao seu projeto:

Me ajuda a usar /prototype pra criar algumas opções de [FUNCIONALIDADE] em [PROJETO]. Quando tiver as opções, revise e escolha a que mais combina com os padrões atuais do [PROJETO], e me explique por quê. Pode pesquisar na internet pra formar uma opinião. Depois implemente a melhor opção, verifique e faça iterações de design até ficar com a cara do [PROJETO]. Abra um PR com um print, por favor. Não esquece de verificar se funciona e continue em /loop até terminar.

Cada pedaço tem um motivo:

Trecho	O que faz	O que ela disse sobre isso
/prototype ... options	Gera várias versões antes de escrever código de verdade	Ela criou essa skill "em dois segundos", pedindo pro Claude
review and pick the one	O Claude escolhe primeiro e justifica	"Antes eu escolhia. Agora peço pra ele escolher e me dizer por quê"
research online	O Claude busca referências pra decidir	No código da empresa ela manda olhar Slack, Google Docs e BigQuery no lugar da internet
implement ... verify ... design iteration	Implementa e ajusta até combinar com o estilo do projeto
Put up a PR with a screenshot	O resultado chega como PR com imagem	"Eu nem revejo mais a conversa. Reviso o PR, que vem com a gravação da funcionalidade"
/loop until you're done	Não para no meio	"Loop é: continua até estar pronto"

Dica: pela documentação atual, um comando só é reconhecido no começo da mensagem. No prompt dela, /prototype e /loop aparecem no meio da frase e funcionam como instrução pro Claude. Se quiser garantir que a skill rode, comece a mensagem com /prototype.

A skill /prototype pra copiar

Ela não publicou a skill dela, só explicou o que faz: gera N opções (5 por padrão) de implementações diferentes de uma funcionalidade, monta um arquivo HTML, abre a prévia e itera algumas vezes. E brincou: "ninguém mais escreve skill na mão; se alguém disser que escreve, tá mentindo".

Na demo, a skill entregou uma página com 5 variantes de autocompletar, cada uma com botões pra simular cenários:

1. Lista suspensa (estilo IDE e Google Docs)
2. Texto fantasma na linha (estilo Copilot e QuickType do iOS)
3. Etiqueta flutuante com uma sugestão
4. Barra de sugestões (estilo teclado do iOS e Gboard)
5. Cartão desenhado à mão (no visual do próprio Excalidraw)

![A página com as 5 variantes de autocompletar que a skill gerou na demo]

Ela perguntou pra plateia qual preferiam. Escolheram a 2.

Por dentro: uma skill é uma pasta com um arquivo SKILL.md: um cabeçalho com nome e descrição, e instruções em Markdown. Segundo a documentação, o Claude só carrega o conteúdo quando precisa, e você chama com /nome-da-skill.

Esta é a minha versão, escrita a partir do que ela descreveu. Não é o arquivo dela.

---
name: prototype
description: Gera várias versões de uma funcionalidade de interface como protótipos HTML lado a lado, para comparar antes de implementar no código real. Use quando pedirem /prototype ou quiserem explorar opções de tela.
---

Funcionalidade pedida: $ARGUMENTS

1. Leia o projeto antes de desenhar: componentes, cores, fontes, espaçamentos e padrões de interação que já existem. Anote o que precisa ser respeitado.
2. Crie 5 variantes realmente diferentes entre si (a menos que eu peça outro número). Diferentes no padrão de interação, não só na cor.
3. Monte tudo num único arquivo HTML em `prototypes/<nome>.html`, uma variante por bloco, cada uma com:
   - nome e de onde vem a ideia (ex.: "estilo Google Docs")
   - uma frase sobre o ponto forte e outra sobre o ponto fraco
   - botões para simular 2 ou 3 cenários reais de uso
4. Use os estilos do projeto para o protótipo parecer parte dele.
5. Sirva o arquivo localmente e abra no navegador.
6. Escolha a variante que mais combina com os padrões do projeto e explique o porquê em até 3 frases.
7. Não mexa no código real até eu aprovar uma variante ou pedir que você implemente a escolhida.
8. Se eu pedir ajustes, gere uma nova rodada só com as variantes que sobraram.

Como instalar:

1. Crie a pasta ~/.claude/skills/prototype/ (vale pra todos os projetos) ou .claude/skills/prototype/ dentro do repositório (vale só pra ele).
2. Salve o texto acima como SKILL.md dentro dela.
3. Abra o Claude Code e digite /prototype seguido do que você quer, por exemplo /prototype filtro de busca na página de produtos.

Dica: faça como ela e não escreva a skill sozinho. Cole a minha versão no Claude e peça: "adapta essa skill pro meu projeto, que usa [stack]". Ele ajusta o caminho dos arquivos, o servidor local e o jeito de abrir a prévia.

4. Verificar no navegador e abrir o PR com print

Depois de implementar, o Claude abriu o Chrome sozinho pra testar a funcionalidade e gravou uma sequência de imagens pra anexar no PR. Ela recomenda o Claude in Chrome pra quem mexe em front-end: "é o melhor jeito de o Claude conseguir se verificar".

Por dentro: com a extensão Claude in Chrome conectada (claude --chrome, ou /chrome pra configurar), o Claude abre abas, clica, lê o console e grava GIFs. Ele usa o login do seu navegador e para quando aparece tela de login ou CAPTCHA.

Limites: precisa de plano Pro, Max, Team ou Enterprise com login pelo /login (chave de API não funciona). Não roda no WSL. Deixar o Chrome sempre ligado aumenta o uso de contexto, então a documentação sugere ligar só quando precisar.

Dica: o GIF captura tudo o que está na tela, incluindo dados de contas logadas. Revise antes de anexar num PR público.

5. /loop: continua até terminar

Por dentro: /loop é uma skill que já vem no Claude Code. Com intervalo (/loop 5m confere o deploy), roda num horário fixo. Sem intervalo, o próprio Claude decide quanto esperar entre uma rodada e outra. Sem nada, roda uma rotina de manutenção: termina o que ficou pendente, cuida do PR da branch (comentários, CI quebrado, conflitos) e faz limpezas.

Limites: só roda enquanto a sessão está aberta, e tarefas recorrentes expiram em 7 dias. Pra algo que precisa rodar com o computador desligado, use as routines (mais abaixo).

Parte 2: o que fica rodando em paralelo

Enquanto o Claude trabalha na funcionalidade, ela mostra três coisas que mantém ligadas o tempo todo.

![O resumo dela: Claude in the Cloud as a polish tool; Claude as a shepherd for my PRs; Claude for monitoring quality and work]

6. O Claude na nuvem como ferramenta de acabamento

Ela usa o Claude Code na web pra mandar "centenas de pequenos ajustes de acabamento o tempo todo": coisas que ela encontra no app e que não valem uma sessão nova nem um tempo reservado. No slide aparecem tarefas como "corrigir desalinhamento de 1px na seta do dropdown", "aumentar o contraste do placeholder", "deixar o estado vazio um pouco menos triste" e "desacelerar a animação de saída do toast". A anotação ao lado diz: nenhuma mudança é pequena demais.

![A lista de ajustes pequenos rodando em paralelo no Claude na nuvem]

Quando os engenheiros reclamam que tem PR demais, ela pede pro Claude juntar tudo num PR só. Alguns são aprovados automaticamente porque são mudanças pequenas de CSS.

Por dentro: cada sessão na nuvem roda numa máquina virtual isolada da Anthropic, clona seu repositório do GitHub e continua rodando com o notebook fechado. Você abre pelo claude.ai/code, pelo app no celular, pelo app de desktop (opção Cloud) ou pelo terminal:

claude --cloud "Aumente o contraste do texto de placeholder nos inputs"
claude --cloud "Corrija o desalinhamento da seta do dropdown de filtros"

Cada comando abre uma sessão separada, todas rodando ao mesmo tempo.

Limites: disponível nos planos Pro, Max e Team, e no Enterprise com os assentos certos. Clonar e abrir PR exige GitHub. As sessões na nuvem dividem o limite de uso com o resto da sua conta.

Dica: anote os detalhes de acabamento durante o dia num lugar só e, no fim da tarde, dispare um --cloud por item. No dia seguinte você revisa os PRs em vez de abrir cada arquivo.

7. O Claude como "pastor" dos PRs

Ela diz que nunca mais acompanha CI, revisão ou merge na mão. Tudo é automatizado com dois comandos que estavam no slide:

/simplify and /code-review and then /commit-push-pr

/loop review any open PRs and shepherd them to merge by fixing CI, resolving conflicts addressing any comments. If you need a review and it's been a while slack a person or a channel for the related changes.

Em português: "/loop revise os PRs abertos e conduza até o merge: conserte o CI, resolva conflitos, responda os comentários. Se precisar de revisão e já faz tempo, mande mensagem no Slack pra uma pessoa ou pro canal das mudanças."

![O slide com os dois comandos e o Claude consertando um teste que falhou]

O que cada comando faz hoje:

Comando	O que faz	De onde vem
/simplify	Quatro agentes revisam em paralelo o código alterado procurando reaproveitamento, simplificação, eficiência e nível certo de abstração, e aplicam as correções. Não procura bug	Já vem no Claude Code
/code-review (ou /review)	Revisa o diff atual, um PR ou uma branch procurando bugs de correção. --fix aplica, --comment comenta no PR	Já vem no Claude Code
/commit-push-pr	Cria branch se precisar, faz o commit, envia e abre o PR com resumo e plano de testes usando o gh	Plugin commit-commands da Anthropic

Na palestra ela disse que /simplify e /code-review eram internos do repositório deles. Hoje os dois estão na lista oficial de comandos do Claude Code. Ela também diz que a integração com o Slack é o que fecha o ciclo: o Claude manda DM pra quem está na revisão ou chama quem está de plantão.

Limites: o /commit-push-pr precisa do GitHub CLI (gh) instalado e logado e de um remoto chamado origin. A parte do Slack depende de você ter o conector configurado.

Dica: no slide, a nota de rodapé diz algo como "ponto extra se seu time já tem revisão automática; se não tem, fale com o time de DevProd, seus novos melhores amigos". Pergunte ao seu time quais skills de revisão e de PR já existem antes de criar as suas.

8. Uma rotina que vigia o que foi pro ar sem designer

Ela chama essa de a mudança que mais fez diferença pra ela. É uma routine do Claude Code, uma tarefa agendada que:

1. vasculha todos os repositórios atrás de mudanças de front-end;
2. confere se teve designer envolvido, olhando Slack, transcrições do Google Meet e Google Docs;
3. se não teve, sinaliza que aquilo foi pro ar sem designer;
4. revisa o design, propõe uma alternativa num PR já pronto e manda DM pro engenheiro pedindo pra trabalhar com um designer.

![O relatório da rotina: Claude Code UX, Fri→Mon gate, segunda 18 de maio de 2026]

E aqui ela conta a parte que pouca gente repete: ela teve que desligar as DMs, porque o Claude era muito ruim em design. Hoje ela consome o relatório sozinha. Deixa tudo escrito pra testar de novo quando sair o próximo modelo, porque "normalmente melhora".

Por dentro: segundo a documentação, uma routine é um prompt, um ou mais repositórios e conectores, empacotados uma vez e executados automaticamente na infraestrutura da Anthropic. Os gatilhos podem ser agenda (de hora em hora pra cima), uma chamada de API ou eventos do GitHub, como um PR novo. Você cria em claude.ai/code/routines ou com /schedule no terminal.

Passo a passo pra montar uma versão sua:

1. No terminal, rode /schedule e descreva o que quer, por exemplo: /schedule toda segunda às 9h07, revise os PRs de front-end mesclados na última semana.
2. Escolha os repositórios e o ambiente.
3. Na lista de conectores, deixe só os que a rotina precisa. Ela usa todos sem pedir permissão.
4. Rode uma vez com Run now e leia o resultado antes de deixar no automático.

Um ponto de partida pro prompt (meu, adaptado da descrição dela):

Liste os PRs mesclados nos últimos 7 dias que alteraram arquivos de interface (componentes, CSS, telas). Para cada um, verifique na descrição, nos comentários e nos canais de Slack disponíveis se um designer participou. Monte um relatório com três grupos: precisa de revisão de design, foi pro ar sem designer, teve designer. Para os que foram sem designer, aponte até 3 problemas visuais concretos com print. Não abra PR nem mande mensagem pra ninguém: só gere o relatório.

Limites: routines estão em research preview e existem nos planos Pro, Max, Team e Enterprise. Tudo o que a rotina faz no GitHub e no Slack aparece com o seu nome. O status verde só quer dizer que a sessão rodou sem erro de infraestrutura, não que a tarefa deu certo: abra a execução e leia.

Dica: comece como ela terminou: só relatório, sem mandar mensagem pra ninguém. Mandar DM automática com uma sugestão de design ruim gasta a confiança do time na ferramenta.

Comparação: o que cada coisa resolve

Ferramenta	Roda onde	Precisa do computador ligado	Melhor para
Worktree	No seu computador	Sim	Várias tarefas no mesmo projeto ao mesmo tempo
/loop	Na sessão aberta	Sim, com a sessão aberta	Fazer o Claude terminar ou acompanhar um PR
Claude Code na nuvem	Na infraestrutura da Anthropic	Não	Muitos ajustes pequenos em paralelo
Routine	Na infraestrutura da Anthropic	Não	Tarefas recorrentes e relatórios
Claude in Chrome	No seu navegador	Sim	Testar front-end e gravar a prova

Onde a fala simplifica

• "Ninguém mais escreve skill na mão" é exagero assumido. Ela pede pro Claude escrever, mas alguém ainda precisa saber o que pedir e revisar o resultado. A minha versão acima existe pra você ter de onde partir.
• Comandos no meio do prompt: como expliquei acima, pela documentação os comandos são reconhecidos no começo da mensagem. No meio, funcionam como instrução em texto.
• Preço e modelos mudaram desde a palestra: ela usava Opus 4.7 com fast mode a US$ 30/150. Quando escrevi este texto, o fast mode roda no Opus 5 e no 4.8 a US$ 10/50.
• O que era interno virou público: /simplify e /code-review hoje vêm no Claude Code.
• Sobre a chamada viral: postagens em inglês venderam a palestra como "a chefe de design da Anthropic ensina a usar o Claude a 100%". O cargo dela é design lead do Claude Code e do Cowork, e o tema é fluxo de trabalho no Claude Code. Ela repete duas vezes que o Claude ainda não é bom em design.

Pra ir mais fundo

Vídeos

• A palestra completa no Dive Club LIVE: os 12 minutos com a demo inteira.
• How Claude Code's lead designer builds with AI: entrevista longa com ela sobre como constrói com IA.
• Full Tutorial: From Design to Code with Claude Code: tutorial dela de setembro de 2025 no Creator Economy, do Figma ao código.
• Quality decisions should happen in live code, not in Figma: corte da Product School em que ela defende decidir qualidade no software funcionando.

Artigos e podcasts

• When code is no longer the constraint: Inside Anthropic's design team: como o time de design da Anthropic trabalha quando código deixa de ser o gargalo.
• Anthropic Head of Design on Claude Code's evolution: episódio do Product Podcast sobre a história do Claude Code e o papel do design.
• Dive Club, episódio ao vivo com Anthropic, Every e Ramp: o painel gravado no mesmo evento da palestra.

Documentação

• Worktrees: flags, limpeza, .worktreeinclude e worktree pra subagentes.
• Skills: formato do SKILL.md, argumentos e onde salvar.
• Modos de permissão: como o auto mode decide o que pode rodar.
• Fast mode: preço, requisitos e quando compensa.
• /loop e tarefas agendadas: sintaxe e diferença entre loop, tarefa no desktop e routine.
• Claude Code na nuvem: sessões em paralelo, --cloud e auto-fix de PR.
• Claude Code com o Chrome: instalação, permissões e gravação de GIF.
• Routines: gatilhos, conectores e limites.
• Lista de comandos: /simplify, /code-review, /loop, /schedule e o resto.

Glossário rápido

• Worktree: uma segunda pasta de trabalho do mesmo repositório, com branch própria. Deixa várias tarefas andarem sem se misturar.
• Skill: um arquivo de instruções que ensina o Claude a fazer uma tarefa do seu jeito. Você chama com /nome.
• PR (pull request): o pedido pra juntar uma mudança ao código principal. É onde acontece a revisão.
• CI: os testes e verificações que rodam sozinhos a cada mudança enviada.
• Merge: juntar a branch da mudança ao código principal depois de aprovada.
• Classificador: um segundo modelo que avalia se uma ação é segura antes de deixar o Claude executar.
• Routine: uma tarefa do Claude Code salva com prompt, repositório e gatilho, que roda na nuvem sem você abrir nada.
• Contexto de 1M: quanto texto o modelo consegue considerar de uma vez. Um milhão de tokens dá pra um projeto grande inteiro.

O que eu mais levo dessa palestra é o equilíbrio: ela automatiza quase tudo e mesmo assim guarda pra si a decisão do que vai pro ar. Se quiser mais material assim, o Cofre tem outras páginas sobre Claude Code, e toda segunda e sexta A Carta do Hélio chega no seu e-mail com o que importou em tecnologia.