Expert em Design Web

Designer web especializado criando sistemas visuais distintivos para aplicações web.

Pontos de Decisão

Seleção de Abordagem de Layout

SE focado em conteúdo (blog, documentação, plataforma de aprendizado)
├─ Sistema de grid de 12 colunas
├─ Alta densidade de texto com hierarquia clara
└─ Margens consistentes para legibilidade

SE focado em marketing/conversão (landing page de SaaS, e-commerce)
├─ Design com hero-section primeiro
├─ Layouts assimétricos permitidos para drama
└─ Grandes espaços em branco para guiar a atenção

SE focado em e-commerce/catálogo pesado
├─ CSS Grid auto-fit para produtos
├─ Layouts baseados em cards
└─ Destaque para filtros e busca

SE interface de dashboard/aplicativo
├─ Sidebar + conteúdo principal
├─ Densidade de dados priorizada
└─ Navegação sempre acessível

SE estilo editorial/revista
├─ Sistemas de grid mistos
├─ Imagens grandes com citações em destaque
└─ Variedade visual acima de consistência

Estratégia de Paleta de Cores

SE público B2B/Empresarial
├─ Azul como primária (confiança, profissional)
├─ Paleta predominantemente neutra
└─ Cores de destaque mínimas

SE marca de Consumo/Estilo de Vida
├─ Primárias mais quentes (laranja, verde, roxo)
├─ Opções de destaque sazonais
└─ Escolhas orientadas por emoção

SE com alto tráfego/crítico para acessibilidade
├─ Contraste mínimo de 4,5:1 obrigatório
├─ Combinações testadas para daltonismo
└─ Variantes de modo escuro necessárias

Árvore de Decisão de Hierarquia Visual

SE objetivo do usuário = ação imediata (cadastro, compra)
├─ CTA do hero acima da dobra (obrigatório)
├─ Única ação primária por página
└─ Peso visual em elementos de conversão

SE objetivo do usuário = consumo de conteúdo
├─ Pré-visualização/resumo do conteúdo primeiro
├─ Múltiplos caminhos de engajamento permitidos
└─ Experiência de leitura otimizada

SE objetivo do usuário = exploração (portfólio, catálogo)
├─ Layout de grid/galeria como principal
├─ Otimizado para escaneamento rápido
└─ Fluxo miniatura → detalhes

Modos de Falha

Síndrome do Design por Comitê

Sintomas: Múltiplos estilos visuais na mesma página, mensagens de marca conflitantes, nenhum sistema de design claro
Regra de Detecção: Se você vir 3+ estilos de botão ou famílias de fonte diferentes em uma página
Correção: Estabelecer documento de princípios de design, impor fonte única de verdade, obter aprovação das partes interessadas sobre restrições

Decoração Sobre Função

Sintomas: Animações sem propósito, elementos visuais que não auxiliam na compreensão, carregamento lento devido a gráficos
Regra de Detecção: Se você não consegue explicar como cada elemento visual ajuda o usuário a alcançar seu objetivo
Correção: Remover elementos que não servem às necessidades do usuário, justificar cada animação com benefício para o usuário

Padrão Mobile como Depois

Sintomas: Rolagem horizontal no mobile, alvos de toque minúsculos, navegação de desktop em telas pequenas
Regra de Detecção: Se a versão mobile requer zoom ou rolagem horizontal para usar
Correção: Começar mobile-first, testar em dispositivos reais, garantir alvos de toque mínimos de 44px

Falha de Acessibilidade por Baixo Contraste

Sintomas: Texto cinza claro (#999) sobre branco, baixa legibilidade sob luz solar, reclamações de usuários sobre visibilidade do texto
Regra de Detecção: Se qualquer texto falhar na taxa de contraste WCAG 4,5:1 ao ser testado
Correção: Usar ferramentas de verificação de contraste, testar em condições de luz intensa, fornecer opção de modo de alto contraste

Colapso de Arquitetura da Informação

Sintomas: Usuários não conseguem encontrar o conteúdo principal, navegação não corresponde a modelos mentais, altas taxas de rejeição
Regra de Detecção: Se os usuários não conseguem completar a tarefa principal em 3 cliques ou 30 segundos
Correção: Mapeamento de jornada do usuário, card sorting para navegação, destaque para ações principais

Exemplos Trabalhados

Exemplo 1: Redesenho de Dashboard SaaS

Contexto: Plataforma de análise B2B, usuários passam 2+ horas diárias na interface

Processo de Decisão:

Análise de Público: Usuários avançados que valorizam eficiência acima de estética
Escolha de Layout: Navegação por sidebar (sempre acessível) + área de conteúdo principal
Estratégia de Cores: Azul primário (#2563eb) para confiança, destaque mínimo para reduzir carga cognitiva
Hierarquia: Tabelas de dados têm mais espaço, ações são secundárias mas acessíveis

Principais Decisões de Design:

Exibição densa de informações (escala de espaçamento de 8px)
Texto de alto contraste (#1f2937 sobre #ffffff)
Tamanho consistente de botões (40px de altura para clique fácil)
Indicadores de status usam cores semânticas (verde=ok, vermelho=alerta)

Validação de Resultados:

Conclusão de tarefas melhorou 23%
"Facilidade de uso" relatada pelos usuários aumentou
Tickets de suporte sobre navegação diminuíram 40%

Exemplo 2: Página de Produto de E-commerce

Contexto: Varejista de moda, público mobile-first (70% de tráfego mobile)

Processo de Decisão:

Padrão de Tráfego: Navegadores mobile, tomadores de decisão rápidos
Escolha de Layout: Coluna única no mobile, duas colunas no desktop
Prioridade Visual: Imagens do produto > preço > avaliações > especificações
Elementos de Conversão: "Adicionar ao carrinho" fixo no mobile, proeminente mas não insistente

Principais Decisões de Design:

Imagem principal do produto preenche a largura da tela no mobile
Preço em tipografia grande e em negrito imediatamente visível
Resumo de avaliações acima dos detalhes do produto
Seletores de tamanho/cor com feedback visual imediato

Abordagem Iniciante vs Especialista:

Iniciante faria: Colocar todas as informações do produto acima da dobra, usar imagens pequenas do produto
Especialista percebe: Usuários precisam de imagens grandes para avaliar moda, público consciente de preço precisa de validação de avaliações cedo

Resultados Mensuráveis:

Taxa de conversão mobile aumentou 31%
Duração média da sessão aumentou (usuários explorando mais produtos)
Abandono de carrinho diminuiu 18%

Portões de Qualidade

Validando um Plano de Design

Declare a conformidade do design com os Portões de Qualidade como um plano estruturado (veja schemas/design-plan.schema.json) e verifique-o deterministicamente em vez de inspecionar visualmente um mockup:

node scripts/design_audit.mjs --input plan.json

O auditor retorna { pass, score, findings, recommendations } e sinaliza os cinco modos de falha acima por nome: design-by-committee (muitos estilos de botão/pesos de fonte/tamanhos), decoration-over-function, mobile-afterthought (rolagem horizontal em 320px ou alvos de toque abaixo de 44px), low-contrast (abaixo de 4,5:1) e information-architecture collapse (navegação que não corresponde ao modelo mental do usuário). Veja examples/expected-output.md para uma execução aprovada e outra reprovada lado a lado.

Referências

Arquivo	Carregar Quando
`references/layout-systems.md`	Precisar da árvore de decisão de grid, escala de espaçamento de 8px, breakpoints responsivos ou listas de verificação mobile-first/consistência.
`references/color-accessibility.md`	Precisar da paleta mínima viável, tabela de psicologia das cores, orientação de modo escuro ou lista de verificação WCAG 2.1 AA.
`references/tooling-integration.md`	Precisar usar ferramentas 21st.dev ou Figma MCP para ir da direção de design ao código.
`templates/output-template.md`	Precisar de um modelo de plano de design reutilizável para preencher antes de auditar.
`examples/expected-output.md`	Precisar da forma de uma auditoria de plano de design finalizada, tanto aprovada quanto reprovada.
`schemas/design-plan.schema.json`	Precisar validar a estrutura de um plano de design programaticamente.
`scripts/design_audit.mjs`	Precisar de pontuação determinística de um plano de design contra os Portões de Qualidade e modos de falha nomeados.
`agents/openai.yaml`	Precisar de um descritor de subagente para geração delegada de plano de design.

Limites de NÃO USO

NÃO use esta skill para:

Decisões profundas de tipografia (cálculos de entrelinha, espaçamento entre caracteres) → use typography-expert
Matemática de teoria das cores ou geração de paletas → use color-theory-palette-harmony-expert
Arquitetura de tokens de sistema de design ou variáveis CSS → use design-system-creator
Estilos de design retrô ou históricos → use windows-3-1-web-designer
Design de interface de aplicativo mobile nativo → delegue a native-app-designer
Auditorias detalhadas de acessibilidade → use accessibility-expert
Especificações de animação e micro-interações → use motion-design-expert

Indicadores de limite:

Se usuário pedir recomendações específicas de pares de fontes → typography-expert
Se usuário precisar de cálculos HSL de cores → color-theory-expert
Se usuário quiser conselhos de arquitetura CSS → design-system-creator
Se usuário precisar de lista de verificação WCAG → accessibility-expert

Portão de Garantia de Layout (mecânico — execute antes de enviar)

Antes de considerar qualquer página renderizada, artefato, dashboard, deck ou componente como finalizado, execute o verificador mecânico de overflow/colisão. Ele renderiza a página headlessly e sinaliza colisões texto-com-texto, elementos truncados/clipados, texto escapando do container e rolagem horizontal da página — os defeitos visuais que uma captura de tela esconde e que só aparecem em uma largura específica ou em um tema.

Resolva layout-overflow-guard do catálogo de skills ativo antes de executá-lo. O comando abaixo mostra o caminho de instalação padrão do Claude; use o caminho relatado pelo seu harness. Se a skill estiver ausente, instale ou sincronize-a em vez de pular este portão.

python3 ~/.claude/skills/layout-overflow-guard/scripts/check_layout.py <arquivo-ou-url> \
  --widths 1280,1100,860,720,390 --themes light,dark

Você não precisa ler check_layout.py — invoque-o com a ferramenta Bash e aja com base em seu relatório e código de saída (diferente de zero = um defeito). O código-fonte do script nunca entra no seu contexto; apenas seus resultados o fazem. Reduza a zero as violações em cada largura e ambos os temas antes de enviar. Detalhes completos: a skill layout-overflow-guard.

Índice do Pacote de Skills

Cada arquivo nesta skill e quando abri-lo. Gerado automaticamente; execute scripts/index_references.py --fix.

root

CHANGELOG.md — Changelog — Todas as mudanças notáveis na skill web-design-expert serão documentadas neste arquivo.
README.md — Web Design Expert — Cria sistemas visuais web únicos: identidade visual, paletas de cores, composição de layout e padrões responsivos de UI para aplicações web.

agents/

agents/openai.yaml — openai (data/schema)

examples/

examples/expected-output.md — Saída de Exemplo: Auditoria de Plano de Design Web — Cenário: o redesign de um site de marketing SaaS foi especificado como um plano de design estruturado (correspondendo a schemas/design-plan.schema.json) e está sendo
examples/sample-input.json — entrada de exemplo (data/schema)

references/

references/color-accessibility.md — Cor & Acessibilidade — Paletas de cores, psicologia, modo escuro e conformidade WCAG.
references/layout-systems.md — Sistemas de Layout — Sistemas de grid, escalas de espaçamento e composição de layout.
references/tooling-integration.md — Integração de Ferramentas de Design — 21st.dev, Figma MCP e fluxos de trabalho de componentes.

schemas/

schemas/design-plan.schema.json — schema do plano de design (data/schema)

scripts/

scripts/design_audit.mjs

templates/

templates/output-template.md — Modelo de Plano de Design Web — [Descrição de uma frase do produto/página que este plano de design cobre.] Notas de campo: - primaryActionObviousWithin3s — verdadeiro apenas se um usuário novo

curiositech/port-daddy

O que é port-daddy?

Perguntar na sua IA favorita

Documentação