Claude Code para Designers: Um Ambiente de Trabalho para Designers

A designer com quem trabalhei no mês passado entregou uma refatoração completa do sistema de design em três dias. Ela não é engenheira. Ela não conhece Bash. Ela nunca tinha escrito uma expressão regular na vida. Ela tinha o Claude Code, um arquivo CLAUDE.md e uma inclinação para apontar as próprias decisões ruins.

Essa é a versão da ferramenta sobre a qual ninguém fala. Cada postagem do Claude Code é escrita por um engenheiro sênior, para engenheiros sênior. É repleta de lanes de agentes, scripts de gancho e flags obscuras. Os designers leem, presumem que não é para eles e fecham a aba.

É para você, sim. Mais do que para a maioria dos engenheiros, honestamente. Porque o que os designers têm dificuldade não é digitar código. É manter um sistema de projeto em dez repositórios diferentes enquanto a equipe continua adicionando recursos. Esse é exatamente o problema que o Claude Code resolve de imediato.

Claude Code é um agente, não um autocompletar

⟦MARCA0⟧ não é um clone do GitHub Copilot. Não é uma janela de chat com tema de código. É um agente de longa duração que reside no seu terminal, lê todo o seu repositório, edita arquivos, executa testes, abre PRs e interage quando está confuso.

A mudança importante: ele não espera que você diga qual linha editar. Você define um objetivo. Ele descobre quais arquivos abrir, o que alterar, se deve adicionar um novo componente ou modificar um existente e como manter o restante do código funcionando enquanto faz isso.

Essa é a parte que muda tudo para um designer. Você para de apontar para linhas específicas. Você começa a descrever resultados. Descrever bem os resultados é uma disciplina em si, abordada em Engenharia ágil para designers. "Atualize todos os componentes Button para usar o novo token de anel de foco, incluindo a variante legada desativada, e certifique-se de que as histórias do Storybook ainda sejam aprovadas." Essa é uma frase. É também um dia de trabalho de design que se perde em quatro minutos.

O trabalho de um designer sempre foi bom gosto, não sintaxe. Claude Code faz do bom gosto o produto em si.

Instale em dez minutos

Você precisa de três coisas: Node.js, um terminal e uma conta Claude.

1. Abra o Terminal (Mac: Cmd+Espaço, digite Terminal). Você vai digitar dois comandos. Essa é toda a instalação.

2. Instale o Node, caso ainda não o tenha. Acesse nodejs.org, clique no download da versão LTS e execute-o. Essa parte é um instalador normal, que requer apenas um clique duplo.

3. No terminal, cole: npm install -g @anthropic-ai/claude-code

4. Navegue até o repositório do seu projeto: cd ~/path/to/your/repo

5. Execute: claude

Na primeira execução, você será guiado pelo processo de login. Pronto!

O repositório pode ser qualquer coisa: um pacote do sistema de design, um site de marketing Next.js, um Storybook, uma exportação de token Figma, uma configuração do Tailwind, enfim, qualquer coisa com a qual você trabalhe. Se for uma pasta com arquivos, o Claude Code poderá lê-la.

| Etapa | Aparência | Duração |

|------|-------------------|----------| | Instalar o Node | Instalador padrão para Mac/Windows | 2 min |

| Instalar o Claude Code | Um comando npm | 1 min |

| Fazer login | Redirecionamento do navegador | 1 min |

| Primeira sessão | claude em qualquer pasta | Imediato |

Escreva o CLAUDE.md como um briefing de design, não como um readme

O CLAUDE.md é o arquivo que Claude Code lê primeiro sempre que abre um repositório. Os engenheiros o usam para comandos de build e caminhos de teste. Isso é bom. Mas também significa deixar noventa por cento do valor real de fora.

Trate o CLAUDE.md como um briefing de design que você está entregando a um designer iniciante. Tom de voz, regras da marca, o que este produto é, o que nunca fazemos, como é um trabalho bem-feito aqui. Cada frase que você coloca no CLAUDE.md é uma frase que você nunca precisará repetir no chat.

O modelo que eu forneço a todos os designers que integro:

# CLAUDE.md

## What this repo is
One line. "Marketing site for Acme, a B2B analytics tool for finance teams."

## Voice
Three adjectives that describe how we write. Three phrases we never use. One example of a sentence we would ship and one we would cut.

## Design system
Where tokens live (path). Where components live (path). How we name things. Forbidden patterns (no inline styles, no hardcoded hex, no px values for spacing).

## Components we have
One-line descriptions of Button, Card, Hero, Nav, etc. So Claude does not build a new one when we already have it.

## What clean work looks like
A short paragraph. "We ship small, focused PRs. We update the Storybook story when we change a component. We never introduce a new dependency without asking."

## What to ask before proceeding
"If you are about to add a new color, stop and ask. If you are about to rename a component, stop and ask."

## Review standards
"Every change must pass typecheck and lint. Screenshots of before/after for any visual change."

Escreva-o uma vez por repositório. Atualize-o quando aprender algo novo sobre como o agente está cometendo erros em sua base de código. É cumulativo.

Os cinco fluxos de trabalho que importam

A maioria dos tutoriais Claude Code lista vinte recursos. Cinco deles representam noventa por cento do valor de um designer.

Manutenção do sistema de design. "Encontre todos os lugares onde ainda usamos os valores de espaçamento antigos (8px, 16px, 24px) e substitua-os por tokens (--space-2, --space-4, --space-6). Atualize os componentes. Mantenha as histórias em andamento." Dois minutos. Historicamente, uma semana.

Refatoração de componentes. "Nosso botão cresceu para doze variantes. Audite-as. Diga-me quais três são realmente usadas e quais nove estão obsoletas. Em seguida, proponha uma API consolidada e implemente-a por meio de um recurso opcional." Você revisa a proposta. Você diz sim. Ela é lançada.

Figma para página. Cole uma captura de tela Figma ou, melhor ainda, conecte um ⟦MARCA0⟧ ⟦MARCA1⟧. Diga "construa esta seção principal usando nossos componentes e tokens existentes, não novos". Isso gera um PR que corresponde ao design em uma ou duas rodadas de feedback.

Propagação de tokens. A marca atualiza uma cor. "Substitua --color-accent em todo o monorepo e execute a verificação de tipo." O trabalho não é digitar, é ter coragem. Claude Code tem coragem ilimitada e zero ego.

Revisão visual. "Execute o servidor de desenvolvimento, tire screenshots de todas as páginas e me diga quais têm espaçamento quebrado ou estouro de conteúdo em comparação com a última implantação." Esta é mágica se o seu repositório usa o Playwright ou uma configuração similar. Ela detecta coisas que seus olhos não veem.

| Fluxo de trabalho | Antes de Claude Code | Com Claude Code |

|----------|-------------------|------------------| | Varredura do sistema de design | 2 a 5 dias, 1 designer + 1 engenheiro | 20 minutos, 1 designer | | Auditoria de componentes + refatoração | 1 sprint | 1 tarde |

| Figma para página | 1 a 3 dias | 1 a 3 horas |

| Propagação de token | Semana, propenso a erros | Minutos, confiável |

| Teste de regressão visual | Geralmente nunca acontece | A cada PR |

Entregue o Figma, não a captura de tela

Se você tiver apenas um PNG, cole o PNG. O Claude Code lida com imagens. Ele não conseguirá precisão de espaçamento e algumas nuances de tipografia, mas a estrutura será preservada.

Se você tiver o Figma, conecte o servidor Figma MCP. Trata-se de uma instalação de cinco minutos que concede ao Claude Code acesso direto de leitura aos seus frames do Figma. IDs de frames, nomes de camadas, valores de espaçamento, links de tokens, toda a estrutura. A qualidade da saída melhora drasticamente. O modelo para de adivinhar.

De qualquer forma, uma regra: sempre forneça seu sistema de design existente, não uma tela em branco. "Construa isso com nossos componentes" é sempre melhor do que "construa isso". Se você deixar a tela em branco, o Claude Code inventará componentes que você já possui. Isso é trabalho desperdiçado.

Onde o Claude Code deixa de merecer sua confiança

Seja honesto consigo mesmo. É aqui que a ferramenta falha hoje.

Ilustração de marca real. Qualquer coisa que exija um estilo artístico específico, trabalho com personagens desenhados à mão ou mascotes de marca que precisam se parecer com a sua marca. O Claude Code usa geradores, não tem bom gosto. Você ainda contrata o Prismlight, o Runesmith ou um ilustrador humano para isso.

Gosto subjetivo de layout. Ele pode diagramar uma página corretamente. Não pode dizer se a página é emocionalmente entediante. Não pode dizer se o herói precisa de mais espaço. Não pode sentir que uma decisão de peso está errada. Isso ainda é você.

Decisões de produto baseadas em princípios fundamentais. Ele pode implementar tudo o que você pedir. Não pode dizer se você deveria pedir isso. Esse ainda é o trabalho do designer, que é quem realmente paga.

Qualquer coisa em que o repositório esteja uma bagunça. Se sua base de código não tem um sistema consistente, nenhum CLAUDE.md, nenhuma convenção de nomenclatura, nenhum token, o Claude Code piorará a bagunça mais rapidamente. Você precisa limpar a base primeiro. Isso é frustrante, mas também justo.

Se você quiser mais análises detalhadas do fluxo de trabalho de IA, navegue pelo restante do ⟦MARCA0⟧ Documentos. Se você deseja que isso seja instalado corretamente em sua equipe de design, contratar ⟦MARCA0⟧ e nós cuidaremos da configuração e do primeiro fluxo de trabalho real.

Lista de verificação inicial do designer

No primeiro dia, aqui está a lista real.

• Instale Claude Code (comando npm, um minuto)

• Faça login e verifique se a sessão funciona

• Escolha um repositório. Apenas um. Comece pequeno.

• Escreva o CLAUDE.md usando o modelo acima. Dedique uma hora a ele.

• Escolha um dos cinco fluxos de trabalho. Execute-o do início ao fim.

• Revise as diferenças cuidadosamente. Não as aprove sem verificar. Você é o diretor de arte.

• Informe a Claude onde houve o erro. Atualize o CLAUDE.md com a lição.

• Execute outro fluxo de trabalho. Faça isso amanhã.

Uma semana disso e você sentirá a diferença. Um mês e você não vai querer voltar atrás.

Perguntas Frequentes

Preciso saber programar para usar o Claude Code?

Não. Você precisa saber o que quer, como descrever e como interpretar um diff o suficiente para dizer "isto está certo" ou "isto está errado". Se você já deu feedback a um designer júnior, você tem essa habilidade.

O Claude Code é seguro em um repositório de produção?

Sim, se você usar uma branch. Nunca execute na branch principal. Crie uma branch, deixe o Claude Code funcionar lá, revise o PR como qualquer outro PR e faça o merge quando estiver tudo certo. O Git te protege. Assim como exigir que os PRs passem nos testes.

Claude Code vs Cursor vs v0 vs Lovable, qual a diferença?

O Cursor é um editor completo com o Claude integrado. As versões v0 e Lovable geram interfaces de usuário a partir de prompts, mas não permanecem no seu repositório a longo prazo. O Claude Code é headless, pode ser executado em qualquer repositório e é o mais poderoso para bases de código existentes. Para protótipos totalmente novos, a versão v0 ou o Lovable são mais rápidos. Para o desenvolvimento de produtos reais, o Claude Code é a melhor opção.

Quanto custa o Claude Code?

Uma assinatura Claude Max cobre o custo, e é por onde a maioria dos designers deve começar. Equipes maiores podem optar pelo modelo de API. De qualquer forma, o custo é baixo comparado ao tempo economizado nos fluxos de trabalho mencionados anteriormente.

Para que eu nunca devo usar o Claude Code?

Ilustração da marca, avaliações de gosto pessoal, estratégia de produto, qualquer coisa que exija saber por que um usuário realmente deseja o recurso. Mantenha essas tarefas sob seu controle. Delegue a execução repetitiva à ferramenta.

Você não é mais o júnior

Por muito tempo, os designers eram as pessoas que criavam a visão e a entregavam aos engenheiros que, de fato, construíam o projeto. Isso significava que os designers esperavam. Pela disponibilidade da sprint. Pelo trabalho de backend. Por alguém que digitasse.

Essa era acabou.

O júnior não é mais uma pessoa. O júnior é um modelo. Você é o diretor de arte.

Escreva o CLAUDE.md como um briefing de design. Entregue o trabalho ao agente. Analise as diferenças como você analisaria o mockup de um júnior, seguindo padrões. Devolva quando estiver errado. Entregue quando estiver certo.

A refatoração do sistema de design leva três dias, não três sprints. O site de marketing é lançado esta semana, não no próximo trimestre. A atualização do token se propaga em minutos, não em dias de perseguição.

Instale. Escreva o briefing. Entregue o trabalho.