Testada em uma tarefa realOficial do fabricanteDesign e front-end

Web Interface Guidelines Review

Uma lista linha a linha do que corrigir no código da sua página, conferida com as regras de interface da Vercel.

Instale Web Interface Guidelines Review grátis

Deixe seu email e os passos de instalação abrem aqui mesmo: um prompt para colar na sua ferramenta de IA. Vale para as 149 skills.

Nossa nota: 6/10
Funciona em: Claude, ChatGPT+7 outras
Claude Code, Claude app, Codex, ChatGPT, Cursor, GitHub Copilot, Gemini CLI, Antigravity, OpenCode, Windsurf e mais de 60 ferramentas de IA que leem skills.
Precisa programar?: Um pouco
Tempo até o resultado: 14 min
Criado por: Vercel
Testada em: 19 de out. de 2026

Revisão de design — A revisão: 19 achados ordenados por importância, 12 reais e corrigidos, o resto marcado como opcional ou não sendo um problema real.

A resposta curta

Web Interface Guidelines Review é a skill oficial da Vercel que faz o Claude baixar a lista atual de regras de interface da Vercel (acessibilidade, formulários, foco, modo escuro, textos e mais) e conferir o código da sua página contra cada uma, relatando cada problema com a linha exata. Serve para quem já tem uma página ou app em código e quer uma passada de acabamento antes do lançamento. Nosso veredito é 6/10: no nosso teste, ela pegou um bug real e 11 correções menores, mas 7 dos 19 achados eram ruído ou preferências de estilo, e ela ignora lacunas de conteúdo como preços ou políticas faltando.

Ideal para: Quem tem uma página ou app existente em código e quer uma passada de acabamento e acessibilidade antes do lançamento, com os lugares exatos a mudar.

Quer esse resultado no seu próprio trabalho?

Cadastre-se grátis e instale Web Interface Guidelines Review em cerca de um minuto. Um email libera os passos de instalação de todas as skills do site.

Quando vale a pena usar

Dê acabamento a uma página de reservas antes do lançamento

No nosso teste, a dona de uma loja de cerâmica teve sua página de reserva de oficinas revisada. O Claude descobriu que nomes de clientes longos ficavam cortados na tela de confirmação no celular e que não havia como linkar direto para uma oficina, e depois corrigiu as duas coisas mais 10 problemas menores.

Confira um formulário de cadastro ou contato

Aponte para o arquivo com o seu formulário. Você recebe uma lista das linhas exatas em que rótulos, tipos de campo, preenchimento automático, mensagens de erro ou contornos de foco quebram as regras, para um desenvolvedor ou o Claude corrigir rápido.

Audite detalhes de modo escuro e celular

A lista de regras cobre cores do navegador no modo escuro, comportamento de toque no celular, áreas seguras em volta de entalhes e zoom. Útil quando seu site parece bem no notebook, mas você não conferiu esses detalhes mais finos.

Como ter um ótimo resultado

Instale (passos abaixo)
Garanta que o Claude consiga acessar a internet, porque a skill baixa a lista de regras da Vercel do zero toda vez que roda.
Aponte para os seus arquivos
Diga qual página ou quais arquivos revisar, por exemplo seu index.html ou um componente de formulário. Se você não disser nenhum, a skill instrui o Claude a perguntar quais arquivos conferir.
Peça ordem de prioridade e palavras simples
A saída padrão da skill são notas curtas de desenvolvedor como 'index.html:452 - missing overflow-wrap'. Peça ao Claude para ordenar os achados por importância e marcar quais são problemas reais na sua página.
Peça ao Claude para corrigir os reais
Peça ao Claude para corrigir só os achados que ele marcou como reais e deixar as preferências de estilo com você. No nosso teste, ele corrigiu 12 problemas sem mudar o visual da página.
Teste a página corrigida
Abra a página no celular ou peça ao Claude para testá-la em largura de celular, incluindo casos extremos como um nome muito longo. Foi assim que nosso teste confirmou o bug do nome cortado e a correção.

Este é o prompt exato com que começamos o nosso teste:

O prompt que usamos

Revise minha página de reserva de oficinas com base em diretrizes profissionais de web design e me diga exatamente o que corrigir, do mais importante para o menos. Depois corrija os principais problemas.

Tudo o que ela criou

Cada peça abaixo é um resultado real do nosso teste, aberta do jeito que você abriria.

A página de reservas corrigida: nomes longos agora quebram linha, e links como ?workshop=mug a abrem com aquela oficina já escolhida.

A página de reservas corrigida: nomes longos agora quebram linha, e links como ?workshop=mug a abrem com aquela oficina já escolhida. (celular) — A página de reservas corrigida: nomes longos agora quebram linha, e links como ?workshop=mug a abrem com aquela oficina já escolhida.

Como foi a sessão

A conversa do nosso teste, resumida. Cerca de 14 minutos do primeiro prompt até o resultado final.

Você: Revise minha página de reserva de oficinas com base em diretrizes profissionais de web design e me diga exatamente o que corrigir, do mais importante para o menos. Depois corrija os principais problemas.
AI: Escrevi o review.md no formato da skill, ordenado por importância. 19 achados: 12 reais, 1 regra opcional de estilo da casa (Title Case nos botões), 6 que correspondem a uma regra, mas não são problemas reais nesta página (por exemplo "focar o primeiro campo com erro" quando a página já usa um resumo de erros com links). A página já estava em boa forma: rótulos, anéis de foco, mensagens de erro, movimento reduzido e...
AI: Pronto. Uma coisa que as diretrizes não cobrem é a maior lacuna antes do lançamento: horários de início, pagamento, política de cancelamento e o que está incluído ainda são [placeholder], e o botão Confirm é simulado até ser conectado a um serviço de reservas de verdade. Observações: a skill é só instruções mais um link para a lista de regras da Vercel. Todo o julgamento (quais correspondências são reais, em que ordem corrigir) veio de...

O que funcionou e onde deixou a desejar

O que funcionou

Achou um bug real: um nome de cliente longo ficava cortado na tela de confirmação no celular (medidos 361px de texto numa caixa de 301px)
Achou um recurso útil que faltava: nenhum link abria a página com uma oficina já selecionada, agora corrigido com links ?workshop= e ?date=
A lista de regras é ampla e atual (foco, formulários, modo escuro, datas, texto), então pequenos problemas de acabamento, como a cor da barra do navegador no modo escuro e datas digitadas à mão, foram pegos
As correções foram seguras e testáveis: nenhuma mudança de layout, nenhum erro no console, a página continua cabendo em 375px

Onde deixou a desejar

6 dos 19 achados eram correspondências com regras que não são problemas reais aqui, e mais 1 é preferência de estilo da casa (Title Case), então uma pessoa ou o Claude precisa filtrar a lista
O WebFetch, que a skill manda usar, devolveu só um resumo condensado das regras, então uma execução ao pé da letra pode perder regras específicas e o formato exato de saída
A skill só confere o código contra regras de interface: ela não diz nada sobre os placeholders não preenchidos (horários de início, pagamento, política de cancelamento), que são o que mais importa nesta página, e o formato arquivo:linha é escrito para desenvolvedores

Quer esse resultado no seu próprio trabalho?

Cadastre-se grátis e instale Web Interface Guidelines Review em cerca de um minuto. Um email libera os passos de instalação de todas as skills do site.

Prompts que funcionam

Troque as partes entre colchetes pelos seus próprios dados. Não precisa citar a skill: peça o trabalho e sua ferramenta de IA usa a skill sozinha.

Revise e corrija uma página

Revise minha [página de reservas / landing page] em [nome do arquivo] com base em diretrizes profissionais de web design e me diga exatamente o que corrigir, do mais importante para o menos. Depois corrija os principais problemas.

Confira só um formulário

Use as diretrizes de web design para revisar o formulário de [cadastro / contato / checkout] em [nome do arquivo]. Explique cada problema em linguagem simples e diga quais um cliente realmente perceberia.

Passada de acessibilidade antes do lançamento

Antes de eu lançar, confira [arquivo ou pasta] com base nas diretrizes de interface web para acessibilidade e uso por teclado. Marque cada achado como real ou não relevante para a minha página e depois corrija os reais.

Checagem de modo escuro e celular

Revise [nome do arquivo] com base nas diretrizes de interface web, focando em modo escuro, telas de celular e toque. Teste em largura de celular com um nome e um e-mail muito longos no formulário.

Dicas do nosso teste

Peça ao Claude para marcar cada achado como real, opcional ou não relevante. No nosso teste, 6 dos 19 achados correspondiam a uma regra, mas não eram problemas reais naquela página.
Espere sugestões de Title Case para títulos e botões. Esse é o estilo da casa da Vercel, não uma regra de usabilidade, então mantenha sua própria voz se preferir maiúscula só no início da frase.
Peça um teste com entradas extremas, como um nome muito longo. A revisão apontou o risco, e um teste real no navegador em largura de celular provou que o nome ficava cortado.
Pergunte ao Claude separadamente sobre o conteúdo. As regras não conferem horários de início, preços ou políticas faltando, que eram a maior lacuna da nossa página de teste.
Se as regras parecerem rasas, peça ao Claude para ler a lista completa. No nosso teste, a ferramenta de busca na web citada pela skill devolveu só um resumo, e a lista completa tem cerca de 100 regras.

O que você precisa: O código da sua página (HTML ou arquivos do projeto) para o Claude ler; uma URL no ar sozinha não é o que ela revisa, Acesso à internet para o Claude buscar a lista de regras atual a cada vez, O Claude Code exige Pro ou superior; skills no app do Claude funcionam em todos os planos com execução de código ativada.

Como instalar

As skills seguem o padrão aberto Agent Skills, então esta não depende de uma única empresa. Escolha a ferramenta de IA que você usa. Na dúvida? A primeira aba cobre a maioria em um passo só.

Mais fácil: cole isto em sua ferramenta de IA

Instale esta skill para mim para que ela funcione em todos os projetos: rode `npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines -g -y` no meu terminal. Se faltar o Node.js, me diga primeiro como instalar. Quando terminar, confirme que a skill foi instalada e me diga como começar a usar.

Ou faça você mesmo:

Um comando instala a skill nas ferramentas de IA do seu computador. Ele encontra as que você tem e pergunta em quais adicionar: Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, OpenCode e mais de 60 outras.

$npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines -g

Você precisa ter o Node.js instalado (grátis, em nodejs.org). A opção -g deixa a skill disponível em todos os projetos.

Bom saber: Uma das skills mais instaladas no registro skills.sh.

Libere os passos de instalação

Grátis. Deixe seu email uma vez para liberar os passos de instalação das 149 skills e receber as melhores skills novas todo mês.

Como verificamos

Confirmamos a skill na fonte original em 18 de outubro de 2026: o SKILL.md está onde deveria, os arquivos foram atualizados no último ano e a licença () permite o uso. Depois, em 19 de outubro de 2026, instalamos, usamos na tarefa acima sem mudar a skill e anotamos o que aconteceu, inclusive o que deu errado.

Perguntas frequentes

Preciso saber programar para usá-la?

Você não precisa escrever código, mas precisa dos arquivos de código da sua página, e o relatório padrão é escrito para desenvolvedores, com nomes de arquivos, números de linha e termos de CSS. Peça ao Claude para explicar os achados em linguagem simples e fazer as correções por você.

De qual plano ou ferramentas ela precisa?

No Claude Code, você precisa de um plano Pro ou superior. No app do Claude, skills funcionam em todos os planos com execução de código ativada. De qualquer forma, o Claude precisa de acesso à internet para baixar a lista de regras a cada vez.

Ela funciona no Claude.ai ou só no Claude Code?

Nos dois. No Claude.ai, você envia a skill como zip em Customize, Skills. No Claude Code, você a instala uma vez e ela fica disponível em todos os projetos.

Qual a diferença de simplesmente pedir ao Claude para revisar minha página?

Ela dá ao Claude um checklist fixo e atual de cerca de 100 regras da Vercel, então ele confere pequenas coisas que uma revisão rápida costuma pular, como a cor da barra do navegador no modo escuro ou datas digitadas à mão. O Claude ainda precisa julgar quais correspondências importam: no nosso teste, ele manteve 12 de 19.

Ela vai conferir meus textos, preços ou o design geral?

Só um pouco. As regras de texto dela cobrem coisas como voz ativa, Title Case e uso de algarismos, mas ela não julga sua oferta, seu layout ou informações faltando. No nosso teste, ela não disse nada sobre horários de início e políticas não preenchidos.