Pular para o conteúdo
Skillpedia
Interfaces (UI/UX)101 mil · #792

web-design-guidelines

Faz seu agente verificar se o código de interface está de acordo com as diretrizes de design. Garante que o visual do site seja consistente e acessível.

O que ela faz

Esta ferramenta verifica se o seu código de design para sites segue as regras de design da Vercel. Ela olha para como os elementos estão organizados, as fontes, as cores, os movimentos e a acessibilidade.

Quando usar

  • ✓Quando você quer garantir que seu site está bonito e funcional.
  • ✓Antes de lançar um site para o público.
  • ✓Se você está recebendo feedback sobre o design do seu site.

Exemplo do que pedir para a IA

“Verifique meu código de design para as diretrizes da Vercel.”

Quer saber mais? Abra as seções abaixo.

Como usar

O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.

Link da skill

https://github.com/nexu-io/open-design/blob/main/skills/web-design-guidelines/SKILL.md

Mensagem pronta para colar

Use esta skill para me ajudar: https://github.com/nexu-io/open-design/blob/main/skills/web-design-guidelines/SKILL.md Leia o arquivo SKILL.md desse link e siga as instruções dele na minha tarefa.
Como funciona

A ferramenta compara seu código com um conjunto de regras de design pré-definidas. Ela informa onde o código não está seguindo essas regras.

Instalação

Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.

No terminal (Claude Code, Codex, Cursor), na pasta do projeto:

npx skills add nexu-io/open-design --skill web-design-guidelines

Ou baixe só o arquivo:

curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/skills/web-design-guidelines/SKILL.md -o SKILL.md
Conteúdo técnico (SKILL.md)

Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.

Diretrizes da Interface Web

Revise os arquivos para conformidade com as Diretrizes da Interface Web.

Como Funciona

  1. Carregue as diretrizes fixadas de references/guidelines.md — este é o caminho de execução padrão e reproduzível
  2. Opcionalmente, busque as diretrizes mais recentes do URL de origem abaixo e compare com o snapshot fixado para ver se algo mudou
  3. Leia os arquivos especificados (ou solicite ao usuário arquivos/padrão)
  4. Verifique contra todas as regras nas diretrizes
  5. Exiba os achados no formato conciso file:line

Fonte das Diretrizes

Padrão (fixado): A cópia incluída em references/guidelines.md é o caminho de execução padrão. É um snapshot fixado das diretrizes de origem e garante que a habilidade produza resultados reproduzíveis em qualquer ambiente de execução.

Origem (ao vivo): Para usuários que desejam as regras mais recentes, a fonte ao vivo está disponível em:

https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

Buscar a versão ao vivo é opcional — o snapshot fixado é sempre a base.

Uso

Quando um usuário fornece um argumento de arquivo ou padrão:

  1. Carregue references/guidelines.md como a fonte padrão
  2. Opcionalmente, busque o URL de origem para verificar atualizações
  3. Leia os arquivos especificados
  4. Aplique todas as regras das diretrizes
  5. Exiba os achados usando o formato especificado nas diretrizes

Se nenhum arquivo for especificado, pergunte ao usuário quais arquivos revisar.

Perguntas frequentes

O que são 'diretrizes de design'?

São um conjunto de regras e recomendações para criar interfaces de usuário bonitas, fáceis de usar e acessíveis.

Por que usar as diretrizes da Vercel?

Elas são criadas por especialistas em design e ajudam a garantir que seu site tenha uma boa aparência e funcione bem em diferentes dispositivos.

A ferramenta pode corrigir meu código automaticamente?

Não, a ferramenta apenas aponta os problemas. Você precisará fazer as correções no seu código.

Detalhes

Descrição original do autor

Review UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.

repo: nexu-io/open-design

Popularidade

Estrelas no GitHub
101 mil
Posição no ranking
#792
Licença
Apache-2.0
Atualizada em
16/10/2026

Essa skill é útil?

0

Entre para votar.

Comentários

  • …

Mais skills deste repositório

Skills parecidas