Alfabetismo Visual: Ensinando IA a Enxergar como um Designer
A IA não precisa apenas de instruções. Ela precisa de modelos ensináveis de expertise humana.
O Que Isto É
Alfabetismo Visual é uma estrutura de raciocínio — não um modelo de prompt, não um guia de formatação, não uma utilidade CSS. Ela ensina a IA a tomar decisões de design visual modelando como os humanos percebem informações.
O problema que resolve: A IA pode gerar um layout. Mas não pode dizer se o layout funciona. Ela não percebe hierarquia plana, ritmo quebrado, ênfase conflitante ou sobrecarga cognitiva. Esta estrutura dá a ela essas percepções como princípios explícitos de raciocínio.
Isto Aumenta o Julgamento Humano. Não o Substitui.
O Alfabetismo Visual ensina a IA a raciocinar sobre design para que humanos possam tomar melhores decisões mais rapidamente — não para que a IA tome decisões sozinha.
O objetivo é uma colaboração:
- A IA fornece análise estruturada, raciocínio perceptivo e estruturas de diagnóstico
- Humanos fornecem intenção, gosto, contexto, conhecimento do público e julgamento final
Uma IA que pode avaliar um design de 0 a 5 em oito dimensões é útil. Uma IA que substitui a escolha informada de um designer porque obteve uma pontuação menor em uma rubrica não é.
Use esta estrutura para aprimorar seu pensamento, não para terceirizá-lo.
A Premissa
A IA não possui intuição visual. Ela não pode reconhecer instantaneamente quando uma página parece equilibrada, lotada, inacabada, confusa ou elegante. Essa intuição deve ser traduzida em princípios explícitos de raciocínio.
Ensinar alfabetismo visual à IA significa ensiná-la não apenas como formatar informações, mas como os humanos percebem informações.
A mudança é de formatação para percepção.
O Princípio Central
Toda decisão visual deve ser explicável em termos de como um humano perceberá e processará a informação.
Se você não consegue explicar por que uma escolha visual ajuda um humano a entender, é decoração. Se você consegue explicar em termos de cognição, é design.
Início Rápido
1. Copie a habilidade para seu projeto
# Clone o repositório
git clone https://github.com/amberhoward/visual-literacy.git
# Copie para o diretório de habilidades do seu projeto
cp -r visual-literacy/.opencode/skills/visual-literacy ./seu-projeto/.opencode/skills/
2. Diga à sua IA para usá-la
Em seu prompt ou mensagem de sistema:
Use a habilidade de alfabetismo visual para avaliar e raciocinar sobre o design deste documento.
3. Veja a diferença
Antes (instrução de formatação):
"Deixe os títulos maiores e adicione mais espaço em branco."
Depois (raciocínio perceptivo):
"A hierarquia visual é insuficiente — o leitor não consegue escanear e identificar a estrutura da informação. O espaçamento entre seções não relacionadas não as diferencia do espaçamento dentro das seções. Aumente o contraste título-corpo. Use espaçamento entre seções de 2 a 3 vezes o espaçamento intra-seção para sinalizar distância conceitual."
Quando Usar Esta Habilidade
Use esta habilidade quando:
- Criando qualquer documento, relatório ou apresentação
- Projetando interfaces ou layouts
- Avaliando ou criticando designs existentes
- Tomando decisões sobre espaçamento, hierarquia, agrupamento ou ênfase
- Traduzindo uma instrução de formatação em uma decisão perceptiva
- Depurando por que algo "parece errado" mas você não consegue nomear o motivo
- Conduzindo uma revisão de design ou auditoria de UX
Os Três Modos
Modo 1: Design (Proativo)
Ao criar algo novo, raciocine sobre as decisões visuais usando as heurísticas antes de produzir a saída. Não espere ser perguntado por que escolheu um layout específico.
Como usar: Peça à IA para percorrer seu raciocínio visual antes de gerar o design:
Antes de projetar esta página, percorra seu raciocínio perceptivo:
1. Qual é a estrutura da informação?
2. Como um humano perceberá isso?
3. Qual carga cognitiva estou colocando no leitor?
4. A estrutura visual comunica a intenção?
Em seguida, gere o design com base nesse raciocínio.
Modo 2: Crítica (Avaliativo)
Ao revisar trabalhos existentes, diagnostique problemas usando a estrutura perceptiva. Nomeie o que está errado, por que está errado e qual princípio cognitivo está sendo violado.
Como usar: Forneça uma captura de tela, código ou descrição e peça uma crítica estruturada:
Usando a rubrica de avaliação de alfabetismo visual, critique este design.
Pontue cada dimensão de 0 a 5, identifique níveis de gravidade e forneça
recomendações específicas de correção com justificativa perceptiva.
Modo 3: Traduzir (Instrucional)
Quando receber uma instrução de formatação, traduza-a para a intenção perceptiva por trás dela. Em seguida, execute o objetivo perceptivo, não a instrução literal.
Como usar: Dê uma instrução de formatação e peça a tradução:
Quero "adicionar mais espaço em branco a esta página." Usando o
guia de tradução de formatação para percepção, explique a intenção
perceptiva por trás desta instrução e execute-a corretamente.
Processo de Raciocínio Perceptivo
Antes de tomar qualquer decisão visual, percorra esta sequência:
1. Qual é a estrutura da informação?
- Qual é o conteúdo primário?
- Qual é a hierarquia de importância?
- O que se agrupa logicamente?
- O que deve ser lido em sequência vs. o que pode ser escaneado?
2. Como um humano perceberá isso?
- Para onde o olho irá primeiro? Esse é o lugar certo?
- O leitor pode escanear e encontrar o que precisa em menos de 5 segundos?
- Conceitos relacionados estão visualmente conectados?
- Há um caminho claro através do conteúdo?
3. Qual carga cognitiva estou colocando no leitor?
- Quantas decisões o leitor deve tomar em cada ponto?
- Estou pedindo que ele mantenha informações na memória de trabalho?
- Ele consegue retomar facilmente se for interrompido?
- A densidade é apropriada para o tipo de conteúdo?
4. A estrutura visual comunica a intenção?
- Cada elemento merece seu espaço?
- O espaçamento comunica relacionamento ou acidente?
- Padrões se repetem com propósito ou inconsistência?
- A página parece completa, não abandonada?
A Estrutura Heurística
Oito categorias, 24 heurísticas, um sistema de prioridade.
| Categoria | Contagem | Pergunta Central |
|---|---|---|
| Hierarquia | 3 | O olho sabe para onde olhar primeiro? |
| Agrupamento | 3 | Itens relacionados estão visualmente conectados? |
| Ritmo | 3 | O leitor consegue formar expectativas? |
| Ênfase | 3 | A informação importante se destaca? |
| Equilíbrio | 2 | O peso visual é distribuído intencionalmente? |
| Completude | 3 | A página parece resolvida? |
| Fluxo | 3 | Há um caminho claro através do conteúdo? |
| Moderação | 3 | Cada elemento merece seu espaço? |
Consulte references/design-heuristics.md para o catálogo completo com justificativa perceptiva, violações e métodos de diagnóstico.
Ordem de prioridade quando heurísticas entram em conflito:
- Hierarquia — o leitor deve saber o que é mais importante
- Agrupamento — o leitor deve saber o que pertence junto
- Fluxo — o leitor deve saber para onde ir em seguida
- Ênfase — o leitor deve saber o que é mais importante
- Ritmo — o leitor deve ser capaz de formar expectativas
- Equilíbrio — o layout deve parecer estável
- Completude — a página deve parecer resolvida
- Moderação — cada elemento deve merecer seu lugar
Princípios Perceptivos
A base da ciência cognitiva. Não são regras de design — são fatos sobre como o cérebro humano processa informações visuais.
| Princípio | O Que Explica |
|---|---|
| Gestalt (Proximidade, Similaridade, Fechamento, Continuidade, Figura-Fundo, Região Comum) | Como o cérebro agrupa informações automaticamente |
| Memória de Trabalho (7±2 de Miller, Chunking Cognitivo) | Quanto o cérebro pode processar de uma vez |
| Processamento Pré-Atentivo | O que o cérebro vê antes do pensamento consciente |
| Padrões de Leitura (Padrão-F, Padrão-Z, Diagrama de Gutenberg) | Como o olho se move por uma página |
| Sinal-Ruído | O que o cérebro deve filtrar |
| Divulgação Progressiva | Como o cérebro constrói entendimento em camadas |
| Consistência | Como o cérebro forma e usa previsões |
| Aforância | Como a forma visual comunica função |
Consulte references/perceptual-principles.md para a base completa.
Rubrica de Avaliação
Pontue qualquer design de 0 a 5 em 8 dimensões. Total: /40.
| Dimensão | O Que Mede |
|---|---|
| Hierarquia (0-5) | O leitor consegue identificar a importância sem ler? |
| Agrupamento (0-5) | As associações entre grupos são inequívocas? |
| Ritmo (0-5) | O leitor consegue formar expectativas sobre o layout? |
| Ênfase (0-5) | A atenção do leitor vai para o lugar certo? |
| Fluxo (0-5) | O olho se move pelo conteúdo naturalmente? |
| Equilíbrio (0-5) | O peso visual é distribuído intencionalmente? |
| Completude (0-5) | A página parece resolvida? |
| Moderação (0-5) | Cada elemento merece seu espaço? |
| Pontuação Total | Classificação |
|---|---|
| 0-10 | Crítico — grande reformulação necessária |
| 11-18 | Problemas significativos — múltiplas dimensões precisam de trabalho |
| 19-25 | Funcional — melhorias específicas necessárias |
| 26-32 | Bom — pronto para produção com polimento |
| 33-38 | Excelente — apenas pequenos refinamentos possíveis |
| 39-40 | Excepcional — ensine isso como exemplo |
Consulte references/evaluation-rubric.md para orientação de pontuação, classificação de gravidade (P0-P3) e recomendações de correção.
Resolvendo Conflitos
Quando heurísticas puxam em direções opostas:
| Conflito | Resolução |
|---|---|
| Hierarquia vs. Minimalismo | Minimalismo significa poucos tratamentos, não nenhum tratamento. Crie máxima hierarquia com mínimos meios. |
| Completude vs. Espaço em Branco | Completude vem da estrutura, não da densidade. 60% de conteúdo / 40% de espaço em branco pode parecer completo. |
| Consistência vs. Ênfase | Consistência é o padrão. Ênfase é a exceção. Quebre-a deliberadamente, com moderação, significativamente. |
| Densidade vs. Descanso | Alterne seções densas e esparsas. Forneça âncoras de varredura para pausas. |
| Convenção vs. Diferenciação | Siga convenções para estrutura. Diferencie através do conteúdo e tratamento sutil. |
Consulte references/heuristic-conflicts.md para a estrutura completa de resolução.
Traduzindo Formatação para Percepção
| Instrução | Intenção Perceptiva |
|---|---|
| "Adicione mais espaço em branco" | A distância visual não reflete as relações conceituais. |
| "Deixe os títulos maiores" | A hierarquia é insuficiente para varredura. |
| "Divida o parágrafo" | O bloco visual excede os limites da memória de trabalho. |
| "Faça com que se destaque" | O elemento precisa de mais ênfase relativa à sua importância. |
| "Simplifique isso" | A carga cognitiva é muito alta para o tipo de conteúdo. |
| "Torne mais profissional" | Os sinais visuais não correspondem ao nível de autoridade do conteúdo. |
Consulte references/formatting-to-perception.md para o dicionário completo de tradução.
A Arquitetura
Esta habilidade segue uma arquitetura de raciocínio de seis camadas:
Modelo Mental → Como especialistas percebem este domínio
↓
Princípios Perceptivos → A ciência cognitiva que explica por quê
↓
Heurísticas → Regras práticas
↓
Resolução de Conflitos → O que fazer quando as regras contradizem
↓
Rubrica de Avaliação → Pontuação estruturada para qualidade
↓
Camada de Tradução → Converter instruções ingênuas em raciocínio de especialista
Esta arquitetura é independente de domínio. O alfabetismo visual é a primeira aplicação. As mesmas seis camadas poderiam ensinar cognição especializada em IA em arquitetura, medicina, educação, liderança ou qualquer campo onde a expertise tácita resiste à articulação.
Requisitos de Saída
Ao usar esta habilidade, sempre:
- Nomeie o princípio perceptivo por trás de cada decisão visual
- Explique o efeito cognitivo das escolhas de layout
- Diagnostique problemas em termos de princípios violados, não preferências estéticas
- Pontue designs usando a rubrica de avaliação ao criticar
- Traduza instruções de formatação para percepção quando for solicitado a implementar feedback
Antipadrões
Nunca:
- Escolha um layout porque "parece profissional" sem explicar por que
- Adicione elementos decorativos que não servem à compreensão
- Trate espaçamento, tipografia ou cor como escolhas estéticas arbitrárias
- Pule a etapa de raciocínio porque "parece certo"
- Aplique heurísticas mecanicamente sem considerar o conteúdo específico
O Teste de Fogo
Após produzir qualquer design visual, pergunte:
"Consigo explicar cada decisão de espaçamento, cada escolha de tipo, cada agrupamento e cada ênfase em termos de como um humano perceberá e processará esta informação?"
Se sim, o design é fundamentado. Se não, é decoração.