/ Diretório / Playground / UI/UX Pro Max Skill
← Todos os servidores ↗ GitHub
● Comunidade nextlevelbuilder ⚡ Instantâneo

UI/UX Pro Max Skill

por nextlevelbuilder · nextlevelbuilder/ui-ux-pro-max-skill

Pare de deixar o Claude gerar UIs feias. Esta skill ensina design de verdade — escalas tipográficas, ritmo de espaçamento, sistemas de cores, acessibilidade — para web, mobile e desktop.

UI/UX Pro Max é uma skill abrangente de conhecimento de design que injeta inteligência de design em qualquer agente que a carregue. Cobre tipografia, teoria das cores, espaçamento/grid, motion, acessibilidade (WCAG 2.2) e padrões específicos de plataforma (Apple HIG, Material 3, Fluent). Melhor combinada com ecossistemas shadcn/Tailwind, mas não acoplada a eles.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por que usar

Principais recursos

Demo ao vivo

Como fica na prática

pronto

Instalação

Repositório do autor · Documentação oficial de Skills do Claude

Casos de uso

Usos do mundo real: UI/UX Pro Max Skill

Corrigir a aparência de 'UI gerada por IA' em um app existente

👤 Devs cuja UI construída pelo Claude parece genérica ⏱ ~60 min intermediate

Quando usar: Seu output do shadcn funciona mas parece off-the-shelf.

Fluxo
  1. Diagnosticar
    Use UI/UX Pro Max. Audite o design system em /src/ui — tipo, espaçamento, tokens de cor. Pontue cada um.✓ Copiado
    → Scorecard por eixo com problemas concretos
  2. Definir tokens
    Recomende uma escala tipográfica de 4 passos + escala de espaçamento de 4 passos alinhada ao grid de 4px.✓ Copiado
    → Tabela de tokens
  3. Aplicar
    Atualize tokens.css e re-execute. Mostre o diff na aparência renderizada.✓ Copiado
    → Tipografia mais enxuta, ritmo consistente

Resultado: UI que não grita 'foi feita em 5 minutos'.

Armadilhas
  • Excesso de tokenização — cada valor vira uma variável — Variáveis para tokens repetidos; literais estão bem para casos únicos

Projetar uma tela mobile que segue o iOS HIG

👤 Devs construindo apps multiplataforma ⏱ ~45 min intermediate

Quando usar: Você tem uma surface iOS e quer que ela pareça nativa, não uma sopa multiplataforma.

Fluxo
  1. Especificar
    Projete uma tela de configurações para iOS — células agrupadas, navegação, light/dark, chamadas de acessibilidade. Referencie o HIG.✓ Copiado
    → Especificação com referências ao HIG
  2. Implementar
    Converta para SwiftUI. Use fontes do sistema, cores semânticas, dynamic type.✓ Copiado
    → Código SwiftUI com aparência nativa do sistema

Resultado: Tela aprovada no teste visual 'parece nativa'.

Armadilhas
  • Cores hard-coded quebram o dark mode — Use cores semânticas do sistema; a skill impõe isso

Executar uma auditoria de acessibilidade em um componente

👤 Devs preparando conformidade com a11y ⏱ ~30 min intermediate

Quando usar: Você precisa de WCAG 2.2 AA em um fluxo crítico.

Fluxo
  1. Auditar
    Audite /components/Form.tsx contra WCAG 2.2 AA. Encontre problemas de contraste, labels, ordem de foco.✓ Copiado
    → Lista de problemas com severidade
  2. Corrigir
    Aplique as correções. Verifique com o esboço semântico do leitor de tela.✓ Copiado
    → Lista de problemas diminui; esboço semântico lido de forma limpa

Resultado: Componente que passa em auditoria + teste de usuário real.

Armadilhas
  • Correções automáticas quebram o layout visual — Re-renderize após cada correção; verificação de regressão visual
Combine com: filesystem

Combinações

Combine com outros MCPs para 10× de alavancagem

ui-ux-pro-max-skill + open-design-skill

Design system + sistemas de referência com qualidade de marca

Use UI/UX Pro Max para fundamentos + open-design para estilos de marca.✓ Copiado
ui-ux-pro-max-skill + filesystem

Aplicar mudanças de tokens em todo o código-base

Atualize tokens.css e propague; execute auditoria.✓ Copiado

Ferramentas

O que este MCP expõe

FerramentaEntradasQuando chamarCusto
design_audit scope: directory or component Avaliação inicial tokens
tokens_recommend constraints (brand, platform) Configurar um design system tokens
a11y_check component path Passagem de conformidade tokens

Custo e limites

O que custa rodar

Cota de API
N/A
Tokens por chamada
Pesado na primeira auditoria; mais leve nos follow-ups
Monetário
Gratuito
Dica
Audite por componente, não o app inteiro de uma vez

Segurança

Permissões, segredos, alcance

Escopos mínimos: Leitura de arquivos do projeto
Armazenamento de credenciais: Nenhum
Saída de dados: Nenhuma

Solução de problemas

Erros comuns e correções

Recomendações conflitam com diretrizes de marca

Forneça restrições de marca antecipadamente; a skill as respeita

Skill aciona de forma muito agressiva

Restrinja por diretório ou invoque explicitamente

Alternativas

UI/UX Pro Max Skill vs. outros

AlternativaQuando usarTroca
open-design-skillVocê quer templates de design system com qualidade de marcaMenos fundamentos, mais estilos pré-construídos
Tokens de design curados manualmenteO designer já está no loopMais esforço

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills