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.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“impeccable”。 Criar uma seção hero para um portfólio de agência criativa com tipografia ousada e layout assimétrico
预期结果:
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'.
正在使用“impeccable”。 Extrair tokens reutilizáveis de uma página com valores de cor inconsistentes
预期结果:
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.
正在使用“impeccable”。 Design de um formulário de contato acessível com validação adequada
预期结果:
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.
安全审计
低风险All 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.
低风险问题 (1)
风险因素
质量评分
你能构建什么
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.
试试这些提示
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.
最佳实践
- 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.
避免
- 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'.
常见问题
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?
开发者详情
作者
pbakaus许可证
Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution.
引用
main