Skill visual design director

Skill: /visual-design-director

Esta página explica a skill /visual-design-director de forma didática. Se algum termo for novo, consulte o Glossário.

O que é uma skill

Uma skill é um atalho de fluxo pronto no Claude Code. Você digita uma barra e o nome (/visual-design-director) e ela executa vários passos automaticamente. Pense numa skill como um botão que dispara uma rotina inteira.

O que a /visual-design-director faz

A /visual-design-director é o atalho que aciona o agente visual-design-director (o Diretor de Design Visual) para cuidar do visual de um produto 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 seu navegador para você ver o visual real, e não apenas um rascunho ou uma descrição em texto.

Em uma frase: ela entrega o pedido de design ao agente especialista, que pesquisa tendências atuais, conversa as ideias com você, monta as telas de demonstração com o conteúdo verdadeiro do produto, abre no navegador e avança por partes até virar um documento de design pronto para programar.

Quando usar

Use a /visual-design-director quando pensar em frases como:

• "Quero o design visual desta tela."
• "Modernizar a interface, deixar bonito e moderno."
• "Fazer um redesign (refazer o visual) do meu produto."
• "Quero um mockup renderizado (uma tela de demonstração que abre no navegador)."
• "Qual vai ser a paleta de cores da interface?"
• "Como vai ficar a tela?"
• "Quero o dark mode (modo de cores escuras)."
• "Preciso da spec de design (o documento com as decisões visuais)."

Como invocar

Dentro do Claude Code, digite o comando com o seu pedido. Você pode acrescentar alguns ajustes opcionais entre colchetes:

/visual-design-director "modernizar o painel de vendas"
/visual-design-director "tela de login do app" --modo greenfield
/visual-design-director "redesign do site" --escopo produto --stack web

O que os ajustes opcionais significam:

• --modo redesign ou --modo greenfield: se o produto já existe (redesign, refazer o visual) ou se ainda está no planejamento (greenfield, do zero).
• --escopo tela|fluxo|produto: o tamanho do trabalho, de uma única tela até o produto inteiro.
• --stack web|qt|desktop: a tecnologia alvo onde a interface será construída.

Você também pode dizer apenas, em português, "quero modernizar o visual deste app", e o plugin entende.

Como ela funciona, passo a passo

Quando você aciona a skill, ela:

1. Interpreta o pedido: identifica o produto, o modo (redesign ou greenfield), o escopo e a tecnologia alvo, além de qualquer elemento fixo que não pode mudar (nome, ícone, marca).
2. Faz um briefing relâmpago só se faltar o essencial: pergunta de uma a três coisas críticas, sempre com opções concretas e uma recomendação, começando pela personalidade do produto (o tom, a "vibe"). Se o pedido já vier completo, ela pula a pergunta e parte para a produção.
3. No modo redesign, localiza as telas atuais e, quando útil, captura a tela de hoje para comparar antes e depois.
4. Entrega o trabalho ao agente visual-design-director, que pesquisa tendências com fontes, monta os mockups em HTML e CSS e os abre no seu navegador.
5. Conduz a iteração por seção: avança em etapas, com a sua aprovação visual a cada uma (a paleta de cores, depois a tipografia, a navegação, os componentes, as tabelas, os gráficos, os estados e, enfim, tela a tela).

O que você recebe no final

• Uma síntese da pesquisa, com as fontes citadas.
• Os mockups (telas de demonstração) em HTML, abertos no navegador, salvos e organizados num índice dentro da pasta docs/design/mockups/.
• Uma spec de design versionada na pasta docs/design/: os tokens (as peças reutilizáveis de cor, espaço e tipo) no modo claro e no escuro com os códigos exatos, a navegação, os componentes e uma página por tela, mais o escopo da primeira versão.
• Um plano de implementação em fases e a recomendação de entregar a construção ao agente frontend-engineer (o engenheiro de interface).

A regra de ouro: renderizar, não descrever

O ponto mais importante desta skill é que toda proposta visual vira uma tela de verdade aberta no navegador, nunca só uma descrição. "Imagine um azul moderno" não vale; você vê o azul na tela. O conteúdo é sempre o real do produto (nunca texto de enchimento), porque dados falsos escondem problemas de espaço e de organização. A personalidade do produto é decidida primeiro, porque ela orienta todo o resto. E dois cuidados são piso de qualidade desde o primeiro rascunho: a acessibilidade (contraste suficiente, cor nunca sozinha para dar significado) e o dark mode (o modo escuro, desenhado de propósito, não uma simples inversão de cores).

Quando NÃO usar (a skill delega a outro)

Esta skill é só para o visual renderizado. Para outras necessidades, o trabalho é de outro agente:

• Jornada do usuário, organização da informação, fluxo ou rascunho em texto: o ux-ui-designer.
• Identidade visual da marca, painel de referências (mood board) ou guia de estilo: o art-director.
• Os textos da interface (botões, mensagens): o ux-writer.
• A revisão profunda de acessibilidade: o accessibility-specialist.
• Construir a interface na tecnologia real: o frontend-engineer.

Integração com a equipe

Dentro da equipe montada pela /bigtech, o agente produz na fase de design sob o Capitolino (CPO), o diretor de produto, e alinha com o Caetano (CTO), o diretor de tecnologia, na hora de passar o design para a implementação. A própria /bigtech pode acionar este agente quando o tamanho do projeto pede design dedicado.

Relação com as outras skills

• A /bigtech monta a equipe e pode acionar este agente de design quando o porte do projeto pede.
• A /proj_software conduz a construção do software; o design feito aqui vira a base visual que o frontend implementa.

---

Veja também o agente que ela aciona: Diretor de Design Visual (visual-design-director), e os outros agentes de design ux-ui-designer e art-director. Voltar para a Home.