/frontend-designDesignInterface com hierarquia, espaçamento e contraste corretos
Vai além de 'fazer funcionar': cobra hierarquia visual, escala de espaçamento consistente e contraste que passa em acessibilidade.
Para: Devs que fazem a própria interface
O que é
É a skill para quem programa bem e desconfia do próprio olho. Ela impõe as decisões que separam uma tela que funciona de uma tela que parece profissional — e que são justamente as que ninguém ensina em curso de framework.
As três que mais rendem: hierarquia (o que o olho vê primeiro, e por quê), escala de espaçamento (usar 4/8/16/24 em vez de números aleatórios) e contraste (texto legível de verdade, não só bonito no seu monitor).
Quando usar
- Você fez a tela, ela funciona, e algo está 'estranho' mas você não sabe apontar o quê
- Não há designer no projeto e a interface é sua responsabilidade
- Para revisar uma tela pronta antes de publicar
- Quando a interface tem muita informação e você precisa organizar densidade
Quando não usar
- Quando existe design system e o Figma já está definido — aí o trabalho é implementar fiel, não redesenhar
- Para decidir o que a tela deve fazer: isso é produto, vem antes
- Como substituto de teste com usuário — bonito e usável não são a mesma coisa
O erro mais comum
Pedir "deixa bonito". Você recebe mudança de cor e sombra, que é a camada mais superficial e a que menos resolve. Peça o problema específico: "essa tela tem três elementos disputando atenção, defina a hierarquia" ou "o espaçamento está inconsistente, aplique uma escala".
E confira o contraste com medição, não com opinião. Cinza claro sobre branco parece elegante e reprova em acessibilidade quase sempre.
Instalação
$ npx skills add anthropics/skillsOutras skills de Design
- /design-motion-principlesAnimação que comunica, não que decoraPrincípios de movimento e interação — duração, curva, propósito. Para animar com intenção em vez de por reflexo.
- /brand-guidelinesManter consistência de marca no que a IA produzAplica paleta, tipografia e regras da marca a qualquer artefato gerado — para o material não sair com cara de template.
- /canvas-designPeças visuais em PNG e PDF com critério editorialGera arte para documento e apresentação seguindo composição, grade e tipografia — em vez de encher de efeito.