Pular para o conteúdo
Skillpedia
Marca48 mil · #4510

visual-emotion-engineer

Ajuda seu agente a definir o visual de um projeto. Ele escolhe cores, fontes e imagens para transmitir a emoção e a cultura certas, pensando em todos.

O que ela faz

Esta ferramenta ajuda a criar um guia visual para um projeto. Ela define como usar cores, fontes, imagens e a organização dos elementos para transmitir uma emoção específica, considerando o público e a cultura.

Quando usar

  • ✓Quando você quer que o visual de um site ou aplicativo transmita uma emoção (ex: calma, confiança).
  • ✓Ao criar materiais de marketing onde o design precisa convencer ou reforçar uma mensagem.
  • ✓Para garantir que o design seja acessível e inclusivo para todos os públicos.

Exemplo do que pedir para a IA

“Crie um guia visual para um aplicativo de meditação focado em transmitir calma e serenidade para jovens adultos.”

Quer saber mais? Abra as seções abaixo.

Como usar

O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.

Link da skill

https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/visual-emotion-engineer/SKILL.md

Mensagem pronta para colar

Use esta skill para me ajudar: https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/visual-emotion-engineer/SKILL.md Leia o arquivo SKILL.md desse link e siga as instruções dele na minha tarefa.
Como funciona

A ferramenta analisa o público-alvo e o objetivo emocional desejado. Em seguida, sugere cores, tipos de letra, estilo de imagens e como organizar os elementos para atingir esse objetivo, sempre pensando na acessibilidade.

Instalação

Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.

No terminal (Claude Code, Codex, Cursor), na pasta do projeto:

npx skills add sickn33/agentic-awesome-skills --skill visual-emotion-engineer

Ou baixe só o arquivo:

curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/visual-emotion-engineer/SKILL.md -o SKILL.md
Conteúdo técnico (SKILL.md)

Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.

Use a lente de planejamento de marketing e pesquisa de público. Sua tarefa é mapear cores, tipografia, espaçamento, estilo de imagem e padrões de layout para emoções específicas do público-alvo, grupos demográficos e metas de conversão.

Quando Usar

  • Use quando os visuais precisarem reforçar uma resposta emocional específica ou um sentimento de marca.
  • Use quando cor, imagem e composição devem apoiar a persuasão em vez de atuar como decoração.

Evidências e Escopo

Use pesquisa de público observada e fatos verificados do produto. Interpretações psicológicas e as referências autor-ano abaixo são contexto conceitual herdado, não evidências validadas para este fluxo de trabalho exato ou um efeito de conversão garantido. Antes de usar uma afirmação científica externamente, verifique a publicação real, o método e a aplicabilidade; omita afirmações sem suporte. Isso é planejamento de marketing, não diagnóstico clínico. Não infira traços sensíveis nem explore vulnerabilidades.

Contribuição original: PR 451 por MMEHDI0606; snapshot imutável da fonte. Isso identifica as instruções contribuídas, não validação científica ou um novo endosso upstream.

COLETA DE CONTEXTO

Antes de projetar visuais, estabeleça:

  1. O Humano-Alvo - perfil psicográfico, cultura e estado emocional.
  2. O Objetivo - a emoção ou ação que o sistema visual deve apoiar.
  3. O Resultado - briefing de psicologia visual para execução do design.
  4. Restrições - marca, acessibilidade, plataforma e ética.

Se o alvo emocional não estiver claro, pergunte antes de prosseguir.

FRAMEWORK PSICOLÓGICO: MAPEAMENTO VISUAL DE AROUSAL-VALENCE

Mecanismo

Sistemas visuais influenciam a atenção e o sentimento através de excitação (arousal), valência, familiaridade e carga cognitiva. Cor, escala, contraste e composição mudam o quão seguro, premium, energético ou calmo a experiência parece antes que o leitor processe as palavras (Bower et al., 2022; Song et al., 2024; Damiano et al., 2023; Liu et al., 2022; Li et al., 2024).

Passos de Execução

Passo 1 - Defina a emoção alvo Escolha o sentimento principal: calma, confiança, urgência, prestígio, calor ou excitação. Hipótese de planejamento (verificar antes de apresentar como pesquisa): o design visual funciona quando a emoção é explicitamente definida em vez de implícita (Bower et al., 2022).

Passo 2 - Mapeie a cor ao contexto Selecione cores por público, cultura e categoria, não por gosto pessoal. Hipótese de planejamento (verificar antes de apresentar como pesquisa): associações cor-emoção são reais, mas culturalmente variáveis (Song et al., 2024; Damiano et al., 2023).

Passo 3 - Defina a personalidade da tipografia Escolha tipos que correspondam ao registro emocional da marca e às necessidades de legibilidade. Hipótese de planejamento (verificar antes de apresentar como pesquisa): forma e brilho afetam a interpretação emocional e a atenção; o tipo deve apoiar, não lutar contra, a mensagem (Liu et al., 2022; pesquisa de estética visual).

Passo 4 - Controle o espaço em branco e a hierarquia Use espaçamento e layout para reduzir a carga e direcionar a atenção. Hipótese de planejamento (verificar antes de apresentar como pesquisa): hierarquia visual e carga cognitiva mudam o quão seguro e utilizável um design parece (Li et al., 2024; Bower et al., 2023).

Passo 5 - Escolha imagens intencionalmente Use imagens que reforcem o estado emocional e a identidade do público-alvo. Hipótese de planejamento (verificar antes de apresentar como pesquisa): pistas visuais e estilo artístico alteram a resposta emocional e o significado percebido (Damiano et al., 2023; Song et al., 2024).

MATRIZ DE DECISÃO

Variável: objetivo emocional

  • Se calma -> use ênfase visual contida, hierarquia clara e espaço em branco generoso, mantendo contraste acessível de texto/controle.
  • Se confiança -> use cor contida, estrutura transparente e imagens realistas.
  • Se urgência -> use maior contraste e pontos focais mais apertados.
  • Se prestígio -> use minimalismo, espaçamento controlado e pistas premium.
  • Se calor -> use tons mais suaves, imagens humanas e tipos acessíveis.

Variável: contexto cultural

  • Se global -> evite assumir que os significados das cores são universais.
  • Se local -> verifique associações regionais e normas de categoria.
  • Se misto -> prefira sinais conservadores e transculturais.

Variável: sofisticação do público

  • Se iniciante -> reduza a complexidade e o ruído visual.
  • Se especialista -> suporte escaneamento preciso e clareza de dados.

…

Perguntas frequentes

Por que a cultura é importante para o design visual?

Cores e imagens podem ter significados diferentes em culturas distintas. A ferramenta considera isso para evitar mal-entendidos e garantir que a mensagem seja bem recebida.

O que é 'hierarquia visual'?

É a forma como os elementos são organizados para guiar o olhar do usuário. A ferramenta sugere como usar o tamanho, cor e posição para destacar o que é mais importante.

Posso usar esta ferramenta para qualquer tipo de projeto?

Sim, ela é útil para qualquer projeto onde o design visual precise comunicar uma emoção ou objetivo específico, desde sites e aplicativos até materiais de marketing.

Detalhes

Descrição original do autor

Create a visual direction brief for color, typography, imagery, and hierarchy when design must support a defined emotion, culture, and accessibility needs.

repo: sickn33/agentic-awesome-skills

Popularidade

Estrelas no GitHub
48 mil
Posição no ranking
#4510
Licença
MIT
Atualizada em
15/10/2026

Essa skill é útil?

0

Entre para votar.

Comentários

  • …

Mais skills deste repositório

Skills parecidas