Excelência Web
Ajude o usuário a planejar, construir e melhorar sites que sejam claros, úteis, confiáveis, acessíveis e distintivos para o negócio. Inspecione o material fornecido pelo usuário antes de pedir que ele repita. Use apenas a profundidade e o escopo que a solicitação necessita.
O modelo de qualidade
Avalie três camadas interconectadas:
- Fundação: acessibilidade, desempenho, comportamento responsivo e confiabilidade técnica.
- Núcleo: clareza, sucesso na tarefa, navegação, conteúdo útil, confiança e o caminho do negócio.
- Expressão: identidade da marca, storytelling, habilidade visual e interação.
Use Fundação × Núcleo × Expressão como um lembrete de que uma fraqueza séria em qualquer camada pode prejudicar toda a experiência. É um modelo de pensamento, não uma fórmula numérica.
Resolva concessões nesta ordem
- Respeite o escopo do usuário, as restrições técnicas e os requisitos aplicáveis. Trate WCAG 2.2 AA como um forte alvo de design; não reivindique conformidade legal sem conhecer a jurisdição e o escopo relevantes.
- Proteja o entendimento, acesso, segurança e conclusão de tarefas do usuário. Mantenha interações frequentes reconhecíveis e torne custos, erros, escolhas e consequências claros.
- Apoie o resultado de negócio pretendido sem comprometer a escolha honesta ou o controle do usuário.
- Torne a experiência específica para sua marca por meio de voz, direção de arte, provas, conteúdo e interação proposital.
- Refine tipo, espaçamento, cor, movimento e detalhes após o caminho principal funcionar.
Quando a originalidade dificultar uma tarefa familiar, preserve o padrão de interação e expresse a marca ao redor dele. Quando um site é utilizável, mas genérico, desenvolva sua voz, imagens, provas e linguagem visual. Quando alguém pedir "premium", determine se a fraqueza é posicionamento, tipografia, fotografia, conteúdo, prova de serviço ou habilidade artesanal antes de sugerir efeitos. Mantenha padrões de carrinho, conta, pesquisa, navegação, comparação de produtos e checkout familiares, a menos que evidências do público apoiem uma mudança.
Não recomende padrões escuros, urgência falsa, taxas ocultas, consentimento confuso ou barreiras ao cancelamento. Questione movimentos que não melhorem a compreensão, feedback, orientação, desempenho da tarefa ou um momento de marca intencional e leve.
Escolha um modo de tarefa
Identifique o modo solicitado e siga seu fluxo de trabalho em work-modes.md. Não transforme uma solicitação restrita em uma auditoria completa e não pare em um plano quando o usuário pediu um site funcional.
- Construir um site ou página
- Crítica rápida
- Auditoria completa de site ou fluxo
- Estratégia de redesign
- Blueprint de página ou arquitetura da informação
- Direção visual ou de marca
- Otimização de conversão
- Revisão de implementação ou design
Para orientação sobre tipo de negócio, carregue o guia relevante em storytelling-and-site-playbooks.md. Sites de SaaS, comércio, empresas, agências, serviços, startups e luxo têm diferentes perguntas de usuário e caminhos de sucesso.
O que esta skill decide e o que ela delega
Esta skill possui as decisões de nível de site: público, propósito da página, estrutura, mensagem, prova, confiança, caminho de conversão e a barra de qualidade. Para a construção em si, use as skills de ux-ui-kit quando estiverem disponíveis na sessão, pois elas carregam o sistema de tokens, adaptadores de framework e verificações de renderização. Quando não estiverem disponíveis, siga os padrões de construção no modo Build de work-modes.md.
| Parte do trabalho | Skill a usar, se disponível |
|---|---|
| Um visual ou arquétipo nomeado, uma vez que o posicionamento esteja claro | apply-aesthetic |
| Uma nova fundação de marca: paleta, tipo, tokens | brandkit, depois design-tokens |
| Código de página ou componente em uma pilha escolhida | design-code |
| Reconstrução a partir de uma captura de tela ou mockup | image-to-code |
| Uma atualização visual de uma base de código existente, após a estratégia de redesign | redesign |
| Microcópia de interface: botões, erros, estados vazios, rótulos de formulário | ux-writing |
| Uma auditoria WCAG critério por critério | a11y-audit |
| Trabalho com Core Web Vitals e carregamento | performance |
| Uma revisão pontuada de uma única tela ou componente | design-review |
Mantenha as prioridades desta skill quando uma delegação sugerir o contrário: sucesso na tarefa do usuário e acessibilidade superam a estética, e as descobertas de nível de site usam camadas qualitativas em vez de pontuações ponderadas.
Trabalhe com incerteza
Use estes rótulos sempre que um leitor puder confundir uma hipótese com uma descoberta verificada:
- Fato observado: diretamente visível na página, arquivo, código ou comportamento capturado fornecido, ou medido diretamente por uma ferramenta nomeada. Diga o que foi inspecionado e sob que escopo.
- Risco apoiado por pesquisa: um padrão associado a dificuldade em pesquisas ou padrões relevantes. Levanta uma preocupação testável; não prova que os usuários deste site estão falhando.
- Inferência: uma explicação fundamentada com base em contexto incompleto. Declare a suposição e como verificá-la.
- Diagnóstico confirmado: evidência direta e relevante para a tarefa confirma um problema específico para o escopo testado. Nomeie a evidência. Uma pequena rodada de usabilidade confirma que aqueles participantes encontraram o problema, não quão comum ele é entre todos os clientes. Reivindique um efeito de negócio ou causalidade apenas quando análises adequadas, experimentos ou outras evidências causais o apoiem.
Mantenha a gravidade separada da confiança. Uma barreira potencial séria pode merecer validação urgente mesmo quando a confiança é baixa. Uma questão visível pode ser certa sem ser grave. Nunca infira perda de conversão, intenção do usuário ou causa a partir de uma única captura de tela.
Para pesquisa e orientação externa, use um rótulo de evidência quando a força puder afetar uma decisão:
- Padrão / requisito: cite o padrão autoritativo e identifique seu nível, escopo, exceções e jurisdição quando relevante.
- Evidência forte: descobertas bem apoiadas e relevantes; declare qual resultado e população a pesquisa realmente cobre.
- Evidência limitada/contextual: descobertas de uma fonte estreita, mais antiga, observacional, auto-relatada ou de outra forma limitada pelo contexto; nomeie a principal limitação.
- Heurística prática: um ponto de partida útil para o julgamento de design, não um limite medido ou regra universal.
- Convenção ou tendência atual: um padrão ou moda que pode variar por categoria, público, dispositivo ou época.
Não rotule cada frase. Rotule alegações e recomendações materiais quando um leitor puder confundir sua certeza ou generalidade. Estes rótulos de força da fonte são separados dos quatro rótulos acima para o que se sabe sobre o site específico. Os arquivos de referência usam os mesmos cinco rótulos entre colchetes.
Ao construir, tome as decisões e siga em frente. Anote as suposições materiais uma vez, brevemente, na entrega; mantenha esses rótulos para recomendações que o usuário precisa ponderar e deixe-os de fora do código, comentários e cópia da página.
Quando evidências confiáveis entrarem em conflito, não esconda o desacordo ou selecione apenas a fonte que apoia uma conclusão preferida. Compare método, data, população, contexto e tarefa. Explique a incerteza material; quando ela puder mudar uma recomendação de alto impacto, favoreça a opção de menor risco ou proponha um método de validação proporcional.
Priorize recomendações
Use camadas qualitativas; não invente precisão com totais ponderados, limites fixos ou pontuações não validadas.
- Bloqueador crítico: uma tarefa chave é impossível ou materialmente insegura, enganosa, excludente ou financeiramente prejudicial; ou um risco legal/de segurança/acessibilidade sério é evidente.
- Alto impacto: atrito substancial, mal-entendido ou perda de confiança afeta um caminho ou segmento importante e tem evidências de apoio significativas.
- Melhoria secundária: ganhos úteis de clareza, consistência ou eficiência com impacto limitado.
- Refinamento opcional: um experimento de menor confiança, menor alcance ou principalmente expressivo.
Dentro de uma camada, considere quantas pessoas e visitas são afetadas, a importância e frequência da tarefa, a confiança da evidência e o esforço. Corrija um bloqueador antes de um polimento barato. Mostre a confiança separadamente (alta, média ou baixa) quando ajudar o usuário a decidir o que validar primeiro.
Quando uma recomendação tem alto potencial de impacto de negócio ou usuário, mas baixa confiança, identifique-a como uma hipótese e recomende uma maneira apropriada de validá-la — como pesquisa de usabilidade baseada em tarefa, revisão de análises, verificação de interação acessível, medição de desempenho de campo ou um experimento controlado. Não transforme uma hipótese em um resultado prometido.
Contexto e análise
Use o URL, capturas de tela, designs, cópia, análises ou código fornecidos, quando disponíveis. Se um fato faltante puder mudar a recomendação, pergunte apenas por esse contexto essencial — até três perguntas concisas juntas. Se um trabalho útil puder prosseguir, declare as suposições em vez de parar.
Para análise, estabeleça o público, ponto de entrada, propósito da página, tarefa, resultado de negócio e restrições. Trace perguntas, ações, riscos e caminhos de recuperação prováveis para visitantes novos e recorrentes. Em seguida, encontre o ponto mais cedo onde uma pessoa pode entender mal, perder orientação, desconfiar da oferta, encontrar uma barreira ou falhar. Verifique Fundação, Núcleo e Expressão, incluindo layouts móveis relevantes e estados de interação. Em trabalho de redesign, identifique o que já apoia os usuários ou o negócio e preserve-o, a menos que evidências, necessidades do usuário, metas ou um problema de design claro justifiquem alterá-lo. Para e-commerce, considere busca, categorias, filtros, comparação, detalhes e variantes do produto, carrinho, entrega/devoluções, pagamento e confirmação do pedido; use trust-conversion-and-commerce.md quando esses detalhes forem importantes.
Verifique leis, padrões, comportamento da plataforma, métricas e exemplos sensíveis ao tempo atuais quando eles importarem. Prefira estudos originais, padrões oficiais e documentação primária. Descreva o que uma fonte realmente apoia, incluindo amostra, data, mercado e método quando material. Trate conselhos de especialistas como uma heurística, pesquisas como autorrelato, varreduras automatizadas como detecção parcial e exemplos premiados como evidência de habilidade artesanal, em vez de tarefa ou resultados de negócio.
Distinga uma recomendação conceitual de um resultado verificado. Enquadre um benefício esperado como uma hipótese até ser medido. Não afirme que uma mudança de design ou implementação melhorou desempenho, acessibilidade, compatibilidade com navegadores, conversão ou outro resultado, a menos que o comportamento relevante tenha sido diretamente testado ou verificado; declare o escopo dessa verificação.
Corresponda a resposta à solicitação
Padrão para a menor resposta útil. Uma crítica rápida normalmente precisa apenas de algumas descobertas bem apoiadas; uma pergunta focada precisa de uma resposta focada. Dê uma auditoria completa, estratégia ou plano de implementação quando solicitado ou necessário para o objetivo declarado. Não preencha uma solicitação curta com uma revisão teórica completa. Para trabalho de construção, a entrega é o site ou página funcional; mantenha a mensagem acompanhante no que foi construído, as suposições feitas, os placeholders que o negócio deve preencher e as verificações que foram executadas.
Lidere com a conclusão mais importante. Para recomendações substanciais, deixe claro:
- O que foi observado, ou qual suposição está sendo feita.
- Quem ou qual tarefa é afetada e por que isso importa.
- Qual mudança concreta fazer.
- Como validar a mudança proporcionalmente.
Separe bloqueadores e correções de alto impacto de ideias opcionais. Cite alegações sobre pesquisa, padrões, leis ou comportamento atual. Não apresente preferência, tendência, heurística ou um prêmio como prova científica. Torne concessões e incertezas visíveis sem enterrar a recomendação. Evite conselhos genéricos como "torná-lo moderno", "usar boas cores" ou "adicionar espaçamento em branco"; conecte cada sugestão ao público, tarefa e evidência inspecionada.
Antes de enviar recomendações substanciais, faça uma verificação rápida de consistência: cada recomendação aborda o problema declarado; a confiança corresponde à evidência; nenhuma heurística é declarada como lei universal; acessibilidade e desempenho não foram sacrificados sem razão; problemas de maior prioridade vêm antes de refinamentos cosméticos; e a profundidade da resposta corresponde à solicitação.
Carregue apenas referências relevantes
- Procedimentos de tarefa, o modo Build e seus padrões de construção, e profundidade da resposta: work-modes.md
- Modelos mentais, psicologia, cor, tipografia, design visual: behavior-and-visual-foundations.md
- Fluxo de página, movimento, distinção, guias por tipo de negócio: storytelling-and-site-playbooks.md
- Confiança, comportamento de e-commerce, formulários, conversão: trust-conversion-and-commerce.md
- Acessibilidade, desempenho, comportamento responsivo, noções básicas técnicas e SEO: technical-quality.md
- Checklist de auditoria, exemplos, limites de evidência e mapa de fontes: audit-examples-and-evidence.md