ui-ux-pro-max
Crie Designs Profissionais de UI/UX com Orientação de IA
Também disponível em: nextlevelbuilder,DCjanus,ZhanlinCui
Designers e desenvolvedores têm dificuldade em manter sistemas de design consistentes e acessíveis em diferentes projetos. Esta skill fornece diretrizes abrangentes de design, paletas de cores, recomendações de tipografia e padrões de componentes em 9 das principais stacks tecnológicas.
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". Recomende uma paleta de cores para um aplicativo de saúde
Resultado esperado:
Paleta de Cores para Aplicativo de Saúde: Primária (#0891B2 - Ciano Calmo) estabelece confiança e tranquilidade. Secundária (#22D3EE - Ciano Claro) fornece hierarquia visual. CTA (#059669 - Verde Sucesso) para ações primárias. Fundo (#ECFEFF - Branco Suave) reduz cansaço visual. Texto (#164E63 - Verde-azulado Profundo) garante legibilidade. Borda (#A5F3FC - Borda Clara) para separação sutil. Esta paleta prioriza tranquilidade e confiança, críticas para aplicativos de saúde onde os usuários podem experimentar ansiedade.
A utilizar "ui-ux-pro-max". Quais são os requisitos de área de toque para botões móveis?
Resultado esperado:
Diretrizes de Área de Toque: Mínimo de 44x44 pixels (requisito do iOS HIG e WCAG). Recomendado 48x48 pixels para ações usadas frequentemente. O padding deve ser incluído na medição, não apenas o botão visível. Espaçamento entre áreas de toque: mínimo de 8px para prevenir toques acidentais. Para ações críticas (excluir, comprar), considere mínimo de 56x56px.
Auditoria de Segurança
Baixo RiscoStatic analysis flagged 1176 patterns but nearly all are false positives. 'Weak cryptographic algorithm' detections are hex color codes (#2563EB) in design data files. 'Hardcoded URLs' are documentation links in guidelines. 'System reconnaissance' and 'C2 keywords' are design terminology matches. Python scripts read CSV files to generate design recommendations - no network calls or code execution. One legitimate concern: scripts/design_system.py uses subprocess calls (Ruby/shell execution patterns) for design tooling integration, which is appropriate for this use case but documented as a minor risk.
Problemas de Risco Médio (1)
Problemas de Baixo Risco (3)
Pontuação de qualidade
O Que Você Pode Construir
Startup Criando Sistema de Design MVP
Um fundador independente usa a skill para estabelecer padrões de UI consistentes para seu produto SaaS, selecionando paletas de cores apropriadas, estilos de componentes e diretrizes de acessibilidade para sua aplicação baseada em React.
Equipe de Design Padronizando Componentes
Um líder de equipe de design utiliza as diretrizes abrangentes para criar documentação unificada do sistema de design, garantindo que todos os membros da equipe sigam padrões consistentes em várias linhas de produtos.
Desenvolvedor Implementando Requisitos de Acessibilidade
Um desenvolvedor frontend referencia as diretrizes de acessibilidade para garantir que sua aplicação Vue atenda aos requisitos WCAG 2.1, incluindo contraste de cores adequado, gerenciamento de foco e padrões de navegação por teclado.
Tente Estes Prompts
Estou construindo um [tipo de produto, e.g., dashboard SaaS]. Recomende uma paleta de cores com cores primária, secundária, CTA, fundo, texto e borda. Inclua códigos hex e explique a psicologia das cores.
Mostre-me as melhores práticas para implementar [componente, e.g., tabelas de dados] em [framework, e.g., React]. Inclua requisitos de acessibilidade, padrões comuns e exemplos de código.
Revise meu [tipo de página/componente] quanto a problemas de acessibilidade. Eu tenho [descreva sua UI]. Quais diretrizes WCAG devo verificar? Forneça um checklist priorizado.
Gere um sistema de design abrangente para um [tipo de produto] direcionado a [público]. Inclua: paleta de cores, escala tipográfica, estilos de componentes, sistema de espaçamento e diretrizes de UX específicas para meu domínio.
Melhores Práticas
- Sempre verifique se as razões de contraste de cores atendem ao mínimo WCAG AA (4.5:1 para texto normal, 3:1 para texto grande) antes de finalizar os designs
- Mantenha consistência em todas as páginas - use o mesmo estilo, paleta de cores e padrões de componentes em toda sua aplicação
- Designe mobile-first: comece com layouts amigáveis ao toque (alvos de 44px+) e escale para telas maiores
- Use nomes semânticos de cores (primária, secundária, erro) em vez de valores hardcoded para permitir theming e suporte a modo escuro
- Teste designs com preferências de movimento reduzido (prefers-reduced-motion) para garantir acessibilidade para usuários com distúrbios vestibulares
Evitar
- Usar emoji como ícones em interfaces de produção - eles renderizam inconsistentemente entre plataformas e carecem de aparência profissional
- Implementar interações apenas com hover sem alternativas de tap/click - exclui usuários de dispositivos touch e cenários de acessibilidade
- Pular estados de loading e skeleton screens - cria problemas de performance percebida e incerteza do usuário durante operações assíncronas
- Hardcodar cores inline em vez de usar design tokens ou variáveis CSS - impede theming e cria sobrecarga de manutenção
- Usar animação para propósitos decorativos sem respeitar prefers-reduced-motion - pode causar desconforto ou náusea em alguns usuários