UI/UX Pro Max Skill — Casos de uso, Instalar & Demo ao vivo

Por que usar

Principais recursos

Escalas tipográficas com ritmo vertical
Sistemas de cores com tokens semânticos, dark mode, acessibilidade
Escala de espaçamento + padrões de grid
Diretrizes de motion (durações, easings, quando animar)
Padrões de plataforma: web, iOS HIG, Material 3, macOS
Checklist de acessibilidade (padrões WCAG 2.2 AA)

Demo ao vivo

Como fica na prática

pronto

Instalar

Escolha seu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "ui-ux-pro-max-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill",
        "~/.claude/skills/ui-ux-pro-max"
      ],
      "_inferred": true
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "ui-ux-pro-max-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill",
        "~/.claude/skills/ui-ux-pro-max"
      ],
      "_inferred": true
    }
  }
}

Cursor usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "ui-ux-pro-max-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill",
        "~/.claude/skills/ui-ux-pro-max"
      ],
      "_inferred": true
    }
  }
}

Clique no ícone MCP Servers na barra lateral do Cline, depois "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "ui-ux-pro-max-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill",
        "~/.claude/skills/ui-ux-pro-max"
      ],
      "_inferred": true
    }
  }
}

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "ui-ux-pro-max-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill",
        "~/.claude/skills/ui-ux-pro-max"
      ]
    }
  ]
}

O Continue usa um array de objetos de servidor em vez de um map.

~/.config/zed/settings.json

{
  "context_servers": {
    "ui-ux-pro-max-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill",
          "~/.claude/skills/ui-ux-pro-max"
        ]
      }
    }
  }
}

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

claude mcp add ui-ux-pro-max-skill -- git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill ~/.claude/skills/ui-ux-pro-max

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

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

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
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
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

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
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

Auditar

Audite /components/Form.tsx contra WCAG 2.2 AA. Encontre problemas de contraste, labels, ordem de foco.✓ Copiado

→ Lista de problemas com severidade
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

Ferramenta	Entradas	Quando chamar	Custo
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

Alternativa	Quando usar	Troca
open-design-skill	Você quer templates de design system com qualidade de marca	Menos fundamentos, mais estilos pré-construídos
Tokens de design curados manualmente	O designer já está no loop	Mais esforço

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills