Como uso o código Claude como arma secreta de um designer
Vi um amigo designer passar por uma demonstração do Claude Code no Twitter na semana passada. “Isso é coisa de desenvolvedor”, disse ela, mal olhando para a tela. Trinta segundos de dispensa por algo que remodelou completamente a forma como construo interfaces.
Ela não está sozinha. A maioria dos designers que conheço trata Claude Code como se fosse uma sala trancada com uma placa “Somente desenvolvedores” na porta. Comandos de terminal, sistemas de arquivos, geração de código – tudo parece o oposto do que os designers contrataram. E eu entendo. A lacuna entre arrastar elementos no Figma e digitar comandos em uma caixa preta parece enorme.
Mas aqui está o que ninguém mostrou ao meu amigo. Eles não mostraram a ela no momento em que digitei uma única frase em meu terminal e vi um painel SaaS completo se materializar em sua ferramenta favorita - Figma. Eles não mostraram a ela a sincronização bidirecional que permite enviar alterações de Claude para Figma, ajustá-las manualmente e, em seguida, transferir esses ajustes de volta para Claude para outra rodada de iteração. Eles definitivamente não mostraram a ela o Pencil.dev, uma ferramenta que reúne todo o poder de Claude Code em uma interface que realmente se parece com algo que um designer usaria.
Passei os últimos meses preenchendo a lacuna entre o Claude Code e os fluxos de trabalho de design. Parte do que descobri foi genuinamente emocionante. Parte disso foi frustrante o suficiente para me fazer fechar meu laptop. E algumas coisas se enquadraram na categoria “por que ninguém me contou isso antes?”
Essa última categoria é o assunto deste post.
A confusão que mantém os designers afastados
Antes de abordar qualquer coisa técnica, preciso esclarecer o maior mal-entendido que vejo nas comunidades de design. As pessoas continuam confundindo Claude Code com Claude, o modelo. Eles parecem semelhantes. Eles compartilham um nome. Mas são coisas fundamentalmente diferentes, e misturá-las leva a expectativas totalmente erradas.
Claude, o modelo - aquilo com quem você conversa em Claude.ai - é um modelo de linguagem. Você digita o texto, você recebe o texto. Ele não tem ideia do que está no seu computador. Ele não pode abrir arquivos, criar designs ou interagir com qualquer ferramenta da sua máquina. Pense nisso como um cérebro brilhante flutuando em uma jarra. Inteligente, mas desconectado do mundo físico.
Claude Code é o corpo onde o cérebro vive. Quando você executa o Claude Code em sua máquina – por meio do terminal, do aplicativo de desktop ou do VS Code – ele fica em mãos. Mãos reais. Ele pode ler seus arquivos, escrever novos, instalar pacotes, conversar com APIs e, sim, gerar designs que vão diretamente para seu espaço de trabalho Figma. O cérebro subjacente da IA é o mesmo (atualmente Claude Opus 4.6), mas a estrutura operacional em torno dele muda tudo.
Por que isso é importante para os designers? Porque se você tentou conversar com Claude na web e pensou “isso não pode me ajudar a projetar nada”, você estava certo – sobre aquela interface específica. Claude Code é um animal totalmente diferente.
Tive uma conversa com um líder de UX em uma agência de médio porte no mês passado que me disse que “tentou Claude para design e não funcionou”. Quando perguntei o que ela tinha feito, ela descreveu a cópia das especificações dos componentes Figma na janela de bate-papo e pediu sugestões de design. É como tentar usar o Photoshop descrevendo suas edições em um e-mail. A ferramenta não estava errada – a interface estava.
Aqui está o detalhamento que finalmente fez clique para mim:
| Recurso | Modelo Claude (Web/API) | Código Cláudio |
|---|---|---|
| Acesso ao sistema de arquivos | Nenhum | Leitura/gravação completa |
| Integração Figma | Nenhum | Sincronização bidirecional via MCP |
| Geração de design | Apenas descrições de texto | Produção visual real |
| Interação do sistema | Caixa de areia isolada | Acesso total à máquina |
| Executa onde | Navegador ou API | Terminal, aplicativo de desktop, código VS |
Depois que essa distinção foi percebida, tudo sobre Claude Code para design começou a fazer sentido. Mas entender o conceito é uma coisa – configurá-lo é onde a maioria dos designers atinge seu primeiro obstáculo.
Fazendo o código Claude funcionar (sem perder a cabeça)
Vou ser honesto sobre algo que a maioria dos tutoriais ignora. O processo de instalação do Claude Code não é difícil, mas é desconhecido. Se você nunca abriu um terminal antes, os primeiros dois minutos serão desconfortáveis. Esse desconforto desaparece rapidamente – já vi designers que nunca tocaram em uma linha de comando serem totalmente configurados em menos de dez minutos – mas não vou fingir que isso não existe.
Aqui está o passo a passo para Mac. Windows e Linux seguem um padrão semelhante com comandos diferentes.
Etapa 1: Abra seu terminal.
Não é o seu navegador. Não é o código VS (ainda). O aplicativo Terminal real no seu Mac. Pressione Cmd + Espaço, digite “Terminal” e abra o primeiro resultado. Você verá uma janela baseada em texto com um cursor piscando. É aqui que a magia começa.
Etapa 2: Instale o Código Claude.
Copie o comando de instalação da documentação oficial do Claude para o seu sistema operacional. Cole-o no terminal e pressione Enter. O instalador cuida de tudo – dependências, caminhos, configurações. Você verá algum texto rolando. Deixe terminar.
Dica profissional: Se você vir um texto de erro em vermelho durante a instalação, não entre em pânico. Faça uma captura de tela e cole-a em qualquer ferramenta de bate-papo de IA (ironicamente, até a interface web de Claude funciona aqui). Nove em cada dez vezes, a correção é uma única dependência ausente ou um problema de permissão. Já vi designers resolverem seus próprios erros de instalação mais rapidamente do que alguns desenvolvedores juniores com quem trabalhei.
Etapa 3: Inicie o Código Claude.
Uma vez instalado, digite claude em seu terminal e pressione Enter. É isso. Agora você está dentro de uma sessão do Claude Code. O terminal se torna sua janela de conversa: você digita instruções, Claude responde e executa ações.
Etapa 4: Instale o plugin Figma MCP.
Esta é a parte que transforma Claude Code de uma ferramenta de desenvolvedor em uma ferramenta de designer. MCP – que significa Model Context Protocol – é a ponte entre o Claude Code e ferramentas externas como o Figma. Copie o comando de instalação do plugin MCP da documentação e execute-o dentro de sua sessão ativa do Claude Code.
Etapa 5: Autentique sua conta Figma.
Após instalar o plugin MCP, Claude Code solicitará que você conecte sua conta Figma. Seu navegador será aberto com uma caixa de diálogo de permissões. Clique em “Permitir”. Certifique-se de estar conectado à conta Figma correta - aprendi isso da maneira mais difícil quando conectei acidentalmente minha conta pessoal em vez da conta da agência e passei vinte minutos me perguntando por que o arquivo da equipe não estava aparecendo.
Esse processo de cinco etapas é toda a configuração. Nenhum contêiner Docker. Nenhuma variável de ambiente. Nenhum arquivo de configuração para editar manualmente. E uma vez feito isso, você nunca mais precisará fazer isso.
Mas a configuração é apenas o pré-requisito. O que acontece a seguir é onde as coisas ficam genuinamente interessantes para os designers – e onde descobri alguns recursos que mudaram a forma como abordo o trabalho de design em estágio inicial.
A sincronização bidirecional do Figma que mudou meu fluxo de trabalho
A primeira vez que testei a integração do Figma MCP, enviei ao Claude Code este prompt:
"Crie um painel preto e roxo para uma plataforma analítica SaaS moderna neste arquivo Figma."
Colei o URL em um arquivo Figma em branco. Então esperei.
Em cerca de noventa segundos, Claude Code gerou um layout de painel completo – navegação na barra lateral, cartões de métricas, uma área de gráfico, tabelas de dados, avatares de usuários – e colocou-o diretamente em meu arquivo Figma. Mudei para minha guia Figma e lá estava ela. Não é uma captura de tela. Não é uma imagem estática. Camadas e componentes reais do Figma que eu poderia selecionar, mover, redimensionar e editar.
Minha primeira reação foi de excitação. Minha segunda reação – cerca de dez minutos depois – foi mais sutil.
O design gerado foi impressionante como ponto de partida. A lógica do layout era sólida, a paleta de cores correspondia ao meu prompt e a hierarquia dos componentes fazia sentido. Mas não estava pronto para produção. Alguns elementos tinham tamanhos estranhos. Algumas etiquetas de texto tinham caracteres emoji que eu não pedi. O comportamento responsivo era inexistente — tudo estava posicionado para uma janela de visualização específica.
É aqui que a sincronização bidirecional se torna poderosa. Em vez de jogar tudo fora e recomeçar do zero, fiz o que qualquer designer faria: abri o arquivo Figma e comecei a consertar as coisas manualmente. Eu removi os emojis indesejados. Ajustei o espaçamento. Reagrupei alguns componentes que estavam aninhados de maneira estranha.
Então - e esta é a parte que me fez sentar direito - copiei a URL do meu arquivo Figma atualizado, voltei para o terminal Claude Code e disse: "Fiz algumas alterações. Extraia o design atualizado deste arquivo Figma e refine a seção de visualização de dados."
Claude Code retirou minhas alterações, reconheceu o que eu havia modificado e repetiu o design, preservando minhas edições manuais. Sincronização bidirecional. Colaboração real entre um designer humano e um agente de IA, com Figma como tela compartilhada.
Este é o fluxo de trabalho que estabeleci após um mês de experimentação:
- Gerar — Envie ao Claude Code um prompt detalhado com um URL de arquivo Figma em branco ou parcialmente projetado.
- Revisão — Abra o Figma, inspecione o que foi gerado. Identifique o que funciona e o que não funciona.
- Refine manualmente — Corrija você mesmo os problemas óbvios. Você é um designer – este é o seu superpoder.
- Push back — Envie o URL Figma atualizado de volta para Claude Code com instruções específicas para a próxima iteração.
- Repetir — Mantenha esse ciclo até que o design atenda ao seu padrão.
O que torna isso poderoso não é um único passo. Muitas ferramentas podem gerar designs a partir de prompts. O poder está no circuito – o fato de Claude Code tratar o Figma como um documento vivo, em vez de um alvo de exportação único.
Devo mencionar algo que a maioria do conteúdo promocional sobre esse fluxo de trabalho omite convenientemente. Os designs gerados precisam de trabalho real. A capacidade de resposta é um ponto fraco conhecido — Claude Code tende a projetar para uma única janela de visualização e não cria variantes responsivas automaticamente. A lógica do layout às vezes falha de maneira inesperada, especialmente em telas menores. Se você estiver trabalhando em um laptop com espaço de tela limitado, os resultados serão piores do que em uma tela maior. Obtive resultados visivelmente melhores ao trabalhar no meu monitor de 27 polegadas em comparação com a tela do meu MacBook.
Estes não são problemas. São os mesmos tipos de problemas com os quais você lidaria ao iterar qualquer design em estágio inicial. A diferença é que seu ponto de partida — aquilo em que você está interagindo — apareceu em sessenta segundos, em vez de seis horas.
Você realmente não precisa do terminal (mas é útil conhecê-lo)
Eu sei o que alguns designers estão pensando agora. "Tudo isso parece ótimo, mas eu realmente não quero digitar comandos em um terminal todos os dias."
Ponto justo. E honestamente? Você não precisa.
Claude Code vem com um aplicativo de desktop que faz tudo o que o terminal faz, envolto em uma GUI adequada. Mesmo mecanismo subjacente. Mesma integração Figma. Mesmas capacidades. Apenas uma interface diferente – uma com botões e um campo de entrada de texto em vez de um prompt de comando.
Eu testei ambos extensivamente. O aplicativo de desktop é uma forma perfeitamente válida de trabalhar e, para designers que desejam minimizar sua exposição a fluxos de trabalho baseados em terminal, é a escolha certa. Usei-o para gerar tudo, desde layouts de páginas Sobre nós até páginas completas de produtos de comércio eletrônico, e os resultados foram indistinguíveis do que obtive por meio do terminal.
Dito isto, ainda recomendo passar uma hora aprendendo o básico do terminal. Não porque o aplicativo de desktop seja inferior – não é – mas porque a alfabetização do terminal desbloqueia todo um universo de ferramentas adjacentes. Plug-ins MCP, scripts personalizados, fluxos de trabalho automatizados, pipelines de CI/CD que executam o Claude Code como parte de um processo de implantação – todos eles priorizam o terminal. Você não precisa deles agora. Mas daqui a seis meses, quando as ferramentas de design assistidas por IA estiverem ainda mais profundamente incorporadas aos fluxos de trabalho profissionais, você ficará feliz por saber como lidar com uma linha de comando.
Pense nisso como aprender HTML básico como designer. Você não precisa dele para a maior parte do seu trabalho diário. Mas os designers que entendem isso têm uma vantagem permanente sobre aqueles que não o entendem.
Pencil.dev: quando você deseja o caminho mais amigável
É aqui que as coisas ficam interessantes para designers que desejam geração de design de IA, mas realmente não querem lidar com terminais ou aplicativos de desktop que parecem ferramentas de desenvolvedor.
Pencil.dev é uma plataforma de terceiros que coloca uma interface amigável ao designer no motor do Claude Code. Você o conecta à sua assinatura do Claude e, em vez de um prompt de terminal, obtém um espaço de trabalho visual onde pode digitar solicitações de design e observar a materialização dos componentes em tempo real em uma tela ao vivo.
Passei uma semana com o Pencil e saí com sentimentos confusos, mas principalmente positivos.
O que faz bem: prototipagem rápida. Eu poderia digitar “Criar uma página de preços com três níveis, tema escuro, cartões arredondados” e observar o design se construir peça por peça no lado esquerdo da tela. O Pencil também inclui kits de interface de usuário e sistemas de design pré-construídos, para que você possa aplicar um estilo consistente sem descrever cada detalhe em seu prompt. Para sessões de brainstorming, moodboard ou geração de conceitos rápidos para apresentar a um cliente, é genuinamente rápido e surpreendentemente capaz.
O que não faz: exportar para Figma. A partir de agora, o Pencil existe em seu próprio ecossistema. Você pode projetar, iterar e refinar dentro da plataforma, mas não há sincronização direta para enviar seu trabalho para um arquivo Figma. Para designers cujo fluxo de trabalho inteiro reside no Figma, esta é uma limitação significativa. Você precisaria recriar manualmente tudo o que deseja manter, o que anula parte do propósito.
Minha recomendação? Use o Pencil para exploração e idealização inicial - a fase "e se tentássemos isso", onde a velocidade é mais importante do que a fidelidade. Em seguida, mude para o fluxo de trabalho Claude Code + Figma MCP quando estiver pronto para construir algo que você realmente entregará aos desenvolvedores ou apresentará aos clientes.
Aqui está uma comparação rápida de todas as três abordagens:
| Abordagem | Melhor para | Sincronização Figma | Curva de Aprendizagem | Velocidade |
|---|---|---|---|---|
| Código Claude (Terminal) | Controle total, fluxos de trabalho avançados | Sim (bidirecional) | Moderado | Rápido |
| Código Claude (aplicativo de desktop) | Designers avessos a terminais | Sim (bidirecional) | Baixo | Rápido |
| Lápis.dev | Prototipagem rápida, idealização | Não | Muito baixo | Muito rápido |
Não há uma única escolha “certa” aqui. Eu uso todos os três dependendo da tarefa e suspeito que a maioria dos designers acabará adotando um padrão semelhante. O importante é que a rampa de acesso exista em todos os níveis de conforto.
O que a maioria das postagens do "Código Claude para Design" não dirá a você
Quero dedicar algum tempo às coisas desconfortáveis porque acho que a honestidade aqui é mais importante do que o exagero.
As demonstrações refinadas são enganosas. Cada vitrine do Claude Code que você viu nas redes sociais representa o melhor resultado de alguém após várias iterações. A primeira saída quase nunca é o que é postado. Recebi prompts que produziram layouts com elementos sobrepostos, texto invisível em fundos da mesma cor e hierarquias de componentes tão emaranhadas que desagrupá-los no Figma criou mais problemas do que resolveu. Esses não são casos extremos raros – eles fazem parte do fluxo de trabalho normal.
A capacidade de resposta é uma verdadeira fraqueza. Mencionei isso antes, mas vale a pena repetir. Claude Code projeta para uma única janela de visualização por padrão. A criação de variantes responsivas requer instruções explícitas e detalhadas e, mesmo assim, os resultados geralmente precisam de ajustes manuais significativos. Se o design responsivo for fundamental para o seu projeto (e quando não é?), planeje fazer um trabalho manual substancial após a etapa de geração de IA.
Sua habilidade de solicitação é extremamente importante. A diferença entre uma solicitação vaga e uma detalhada não é linear – é exponencial. "Faça-me um painel" lhe dará algo genérico e sem graça. "Crie um painel analítico com tema sombrio com uma barra lateral dobrável, quatro cartões KPI na parte superior mostrando MRR, taxa de rotatividade, usuários ativos e pontuação NPS, um gráfico de linhas com dados de tendências de 6 meses abaixo e uma tabela classificável de transações recentes na parte inferior" lhe dará algo notavelmente próximo do que você imaginou. O investimento em aprender a escrever instruções detalhadas e específicas rende dividendos em literalmente todas as tarefas de design.
Isso não substitui o design thinking. Claude Code pode executar layouts visuais, mas não pode fazer pesquisas com usuários. Não pode entrevistar as partes interessadas. Ele não consegue entender por que um determinado fluxo parece confuso ou por que os usuários continuam desistindo na etapa três da sua integração. O julgamento do design, o pensamento estratégico, a empatia pelos usuários – isso ainda é domínio inteiramente seu. Claude Code é uma ferramenta de produção, não uma ferramenta de estratégia.
Eu costumava pensar que este último ponto era óbvio. Então vi uma postagem no LinkedIn de um fundador de uma startup alegando que ele “substituiu sua equipe de design por IA”. A experiência do usuário de seu aplicativo era, previsivelmente, terrível. Belos componentes dispostos em padrões que não faziam sentido para os humanos reais. Decoração sem design. Não seja essa pessoa.
A avaliação honesta é esta: Claude Code torna a parte de produção do design dramaticamente mais rápida, deixando a parte de pensamento inteiramente em suas mãos. Se você é forte em design thinking e fraco em velocidade de produção, Claude Code é genuinamente transformador. Se você espera que a IA pense por você, você produzirá projetos ruins com mais rapidez.
O que realmente construí com este fluxo de trabalho
Números e teoria são bons, mas sei o que me convenceu: ver resultados reais. Então aqui está o que meu fluxo de trabalho Claude Code + Figma realmente produziu no mês passado.
Painéis SaaS: gerei layouts iniciais de painéis para três projetos de clientes. Tempo médio desde o prompt até o primeiro rascunho do Figma: cerca de dois minutos. Tempo médio para refinar esse rascunho em algo que eu apresentaria a um cliente: cerca de quarenta e cinco minutos. Compare isso com meu fluxo de trabalho anterior, onde um primeiro rascunho demorava de duas a três horas. A matemática resulta em uma redução de tempo de aproximadamente 60% nas fases iniciais do projeto.
Páginas de destino: usei o Claude Code para gerar seções principais acima da dobra, grades de recursos e tabelas de preços. As seções principais tendem a ser os resultados mais fortes – layouts limpos com boa hierarquia visual. As grades de recursos precisam de mais iteração. As tabelas de preços são surpreendentemente boas imediatamente.
Exploração de componentes: Este é meu caso de uso favorito e um que eu não esperava. Quando estou tentando decidir como deve ser a aparência de um determinado elemento da interface do usuário, aciono rapidamente cinco ou seis prompts no Claude Code com diferentes direções estilísticas. "Mostre-me este cartão com morfismo de vidro." "Agora tente com uma abordagem brutalista." "Que tal um estilo neumórfico suave?" Conseguir cinco explorações estilísticas diferentes em três minutos é muito mais eficiente do que zombar de cada uma delas manualmente.
Bootstrapping do sistema de design: usei o Claude Code para gerar uma biblioteca de componentes inicial para um novo projeto — botões, entradas, cartões, modais, padrões de navegação — todos seguindo uma paleta de cores e escala de tipo especificadas. Deu-me cerca de 70% do que eu precisava. Os 30% restantes exigiram refinamento manual para consistência e casos extremos. Mas começando com 70% em vez de zero? Essa é uma melhoria significativa no fluxo de trabalho.
O prazo realista para se sentir confortável com esse fluxo de trabalho: cerca de duas semanas de uso regular. Os primeiros dias parecem desajeitados enquanto você aprende o que é uma boa sugestão e uma medíocre. No final da primeira semana, você terá uma biblioteca de padrões de prompt que produzem resultados úteis de forma consistente. Na segunda semana, a ferramenta desaparece do seu fluxo de trabalho – você para de pensar em “usar o Claude Code” e começa a pensar em “projetar”.
Vitórias rápidas vêm rápido. Um conceito de landing page em minutos, em vez de horas. Uma variação de componente explorada em segundos, em vez de construída do zero. Essas vitórias iniciais mantêm você motivado durante a curva de aprendizado.
Os ganhos a longo prazo são maiores. Depois de internalizar os padrões de solicitação e o fluxo de trabalho de sincronização bidirecional, seu rendimento no trabalho de design de produção aumenta substancialmente. Estou entregando consistentemente conceitos de design iniciais de 50 a 60% mais rápido do que há seis meses. O padrão de qualidade não caiu — estou apenas gastando menos tempo com peças mecânicas e mais tempo com decisões que realmente importam.
Para onde tudo isso está indo
Algo em que fico pensando - e para o qual ainda não tenho uma resposta clara - é como serão os fluxos de trabalho de design daqui a doze meses. A integração do Figma MCP é relativamente nova. Pencil.dev está em estágio inicial. O próprio Claude Code recebe grandes atualizações de capacidade aproximadamente a cada trimestre. As ferramentas que estou descrevendo hoje são as piores que já existiram.
Suspeito que a etapa terminal desaparecerá dentro de um ano. Não porque os terminais sejam ruins, mas porque o ecossistema de plugins Figma irá alcançá-los. Posso facilmente imaginar um mundo onde Claude Code seja apenas mais um painel dentro do Figma – você seleciona um quadro, digita um prompt e a IA gera ou modifica o conteúdo. Nenhum terminal. Nenhuma configuração de MCP. Sem mudança de contexto.
Para designers que começam a aprender essas ferramentas agora, essa transição parecerá natural. Para os designers que esperam até a versão “fácil” chegar, eles começarão do zero enquanto seus pares já estão na iteração seis.
Essa é a verdadeira razão pela qual estou escrevendo isso. Não porque Claude Code seja perfeito hoje – não é. Não porque todo designer precise se tornar um especialista em terminais — eles não precisam. Mas porque os designers que entendem os fluxos de trabalho assistidos por IA no momento estão construindo uma lacuna de habilidades que aumenta a cada mês.
Meu amigo que passou pela demonstração do Claude Code? Mostrei a ela a integração do Figma no dia seguinte. Ela passou três horas naquela noite aprendendo o básico. Na semana passada, ela o usou para apresentar um conceito ao cliente que ela havia prototipado em quinze minutos. O cliente aprovou na hora.
Ela não chama mais isso de “coisa de desenvolvedor”.
Então aqui está o meu desafio. Escolha uma das três abordagens que descrevi – terminal, aplicativo de desktop ou Pencil.dev – e gaste trinta minutos com ela esta semana. Apenas trinta minutos. Gere um design. Veja o que acontece. Porque o pior resultado de tentar é perder meia hora. E o melhor resultado é que você muda fundamentalmente a forma como trabalha.
Quanto valem os seus trinta minutos?
Vamos trabalhar juntos
Procurando construir sistemas de IA, automatizar fluxos de trabalho ou dimensionar sua infraestrutura tecnológica? Eu adoraria ajudar.
- Fiverr (compilações e integrações personalizadas): fiverr.com/s/EgxYmWD
- Portfólio: mejba.me
- Ramlit Limited (soluções empresariais): ramlit.com
- ColorPark (design e branding): colorpark.io
- xCyberSecurity (serviços de segurança): xcybersecurity.io
