web-design-reviewerpor GitHub

Web Design Reviewer Skill.

Uma skill do Claude Code e Codex para revisão de design: inspeciona visualmente um site em execução e localiza e corrige problemas de layout.

Design Review & Accessibility
Relatório de revisão

Baixar OpenDesign Ver guia de uso

github/awesome-copilot · skills/web-design-reviewer/SKILL.mdSKILL.md

--- name: web-design-reviewer description: This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level. --- ## Scope of Application ## Prerequisites ## Step 1: Information Gathering Phase ## Step 2: Visual Inspection Phase ## Step 3: Issue Fixing Phase ## Step 4: Re-verification Phase

Metadados iniciais e cabeçalhos de seção lidos do arquivo original em 14/09/2026 · 10.577 caracteres no total

01 O que faz

O Que a Skill web-design-reviewer Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

O Web Design Reviewer conduz um site em execução por meio de uma ferramenta de automação de navegador, inspeciona-o visualmente e corrige o que encontra no código-fonte. Ele abrange sites estáticos, SPAs em React, Vue, Angular ou Svelte, frameworks full-stack como Next.js e Nuxt, plataformas de CMS como WordPress e Drupal, e qualquer outra aplicação web.

O workflow tem quatro fases: reunir contexto e detectar automaticamente o framework e o método de estilo, inspecionar as páginas segundo uma checklist visual, corrigir problemas priorizados de P1 a P3, e então reverificar e repetir o ciclo. As descobertas são agrupadas em layout, responsividade, acessibilidade e consistência visual, cada uma com uma severidade. As correções seguem princípios de mudança mínima e terminam em um relatório de revisão em markdown.

O que ele produz

Um relatório de resultados de revisão em markdown intitulado Web Design Review Results.
Uma tabela de resumo abrangendo URL de destino, framework detectado, estilo, viewports testados, problemas detectados e problemas corrigidos.
Entradas por problema, contendo prioridade, página, elemento, descrição, caminho do arquivo corrigido, detalhes da correção e capturas de tela antes/depois.
Uma seção de problemas não corrigidos, indicando o motivo pelo qual cada problema foi deixado de lado e uma ação recomendada para o usuário, além de recomendações gerais.

Veja o exemplo de prompt ↗

Como funciona

01
Reunir Contexto e Detectar a Stack
Ele pede a URL caso nenhuma seja fornecida, depois tenta a detecção automática a partir de arquivos do workspace, como package.json, tsconfig.json, tailwind.config, next.config, vite.config e nuxt.config, e pergunta quais páginas estão no escopo.
02
Navegar e Capturar
Ele abre a URL de destino, captura screenshots, recupera a estrutura do DOM ou um snapshot quando possível, e percorre outras páginas por meio da navegação do site.
03
Inspecionar Segundo a Checklist Visual
Problemas de layout, responsividade, acessibilidade e consistência visual são verificados percorrendo uma checklist de referência, que é usada novamente após as correções.
04
Localize a Origem de Cada Problema
Elementos problemáticos são rastreados até a origem pesquisando o codebase por nomes de classe ou IDs, encontrando o componente a partir do texto ou da estrutura do elemento, e filtrando padrões de arquivos de estilo, componente e página.
05
Corrija, Depois Reverifique
As correções são aplicadas seguindo orientações específicas do framework, então o navegador é recarregado ou aguarda-se o HMR do dev server, as áreas corrigidas são capturadas novamente em screenshot, e o antes e o depois são comparados.

02 Encontre o ideal para você

Quando Usar a Skill web-design-reviewer

Use a skill web-design-reviewer no Claude Code ou Codex quando o trabalho for revisão de design deste tipo. Adequação e limites abaixo são extraídos do próprio arquivo da skill.

Boa Combinação

Revisando um site estático construído com HTML, CSS e JS puros.
Revisando uma aplicação de página única em React, Vue, Angular ou Svelte.
Revisando uma aplicação de framework full-stack como Next.js, Nuxt ou SvelteKit.
Revisando um site baseado em CMS, como uma instalação de WordPress ou Drupal.
Verificando um servidor de desenvolvimento local rodando em algo como http://localhost:3000 durante o desenvolvimento.

Conheça os Limites

Ambientes de produção são suportados apenas para revisões somente leitura, portanto alterações não podem ser aplicadas ali.
As correções exigem que o código-fonte do projeto exista dentro do workspace, então um site remoto sem código local não pode ser reparado.
Refatoração em larga escala sem confirmação do usuário é explicitamente listada como algo a não fazer.
Correções que ignoram desempenho são listadas como um anti-padrão.

O Que Fornecer

A URL do site a revisarÉ obrigatória para a navegação; se o usuário não a fornecer, a skill a solicita, com http://localhost:3000 como exemplo de formato.
Framework e localização dos estilosA skill pergunta qual framework e método de estilização são usados e onde ficam os arquivos de estilo e componentes, para poder encontrar o alvo correto de edição.
Escopo da revisãoO usuário informa se a revisão cobre apenas páginas específicas ou o site inteiro.

03 Dentro da skill

Regras que a Skill web-design-reviewer Dá ao Claude Code e Codex

8 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Pare Após Três Tentativas
A skill define um limite de iteração: se um problema específico precisar de mais de 3 tentativas de correção, ela deve consultar o usuário em vez de continuar.
Um Problema por Vez
Cada problema é corrigido individualmente e verificado antes de passar para o próximo, em vez de agrupar alterações.
Screenshot Antes de Tocar no Código
Screenshots do estado com defeito devem sempre ser salvos antes das correções, para que o antes e o depois possam ser comparados.
Apenas Mudanças Mínimas
O princípio da correção é fazer apenas a mudança mínima necessária para resolver o problema, respeitando o estilo de código existente e evitando quebrar outras partes.
Trabalhar a Matriz de Prioridade
Problemas de layout que afetam a funcionalidade são P1 e corrigidos imediatamente, problemas visuais que degradam a UX são P2 e corrigidos a seguir, inconsistências visuais menores são P3 e corrigidas se possível.
Testar Quatro Viewports
As verificações responsivas ocorrem em 375px (Mobile, iPhone SE/12 mini), 768px (Tablet, iPad), 1280px (Desktop) e 1920px (Wide).
Respeitar os Padrões Existentes
As correções devem seguir o estilo de código já utilizado no projeto, em vez de introduzir uma nova convenção.
Confirmar Antes de Mudanças Importantes
Refatorações de grande escala não são feitas unilateralmente: o usuário é consultado antes de mudanças importantes, e vários problemas não são corrigidos ao mesmo tempo, pois isso é difícil de verificar.

04 Coloque em prática

Instale web-design-reviewer no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicione web-design-reviewer ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

npx skills add https://github.com/github/awesome-copilot --skill web-design-reviewer

Forma genérica da CLI skills para skills/web-design-reviewer/SKILL.md; o repositório pode documentar seu próprio caminho.

Dar à Skill uma Primeira Tarefa de Revisão de Design

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt

Review the design of the website running at http://localhost:3000. It is a [Next.js] app styled with [Tailwind CSS], please check the [home and pricing] pages at mobile and desktop widths. Find the layout, responsive and accessibility problems like element overflow, weak contrast or tiny touch targets, then fix them in the source and verify the fixes.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Recarregue o navegador ou aguarde o HMR do servidor de desenvolvimento e, em seguida, capture screenshots das áreas corrigidas.
Compare os screenshots antes e depois de cada elemento corrigido.
Execute testes de regressão para verificar se as correções não afetaram outras áreas.
Confirme se a exibição responsiva permanece intacta após a mudança.
Leia as mensagens do console do navegador para detectar erros de JavaScript, via a ferramenta browser_console_messages na configuração de referência do Playwright.

No OpenDesign importe o web-design-reviewer a partir do link do SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: GitHub
Repository: github.com/github/awesome-copilot Branch main
Arquivo da skill: skills/web-design-reviewer/SKILL.md Checksum de conteúdo registrado na verificação; commit 1899b18
License: MIT De LICENSE.
Estrelas do repositório: 38.981 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório github/awesome-copilot, que contém 6 skills neste catálogo. Não é uma classificação ou contagem de uso para web-design-reviewer.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Escopo de AplicaçãoLista sites estáticos, SPA e frameworks full-stack, plataformas CMS e outras aplicações web que abrange.
Pré-requisitosUm site de destino em execução, automação de navegador com screenshot e acesso ao DOM, e código-fonte para correções.
Etapa 1: Fase de Coleta de InformaçõesConfirma a URL, pergunta sobre framework, estilização e escopo, detecta automaticamente arquivos de configuração e método de estilização.
Etapa 2: Fase de Inspeção VisualPercorre páginas, captura screenshots, verifica problemas de layout, responsividade, acessibilidade e consistência em quatro viewports.
Etapa 3: Fase de Correção de ProblemasPrioriza de P1 a P3, localiza arquivos de origem por seletor, componente ou padrão, aplica correções mínimas específicas do framework.
Etapa 4: Fase de ReverificaçãoRecarrega, captura novos screenshots, compara antes e depois, executa testes de regressão, retorna caso restem problemas.
Formato de SaídaDefine o modelo de relatório de revisão em markdown com tabela de resumo, problemas, itens não corrigidos e recomendações.
Capacidades necessáriasTabula navegação, captura de tela, análise de imagens, recuperação de DOM, leitura/escrita de arquivos e busca de código.
Implementação de ReferênciaMapeia capacidades para ferramentas Playwright MCP, fornece uma configuração de servidor MCP e lista outras ferramentas compatíveis.
Boas PráticasListas de fazer e não fazer: salvar capturas de tela, corrigir um item por vez, nenhuma refatoração em massa sem confirmação.
Solução de ProblemasAborda arquivos de estilo não encontrados, correções não refletidas e correções que afetam outras áreas.

A Descrição da Própria Skill

"Esta skill permite inspeção visual de sites rodando localmente ou remotamente para identificar e corrigir problemas de design. Ativa em solicitações como "revisar design do site", "verificar a UI", "corrigir o layout", "encontrar problemas de design". Detecta problemas com design responsivo, acessibilidade, consistência visual e quebra de layout, depois realiza correções no nível do código-fonte."

Descrição do front-matter de SKILL.md. O arquivo completo tem aproximadamente 10.577 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre o Skill web-design-reviewer

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

O site precisa estar em execução antes de eu começar?

Sim. O primeiro pré-requisito obrigatório é um alvo em execução, seja um servidor de desenvolvimento local, um ambiente de staging ou produção para revisões somente leitura.

A automação de navegador com captura de tela, navegação de página e recuperação do DOM também é necessária, e as correções exigem que o projeto exista no workspace.

Ele altera meu código ou apenas relata problemas?

Ele realiza correções no nível do código-fonte, editando a camada que corresponde ao método de estilização do projeto: className em componentes para Tailwind, arquivos CSS de módulo para CSS Modules, arquivos CSS ou SCSS simples, e arquivos JS/TS para styled-components e Emotion. Se não conseguir corrigir algo, o relatório lista o motivo e uma ação recomendada.

Qual ferramenta de automação de navegador ele precisa?

O Playwright MCP é recomendado como implementação de referência, com ferramentas para navegação, snapshot, captura de tela, clique, redimensionamento e mensagens de console. O workflow também funciona com Selenium, Puppeteer, Cypress ou WebDriver BiDi, desde que navegação, capturas de tela e recuperação do DOM estejam disponíveis.

Web Design Reviewer

Execute web-design-reviewer em uma Tarefa Real de Revisão de Design.

Baixe o OpenDesign, importe web-design-reviewer a partir do link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills