Refinamento de Interface
Elevar sistematicamente a qualidade visual de uma interface existente identificando problemas de hierarquia, layout, tipografia e cor, e entregando um plano de refinamento priorizado por impacto pronto para execução.
Quando
faz sentido.
- Quando uma interface funcional precisa passar por revisão de qualidade visual antes de ir para produção.
- Quando o resultado de um sprint de desenvolvimento parece tecnicamente correto mas visualmente fraco.
- Quando o produto está crescendo e a interface acumulou inconsistências ao longo de ciclos de desenvolvimento.
- Quando um designer ou tech lead precisa priorizar intervenções de design com base em impacto, não em preferência pessoal.
- Quando há a sensação de "falta de qualidade" sem conseguir nomear o problema com precisão.
- Para criar uma interface do zero — use design-de-componente-de-interface em vez disso.
- Quando o problema identificado é exclusivamente de acessibilidade técnica — use revisao-de-acessibilidade-e-resiliencia.
- Quando a interface não existe ainda ou está em wireframe — o workflow pressupõe uma interface funcional para analisar.
- Para avaliação de fluxo de usuário ou arquitetura de informação de produto — use otimizacao-de-fluxo-critico.
Pré
requisitos.
- 01[ ] A interface existe e está acessível para análise (URL, capturas de tela, código ou design file).
- 02[ ] O responsável pelo refinamento tem contexto mínimo sobre o produto: para quem é, o que faz, qual o tom esperado.
- 03[ ] As etapas serão executadas em sequência — cada avaliação específica depende do diagnóstico geral da Etapa 2.
- 04[ ] O resultado do workflow será revisado por um humano antes de qualquer intervenção na interface.
Caminho
crítico.
As etapas devem ser executadas em ordem. Cada uma carrega uma skill específica.
- 01
Coleta de Contexto de Design
Estabelecer o contexto mínimo necessário para que as avaliações seguintes sejam feitas com critérios corretos — e não com padrões genéricos desvinculados do produto real.
Skillcoleta-de-contexto-de-design·Saída- Ficha de contexto de design: público-alvo, casos de uso, tom de marca, referências e restrições. - Critérios de qualidade verificáveis para hierarquia/layout, tipografia e cor. - 02
Diagnóstico Visual de Interface
Fazer uma leitura holística da interface para identificar os 3 a 5 maiores problemas de qualidade visual, sem entrar ainda em análise dimensional. Essa etapa define o foco e a prioridade relativa das avaliações seguintes.
Skilldiagnostico-visual-de-interface·Saída- Lista de 3 a 5 problemas visuais principais com nome, localização, dimensão afetada e impacto. - Prioridade relativa entre as três dimensões para orientar as etapas seguintes. - Registro de pontos positivos da interface que devem ser preservados. - 03
Avaliação de Hierarquia e Layout
Analisar exclusivamente a estrutura de layout, espaçamento e ritmo visual da interface — diagnosticando se o espaço está sendo usado como ferramenta de comunicação de hierarquia ou apenas como preenchimento.
Skillavaliacao-de-hierarquia-e-layout·Saída- Relatório de avaliação com problemas identificados, severidade e localização. - Confirmação explícita quando uma subdimensão estiver adequada. - 04
Avaliação de Tipografia
Analisar exclusivamente o sistema tipográfico da interface — identificando problemas de escolha de fonte, escala hierárquica, legibilidade e consistência que degradam a qualidade percebida.
Skillavaliacao-de-tipografia·Saída- Relatório de avaliação tipográfica com problemas, severidade e elemento afetado. - Indicação de quais ajustes têm maior impacto na percepção de qualidade. - 05
Avaliação de Cor e Identidade Visual
Analisar exclusivamente o uso de cor na interface — identificando problemas de coerência de paleta, uso semântico, contraste, acessibilidade e alinhamento com a identidade visual esperada do produto.
Skillavaliacao-de-cor-e-identidade-visual·Saída- Relatório de avaliação de cor com problemas, severidade, elemento afetado e critério violado. - Avaliação do alinhamento entre paleta em uso e identidade visual esperada. - 06
Síntese do Plano de Refinamento
Consolidar os achados das três avaliações em um plano de refinamento único, priorizado por impacto, com intervenções concretas, ordem de execução recomendada e critérios de aceitação mensuráveis para cada intervenção.
Skillsintese-do-plano-de-refinamento·Saída- Plano de refinamento priorizado em três camadas com intervenções concretas e critérios de aceitação. - Ordem de execução recomendada com justificativa de priorização. - Sumário executivo: 3 maiores problemas e impacto esperado do refinamento.
Onde
ele vive.
Como usar
com IA.
- 01Copie o prompt abaixo (ou use o botão no topo).
- 02Abra o Claude ou Claude Code no diretório do projeto.
- 03Cole o prompt e siga a ordem das etapas. O agente conduz cada skill em sequência.
> Execute o workflow 'Refinamento de Interface' seguindo a ordem crítica das etapas. Para cada etapa, carregue a skill correspondente e siga suas instruções. Pergunte se faltar contexto.