ui-ux-pro-max
Crie Designs Profissionais de UI/UX com Inteligência de Sistema de Design
Também disponível em: DCjanus,nextlevelbuilder
Criar designs profissionais de UI/UX requer conhecimento profundo de acessibilidade, teoria das cores, tipografia e padrões específicos de stack. Esta skill oferece um banco de dados pesquisável com 50+ estilos de design, paletas de cores, combinações de fontes e diretrizes de implementação para ajudá-lo a construir interfaces polidas com mais rapidez.
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "ui-ux-pro-max". Pesquisar sistema de design 'spa de beleza bem-estar elegante'
Resultado esperado:
Sistema de Design Gerado:
- Padrão de Produto: Negócio baseado em serviço com foco em agendamento
- Estilo de UI: Minimalismo suave com formas orgânicas
- Paleta de Cores: Verde sálvia primário, fundo creme, detalhes em rosa dourado
- Tipografia: Playfair Display (títulos) + Lato (corpo)
- Efeitos: Sombras sutis, gradientes suaves, transições fluidas
A utilizar "ui-ux-pro-max". Obter diretrizes UX para acessibilidade de animação
Resultado esperado:
Diretrizes de UX Encontradas:
1. prefers-reduced-motion: Verificar media query e fornecer fallback estático
2. Limites de duração: Usar 150-300ms para micro-interações
3. Desempenho de transform: Animar transform/opacidade, não width/height
4. Estados de carregamento: Mostrar skeleton screens ou spinners para operações assíncronas
Auditoria de Segurança
SeguroStatic analysis flagged 1395 patterns across 28 files, but all findings are false positives. The 'weak cryptographic algorithm' detections are triggered by BM25 scoring math (log functions) in a text search engine, not actual cryptography. 'Hardcoded URL' findings are documentation URLs in CSV data files. 'External commands' are bash examples in documentation showing how to run the Python search tool. The skill performs local file operations on its own data files with no network calls, no dynamic code execution, and no user input processing.
Pontuação de qualidade
O Que Você Pode Construir
Desenvolvedor Frontend Criando um Novo Dashboard
Um desenvolvedor precisa criar um dashboard administrativo para um produto SaaS. Eles usam a skill para obter recomendações de sistema de design para 'dashboard SaaS', recuperar paletas de cores acessíveis para interfaces com muitos dados e obter diretrizes específicas de React para otimização de desempenho.
Fundador Solo Criando uma Landing Page
Um fundador sem formação em design precisa de uma landing page profissional para sua startup. Eles pesquisam por 'spa de beleza bem-estar serviço' para obter um sistema de design completo com estilo, cores, tipografia e padrões de landing page, e depois usam as diretrizes do Tailwind CSS para implementar.
Designer Garantindo Conformidade com Acessibilidade
Um designer quer garantir que sua UI atenda às diretrizes WCAG. Eles consultam o domínio ux para 'acessibilidade contraste foco' para obter regras específicas sobre proporções de contraste de cores, estados de foco e navegação por teclado com exemplos de código.
Tente Estes Prompts
Pesquise estilos de design correspondentes a 'dashboard modo escuro minimalista'. Mostre as 3 principais recomendações de estilo com seus esquemas de cores e características principais.
Gere um sistema de design completo para 'dashboard de trading de cripto fintech'. Inclua padrão de produto, estilo de UI, paleta de cores, tipografia e efeitos. Nomeie o projeto como 'CryptoVault'.
Revise este componente de botão quanto a problemas de acessibilidade: [cole o código]. Verifique contra as diretrizes WCAG para contraste de cores, estados de foco e tamanho do alvo de toque. Forneça correções específicas.
Estou criando uma navbar responsiva com Tailwind CSS. Pesquise diretrizes de 'navbar responsiva flutuante' na stack html-tailwind e forneça código de implementação com atributos aria adequados.
Melhores Práticas
- Sempre comece com a flag --design-system para obter recomendações abrangentes com raciocínio antes de implementar
- Verifique as diretrizes de acessibilidade primeiro - contraste de cores (4.5:1), estados de foco e alvos de toque (mínimo de 44x44px)
- Use pesquisas específicas de stack para obter padrões de implementação que seguem convenções de framework
Evitar
- Usar emoji como ícones de UI em vez de bibliotecas de ícones SVG apropriadas como Heroicons ou Lucide
- Implementar estados hover com transformações de escala que causam layout shift
- Usar cards de vidro transparentes (bg-white/10) em modo claro onde se tornam invisíveis