impeccable
Crie interfaces frontend polidas com IA
Interfaces geradas por IA frequentemente parecem genéricas e baseadas em templates. O Impeccable orienta a IA através de decisões de design especializadas, produzindo código frontend diferenciado e de qualidade profissional.
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "impeccable". Criar uma seção hero para um portfólio de agência criativa com tipografia ousada e layout assimétrico
Resultado esperado:
Uma seção hero responsiva com tipografia fluida usando clamp(), um layout de grade assimétrico com espaçamento variado, um emparelhamento de fontes distintas escolhido através do procedimento de seleção de fontes, e uma hierarquia visual clara que passa no 'squint test'.
A utilizar "impeccable". Extrair tokens reutilizáveis de uma página com valores de cor inconsistentes
Resultado esperado:
Um sistema de tokens de design coeso com cores primitivas baseadas em OKLCH, escalas neutras tintadas, mapeamentos semânticos de cores para cores primárias e de status, e orientações documentadas sobre quando usar cada token.
A utilizar "impeccable". Design de um formulário de contato acessível com validação adequada
Resultado esperado:
Um formulário com rótulos visíveis, validação ao blur, mensagens de erro descritivas com aria-describedby, anéis de foco adequados usando focus-visible, e alvos de toque dimensionados apropriadamente para usuários móveis.
Auditoria de Segurança
Baixo RiscoAll 329 static findings are false positives. The scanner misinterpreted Markdown code fences as shell commands, design terminology as cryptographic patterns, and documentation URLs as network risks. The only real operational risk is a post-update cleanup script that removes deprecated skill files from the filesystem, which is benign and documented to the user before execution. No malicious intent, data exfiltration, or dangerous code execution detected.
Problemas de Baixo Risco (1)
Fatores de risco
⚙️ Comandos externos (1)
📁 Acesso ao sistema de arquivos (3)
Pontuação de qualidade
O Que Você Pode Construir
Redesign de site de marketing
Um fundador de startup quer que sua landing page se destaque do mar de templates SaaS idênticos. O Impeccable orienta a IA através de uma direção estética ousada com tipografia e escolhas de cores distintas.
Bootstrap de sistema de design
Um desenvolvedor precisa extrair tokens de design consistentes, componentes e padrões de uma base de código existente para um sistema de design reutilizável. O modo de extração identifica padrões reutilizáveis e os formaliza.
Design de formulários e interações acessíveis
Uma equipe de produto precisa de formulários, estados de foco, padrões de carregamento e navegação por teclado adequadamente projetados. O Impeccable fornece material de referência sobre conformidade com WCAG, a API Popover e design de anel de foco.
Tente Estes Prompts
Execute /impeccable teach para reunir o contexto de design do meu projeto. Escaneie a base de código primeiro e, em seguida, faça-me as perguntas que ainda precisam ser respondidas.
Execute /impeccable craft uma página de preços para um produto SaaS. O público-alvo são pequenos proprietários de negócios que valorizam clareza e velocidade. O tom da marca é confiante, prático e direto.
Execute /impeccable extract os tokens de design compartilhados e componentes reutilizáveis da minha biblioteca de componentes existente. Foque em cores, espaçamento, tipografia e variantes de botões.
Execute /impeccable craft um dashboard em modo escuro para uma ferramenta de observabilidade usada por SREs. A interface precisa ser densa em informações, mas legível, com uma paleta de cores suaves e uma hierarquia forte de visualização de dados.
Melhores Práticas
- Sempre reúna o contexto de design do usuário antes de gerar qualquer trabalho de design. Verifique as instruções existentes, então .impeccable.md, e depois execute o fluxo de teach.
- Comprometa-se com uma direção estética ousada em vez de recuar para padrões genéricos e seguros. Tanto o maximalismo quanto o minimalismo funcionam quando executados com intencionalidade.
- Execute o teste de AI slop em cada saída: alguém reconheceria imediatamente isso como gerado por IA? Se sim, o design precisa de escolhas criativas mais distintas.
Evitar
- Usar fontes reflexivas como Inter, Fraunces, Space Grotesk e Cormorant que criam monocultura em projetos gerados por IA.
- Usar como padrão gradientes de ciano-em-escuro, roxo-para-azul, ou acentos brilhantes em fundos escuros, que são as pistas de design de IA mais reconhecíveis.
- Usar listras de acento border-left em cards, texto em gradiente e glassmorphism como decoração, que são explicitamente banidos como padrões de 'AI slop'.
Perguntas Frequentes
Quando devo invocar o Impeccable?
Qual é a diferença entre os modos craft, teach e extract?
O Impeccable funciona com React, Vue ou outros frameworks?
Como o Impeccable previne designs genéricos com aparência de IA?
O Impeccable pode ajudar com conformidade de acessibilidade?
O que acontece quando atualizo para uma nova versão do Impeccable?
Detalhes do Desenvolvedor
Autor
pbakausLicença
Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution.
Referência
main
Estrutura de arquivos