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
Mensagem pronta para colar
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-guidelinesOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/skills/web-design-guidelines/SKILL.md -o SKILL.mdConteú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
- Carregue as diretrizes fixadas de
references/guidelines.md— este é o caminho de execução padrão e reproduzível - Opcionalmente, busque as diretrizes mais recentes do URL de origem abaixo e compare com o snapshot fixado para ver se algo mudou
- Leia os arquivos especificados (ou solicite ao usuário arquivos/padrão)
- Verifique contra todas as regras nas diretrizes
- 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:
- Carregue
references/guidelines.mdcomo a fonte padrão - Opcionalmente, busque o URL de origem para verificar atualizações
- Leia os arquivos especificados
- Aplique todas as regras das diretrizes
- 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
Comentários
- …
Mais skills deste repositório
sample-plugin
Faz seu agente criar um arquivo de metadados para testes. Ele ajuda a garantir que o código funcione corretamente em diferentes situações.
nexu-io/open-design
aster-atelier
Ajuda seu agente a criar um site artístico com visual clássico. Ele usa imagens elegantes, céus azuis e fontes serifadas para um visual cinematográfico.
nexu-io/open-design
audio-jingle
Faz seu agente gerar áudio como jingles e efeitos sonoros. Ele pode criar músicas e vozes, salvando o resultado em um arquivo de áudio.
nexu-io/open-design
blog-post
Ajuda seu agente a escrever artigos longos ou posts de blog. Ele inclui espaços para imagens, citações e informações do autor.
nexu-io/open-design
Skills parecidas
accessibility
Ajuda seu agente a criar interfaces que todos possam usar. Garante que sites e aplicativos funcionem bem para pessoas com deficiência, como cegos ou com mobilidade reduzida.
affaan-m/ECC
design-system
Ajuda seu agente a criar um sistema de design a partir de um código existente. Ele extrai informações visuais e verifica a consistência, gerando um relatório e uma prévia interativa.
affaan-m/ECC
liquid-glass-design
Ajuda seu agente a criar interfaces de usuário com efeito 'Liquid Glass' para iOS. Permite adicionar efeitos visuais dinâmicos e interativos em SwiftUI e UIKit.
affaan-m/ECC