SkillProgramaçãoCriação
Design de Frontend Anti-Genérico
Cria interfaces de frontend distintas e prontas para produção, com direção estética ousada e atenção meticulosa aos detalhes — nunca o visual genérico de IA. Use ao construir componentes, páginas, dashboards ou landing pages que precisam parecer intencionais.
Ações
PerfilDesigner
ProfundidadeAlta
IdiomaInglês (skill original)
Objetivo
Em uma frase.
Produzir interfaces de frontend marcantes e de nível de produção que fujam da estética genérica de IA, entregando código real e funcional com atenção excepcional aos detalhes estéticos e às escolhas criativas.
Aplicação
Quando
faz sentido.
Usar
- Construir componente web, página, dashboard, landing page ou aplicação
- Estilizar ou embelezar uma UI existente que parece genérica
- Gerar artefatos React / HTML / CSS / Vue que devem parecer intencionais
- Quando a camada visual importa — não é uma skill para formulários CRUD
Não usar
- Skills puramente de backend / API — use claude-api, api-designer etc.
- Conceitos de campanha de marketing — use creative-director em Marketing
- Aplicação de marca sobre templates já existentes — use brand-guidelines
Prompt
Instruções
para a IA.
### Pensar o design antes de codar
Defina o propósito (que problema a interface resolve e quem a usa), o tom (escolha um extremo: minimalismo brutal, maximalismo, retrofuturismo, editorial, brutalista etc.), as restrições (framework, performance, acessibilidade) e a diferenciação (o que torna a interface inesquecível). Escolha uma direção conceitual clara e execute com precisão.
### Diretrizes estéticas
Tipografia distintiva: pareie uma fonte de display com uma fonte de corpo refinada — evite Arial, Inter, Roboto e fontes de sistema. Cor coesa com variáveis CSS; cores dominantes com acentos marcantes superam paletas tímidas. Movimento focado em momentos de alto impacto (um carregamento de página bem orquestrado encanta mais que microinterações dispersas). Composição espacial inesperada: assimetria, sobreposição, quebra de grid.
### Checklist anti-slop
Nunca use: gradientes roxos sobre fundo branco, o hero centralizado padrão com título, subtítulo e dois botões, grids de cards previsíveis ou "Space Grotesk para tudo". Comprometa-se com uma única direção estética por interface, varie entre gerações e sempre entregue código real e funcional — não anotações de Figma.
Defina o propósito (que problema a interface resolve e quem a usa), o tom (escolha um extremo: minimalismo brutal, maximalismo, retrofuturismo, editorial, brutalista etc.), as restrições (framework, performance, acessibilidade) e a diferenciação (o que torna a interface inesquecível). Escolha uma direção conceitual clara e execute com precisão.
### Diretrizes estéticas
Tipografia distintiva: pareie uma fonte de display com uma fonte de corpo refinada — evite Arial, Inter, Roboto e fontes de sistema. Cor coesa com variáveis CSS; cores dominantes com acentos marcantes superam paletas tímidas. Movimento focado em momentos de alto impacto (um carregamento de página bem orquestrado encanta mais que microinterações dispersas). Composição espacial inesperada: assimetria, sobreposição, quebra de grid.
### Checklist anti-slop
Nunca use: gradientes roxos sobre fundo branco, o hero centralizado padrão com título, subtítulo e dois botões, grids de cards previsíveis ou "Space Grotesk para tudo". Comprometa-se com uma única direção estética por interface, varie entre gerações e sempre entregue código real e funcional — não anotações de Figma.
Constelação
Onde
ela vive.
Bundles que incluem
Execução
Como usar
com IA.
- 01Copie a skill (botão "Copiar skill para IA", no topo): o texto copiado já é a skill completa, não um resumo.
- 02Abra o Claude ou Claude Code e cole — a IA recebe todas as instruções e fica pronta para a tarefa.
- 03Prefere usar como arquivo reutilizável? Baixe o .zip e coloque o
SKILL.mdem.claude/skills/(Claude Code) ou anexe o arquivo no Claude (claude.ai).