Agente visual design director

Diretor de Design Visual (visual-design-director)

Esta página descreve o agente visual-design-director de forma didática. Se algum termo for novo, consulte o Glossário.

O que é / cargo

Este agente conduz o projeto de design visual de um produto (um aplicativo, um painel de dados ou um site) e entrega o resultado em alta fidelidade renderizada. Alta fidelidade renderizada quer dizer telas de verdade, escritas em HTML e CSS (as linguagens de página da web), que abrem no navegador para você ver o visual real, e não apenas um rascunho ou uma descrição em texto. O foco dele é a aparência final: cores, tipos de letra, formas, navegação e o jeito de cada tela.

Quando o Claude usa este agente

Quando você pede "design visual", "redesign" (refazer o visual), "modernizar a interface", "deixar bonito" ou "deixar moderno", "alta fidelidade", "mockup renderizado" (uma tela de demonstração que abre no navegador), "protótipo visual", "paleta de cores da interface", "como vai ficar a tela", "dark mode" (o modo de cores escuras) ou "spec de design" (o documento que registra as decisões visuais).

O que ele faz

• Pesquisa tendências atuais do tipo de produto, com fontes citadas (cores, tipografia, navegação, gráficos e pequenas animações que estão em uso hoje).
• Faz um brainstorm dirigido, ou seja, uma conversa de ideias guiada: uma pergunta por vez, sempre com opções concretas (A, B, C) e uma recomendação, começando pela personalidade do produto (o tom ou a "vibe"), porque ela decide o resto.
• Escreve mockups em HTML e CSS com o conteúdo real do produto (os textos, números e nomes de menu verdadeiros, nunca texto de enchimento) e abre no seu navegador para você ver de verdade.
• Itera por seção, isto é, avança em etapas com a sua aprovação visual a cada uma: primeiro a paleta de cores, depois a tipografia, a navegação, os componentes, as tabelas, os gráficos, os estados e, enfim, tela a tela.
• Cobre tudo o que é visual: cores no modo claro e no escuro com os códigos exatos (os valores "hex", os números que descrevem cada cor), tipos de letra, formas (cantos arredondados, sombras, espaçamentos), navegação, componentes com todos os seus estados (normal, ao passar o mouse, ao clicar, ao focar, desabilitado, carregando) e as microinterações (os pequenos retornos visuais a cada ação).
• Define o escopo da primeira versão (a v1): o que entra agora e o que fica para depois, com um marcador honesto na própria tela.
• Entrega uma spec versionada: um documento de design guardado na pasta docs/ do projeto, com as decisões, os tokens (as peças reutilizáveis de cor, espaço e tipo) e uma página por tela, mais os mockups salvos e indexados.
• Faz o handoff, ou seja, a passagem de bastão: monta um plano de implementação em fases e recomenda entregar a construção ao frontend-engineer (o engenheiro de interface).

Como ele se diferencia dos outros agentes de design

A família de design tem três especialistas com focos distintos, que se complementam:

• O ux-ui-designer cuida da jornada do usuário, da organização da informação e do fluxo, em texto, rascunho ou diagrama.
• O art-director cuida da identidade visual da marca: o "look", o painel de referências (mood board) e o guia de estilo.
• O visual-design-director (este agente) materializa a interface em telas renderizadas e validadas no navegador, em pixel de verdade, até virar uma spec pronta para programar.

Ele trabalha em dois modos: redesign (quando o produto já existe; ele diagnostica o que ficou datado e preserva o que funciona, mostrando antes e depois) e greenfield (quando o produto ainda está no planejamento; ele desenha o visual do zero, junto com a descoberta, antes de existir código).

Cor e camada

Cor azul (agente operacional). Família: Produto, UX e Design.

Manuais que ele consulta

• pipeline_release_1.0: em qual fase o design entra (a Fase 3, de design).
• lideranca_pipeline_release: como a liderança acompanha o design e o handoff.
• ORG: sob qual diretor o design se encaixa e com quem se coordena.
• TOOLING: as ferramentas livres que ele usa para abrir e conferir os mockups (navegador, captura de tela e verificação de acessibilidade).

A quem ele reporta

Dentro da equipe, ele produz na fase de design sob o Capitolino (CPO), o diretor de produto. Na hora do handoff (a passagem para a implementação), alinha com o Caetano (CTO), o diretor de tecnologia. A skill /bigtech pode acioná-lo quando o tamanho do projeto pede design dedicado. Ele não chama outros agentes sozinho: devolve a direção visual e um mapa de quem acionar, e quem dispara é a sessão principal ou o diretor que coordena.

Exemplo de pedido

"Quero modernizar o visual do meu painel de vendas." Ele pesquisa referências atuais com fontes, pergunta primeiro a personalidade que você quer (por exemplo, sóbrio e denso, ou claro e arejado), monta os mockups em HTML e CSS com os seus dados reais, abre no seu navegador e avança por seção, pedindo sua aprovação a cada etapa (paleta, tipografia, navegação, componentes, tabelas, gráficos), até fechar a spec e recomendar a entrega ao frontend-engineer.

---

Veja também Agente-ux-ui-designer, Agente-art-director, Agente-ux-writer, Agente-accessibility-specialist, o engenheiro que recebe o handoff Agente-frontend-engineer, o C-level de produto Agente-capitolino-cpo e a skill que o aciona /visual-design-director. Voltar para a Home.