UI designer com IA: interfaces consistentes, no seu próprio código

O que faz um UI designer com IA

O que ele entrega é código, então uma mudança fica pronta para ir ao ar assim que você aprova.

• Audita páginas atrás de tipografia, espaçamento e cores inconsistentes e corrige com os seus design tokens.
• Transforma markup avulso em componentes compartilhados.
• Adiciona e confere o modo escuro.
• Corrige problemas de acessibilidade: contraste, estados de foco, labels e uso pelo teclado.
• Tira prints de antes e depois em larguras de desktop e celular para a revisão.

Metas para dar a ele

Dê a um funcionário de IA um número para mover, como faria com uma nova contratação, e revise toda semana. Escolha uma destas para começar.

A rotina diária dele

• Escolhe a próxima tela do quadro ou da lista de auditoria.
• Tira prints em larguras de desktop e celular, no modo claro e escuro.
• Corrige com os tokens e componentes do design system; cria um componente se um padrão se repete.
• Confere de novo no navegador e roda as verificações de acessibilidade.
• Abre um pull request com prints de antes e depois.

Como configurar um UI designer com IA com Claude Code ou Codex

1. Escreva o brief do cargo

   Salve como CLAUDE.md (Claude Code) ou AGENTS.md (Codex) no repositório em que o funcionário trabalha, para que toda sessão comece com a função, a meta e as regras dele. Veja o guia do CLAUDE.md.

   # Cargo: UI designer
   Meta: 3 telas refinadas por semana.
   
   ## Para cada tela
   1. Tire prints: desktop e celular, claro e escuro.
   2. Corrija tipografia, espaçamento e cores só com os nossos tokens.
   3. Reutilize componentes; extraia um se um padrão se repetir.
   4. Confira contraste, estados de foco e labels.
   5. Abra um PR com prints de antes e depois.
   
   ## Regras
   - Nada de cores, fontes ou valores de espaçamento novos fora dos tokens.
   - Pergunte antes de mudar textos, layouts de fluxos principais ou a marca.

2. Dê a ele as ferramentas de que precisa

   O repositório do front-end e um servidor de desenvolvimento local, um navegador que ele consiga controlar para tirar prints, seus design tokens e sua biblioteca de componentes, e um verificador de acessibilidade.

3. Decida o que precisa do seu sim

   Pergunte antes de mudar a marca (logo, cores, fontes), os textos, o layout dos fluxos de cadastro ou checkout, ou qualquer coisa que um cliente vá notar em uma página que converte.

4. Coloque-o em uma agenda

   Um cargo precisa de ritmo, não de um único prompt. Use /loop ou tarefas agendadas para um prompt recorrente, ou dê a ele horário de trabalho, um heartbeat e um quadro de tarefas; veja como deixar o Claude Code proativo.

Guias relacionados

Para ter um designer trabalhando junto com um engenheiro, veja vários agentes do Claude Code. Para ele pegar trabalho sozinho, leia como deixar o Claude Code proativo.

Contrate um UI designer com IA em vez de programar um

O Crewmark tem um UI designer com IA pronto para contratar. Ele roda na sua sessão do Claude Code, Codex, DeepSeek Harness ou OpenCode, na assinatura que você já paga, acorda com um heartbeat no horário de trabalho, pega a próxima tarefa de um quadro compartilhado e manda mensagem quando precisa de uma decisão.

1. Escolha o cargo

   As habilidades, a meta e a agenda já vêm configuradas. Troque a meta pelo seu próprio número.

2. Conecte seu projeto

   Rode o comando de configuração no repositório ou na pasta em que ele trabalha. Ele ganha a própria sessão e o próprio checkout.

3. Revise, não fique de babá

   Ele comenta nas tarefas enquanto trabalha e pergunta antes de qualquer coisa da sua lista de aprovação. Leia o que é um funcionário de IA.

Perguntas frequentes sobre o UI designer com IA