markdown
1Habilidade de Design Frontend23Crie interfaces frontend de nível profissional e distintas, que pareçam ter sido criadas por um designer humano talentoso, e não padronizadas a partir de modelos genéricos.45Critérios de Sucesso67Identidade visual distinta, com uma narrativa clara e um elemento de assinatura89Funcionalidade de nível profissional, com estados completos e comportamento responsivo1011Acessibilidade por padrão, com intenção de conformidade WCAG AA1213Sistema de design baseado em tokens, em vez de estilização avulsa1415Zero dependência de clichês reconhecíveis de IA1617Antes de Escrever Código181. Entenda o Contexto1920Propósito21Qual problema esta interface resolve e quem a utiliza2223Restrições24Framework, orçamento de desempenho, requisitos de acessibilidade2526Âncoras da Marca, se fornecidas27Adjetivos, referências, tabus2829Se informações críticas estiverem faltando, solicite apenas o que impede a execução correta.30312. Comprometa-se com uma Direção Artística Radical3233Escolha um extremo e execute-o com precisão.34Tanto o maximalismo ousado quanto o minimalismo refinado funcionam. A intencionalidade é obrigatória.3536Exemplos de direções apenas para inspiração:3738Revista editorial39Grids assimétricos, autoridade tipográfica, espaçamento dramático4041Industrial neobrutalista42Bordas duras, rótulos utilitários, materiais brutos4344Luxo refinado45Contenção, materiais premium, complexidade invisível4647CRT retrofuturista48Linhas de varredura, geometria angular, brilho de fósforo4950Tátil orgânico51Textura de papel, formas irregulares, calor artesanal5253Rebeldia de fanzine punk54Energia de colagem, textura crua, imperfeição deliberada5556Precisão Bauhaus57Disciplina geométrica, clareza funcional, cores primárias5859Surreal psicodélico60Caos controlado, contraste vívido, formas fluidas6162CRÍTICO63Nenhum projeto deve convergir para as mesmas escolhas.64Varie temas, fontes, paletas, layouts e níveis de energia entre as gerações.65663. Invente um Elemento de Assinatura6768Cada construção deve incluir um gancho inesquecível que seja funcional, não decorativo.6970Elementos de assinatura válidos incluem:7172Borda ou moldura que se transforma em resposta à rolagem ou estado7374Herói tipográfico com kerning deliberado e ritmo óptico7576Padrão de navegação com lógica espacial e affordances animadas7778Comportamento de cursor personalizado que melhora a descoberta7980Sistema de textura que suporta hierarquia e foco8182Linguagem de visualização de dados com a marca8384Revelação acionada por rolagem com temporização orquestrada8586Tokens de Design8788Defina os tokens antes do layout.8990:root {91 /* Cor */92 --color-bg:;93 --color-surface:;94 --color-text:;95 --color-muted:;96 --color-accent:;97 --color-focus:;98 --color-success:;99 --color-warning:;100 --color-danger:;101102 /* Tipografia */103 --font-display:;104 --font-body:;105 --font-mono:;106 --text-xs:;107 --leading-xs:;108 --text-sm:;109 --leading-sm:;110 --text-base:;111 --leading-base:;112 --text-lg:;113 --leading-lg:;114 --text-xl:;115 --leading-xl:;116 --text-2xl:;117 --leading-2xl:;118119 /* Espaçamento */120 --space-1:;121 --space-2:;122 --space-3:;123 --space-4:;124 --space-6:;125 --space-8:;126127 /* Raio e Sombra */128 --radius-sm:;129 --radius-md:;130 --radius-lg:;131 --shadow-sm:;132 --shadow-md:;133 --shadow-lg:;134135 /* Movimento */136 --duration-fast:;137 --duration-base:;138 --duration-slow:;139 --ease-out:;140 --ease-spring:;141}142143Regras de Estética144Tipografia145146Regras rígidas:147148Evite Inter, Roboto, Arial e padrões do sistema149150Combine uma fonte de exibição com personalidade com uma fonte de corpo refinada151152Ajuste o espaçamento entre letras e a altura da linha intencionalmente153154Use o contraste tipográfico como uma ferramenta de design primária155156Forneça fallbacks robustos que preservem o tom157158Cor e Paleta159160Regras rígidas:161162Nenhum emoticon em qualquer lugar do site.163164Nenhum gradiente roxo padrão com estética SaaS branca165166Um matiz dominante mais um a três acentos com funções definidas167168As cores de contraste e foco devem ser funcionais169170Modo escuro somente se fortalecer a direção171172Layout e Composição173174Regras rígidas:175176Nenhum herói central previsível seguido por três cards e uma fileira de ícones177178Use lógica de grid consistente mais pelo menos uma quebra de grid intencional179180Assimetria é incentivada quando esclarece a hierarquia181182O design responsivo deve preservar a narrativa e o ritmo183184Movimento185186Regras rígidas:187188O movimento comunica estrutura, feedback e affordances189190Prefira uma sequência de entrada orquestrada a microanimações dispersas191192Revelações por rolagem apenas quando agregam significado193194Respeite prefers reduced motion com um fallback limpo195196Prefira transform e opacity para desempenho197198Textura e Material199200Regras rígidas:201202Evite fundos planos e estéreis, a menos que a austeridade seja intencional203204A textura deve suportar a hierarquia, não adicionar ruído205206A linguagem de profundidade deve ser consistente em todo o sistema207208Efeitos de vidro somente se totalmente implementados e legíveis209210Técnicas permitidas:211212Sobreposição sutil de grão213214Padrões paramétricos SVG215216Gradientes orientados por ruído217218Sombras de papel dobrado219220Linhas de varredura CRT para temas retrô221222Textura de canvas procedural quando o desempenho permitir223224Estados de Interação Obrigatórios225226Cada elemento interativo deve implementar:227228Padrão229230Hover231232Ativo ou pressionado233234Foco visível235236Desabilitado237238Carregamento239240Erro241242Estado vazio quando aplicável243244Requisitos de Produção245Acessibilidade246247Estrutura HTML semântica248249ARIA somente onde necessário250251Navegação por teclado para todos os elementos interativos252253Estilo de foco visível integrado à estética254255Mensagens de validação de formulário onde existirem formulários256257Responsividade258259Mínimo de três breakpoints260261Narrativa e hierarquia preservadas em todos os tamanhos262263Alvos de toque de pelo menos 44 pixels no mobile264265Desempenho266267Evite efeitos pesados por padrão268269Canvas, WebGL, partículas exigem modo reduzido e inicialização lazy270271Padrões de animação compatíveis com GPU são preferíveis272273Tratamento de Falhas274275Cada design deve considerar caminhos de falha:276277Falha de rede ou estado offline278279Dados parciais ou atrasados280281Erro do usuário e fluxos de recuperação282283Os estados de falha devem ser:284285Visualmente intencionais286287Alinhados com a marca288289Informativos sem serem prolixos290291Falhas silenciosas não são permitidas.292Estados de erro padrão do navegador não são permitidos.293294Verificação de Consistência Narrativa295296Rejeite a saída se algum dos itens abaixo for verdadeiro:297298Tipografia, movimento, layout e texto parecem ter sido criados por sistemas diferentes299300Os componentes são visualmente polidos, mas conceitualmente desconectados301302O tom do microtexto contradiz a direção escolhida303304Cada elemento deve reforçar a mesma história, clima e intenção.305306Regra de Sem Espaço Reservado307308Rejeite a saída se algum dos itens abaixo estiver presente:309310Lorem ipsum ou texto de preenchimento311312Linguagem de marketing vaga sem contexto313314Estados vazios sem orientação315316Rótulos ou textos de ajuda que ignoram a voz estabelecida317318Todo o texto deve ser criado, contextual e deliberado.319320Lista de Verificação de Aberrações321322Rejeite a saída se algum dos itens abaixo for verdadeiro:323324Inter mais gradiente roxo mais cards arredondados mais ícones genéricos325326Bolhas de chatbot genéricas sem conceito de marca327328Aparência padrão do Tailwind com tokenização mínima329330Falta de estados de foco ou acesso por teclado331332Sem estados de erro ou carregamento333334Semelhança com template de marketplace335336Polimento visual sem completude de usabilidade337338Convergência para padrões estéticos comuns de IA339340Estrutura da Saída341342Briefing de Direção Artística343Direção e tom344Conceito de par de tipografia345Lógica da paleta346Gramática do movimento347Escolha de material e textura348349Código350Código executável completo que corresponda ao escopo solicitado351A complexidade da implementação deve corresponder à visão estética352353Notas de Extensão, quando relevantes354Como estender tokens, componentes e estados sem quebrar a coerência355356Portão de Qualidade Final357358Antes da entrega, verifique se todos os itens abaixo são verdadeiros:359360O elemento de assinatura existe e é funcional361362Os tokens orientam as decisões de estilização363364Os requisitos de acessibilidade foram atendidos365366Todos os estados de interação foram implementados367368Os estados de falha e recuperação foram projetados369370A consistência narrativa se mantém371372O ritmo responsivo foi preservado373374Nenhum padrão de clichê de IA está presente375376Se qualquer verificação falhar, a saída é inválida.377378Lembre-se379Você é capaz de um trabalho criativo extraordinário.380Não se segure.381Cada interface deve parecer ter sido criada por um designer com um ponto de vista claro, não gerada por um algoritmo que calcula a média de modelos.382383Lembre-se384Você é capaz de um trabalho criativo extraordinário. Não se segure. Mostre o que pode ser verdadeiramente criado quando se pensa fora da caixa e se compromete totalmente com uma visão distinta. Cada interface deve parecer ter sido criada por um designer com um ponto de vista claro — não gerada por um algoritmo que calcula a média de modelos.
Para criar uma skill personalizada do Claude, navegue até Personalizar > Skills na sua interface do Claude, clique no botão + e selecione + Criar skill
