frontend-design

Adaptado da frontend-design oficial da Anthropic para OpenDesign.

Use esta habilidade quando o usuário pedir para construir ou melhorar uma interface frontend: um site, landing page, dashboard, tela de aplicativo, artefato HTML/CSS, componente React/Vue/Svelte ou um redesenho visual de uma UI existente.

O objetivo não é apenas "tornar mais bonito". O objetivo é entregar código frontend funcional com um ponto de vista de design claro, forte habilidade técnica e detalhes de produto suficientes para que o resultado pareça projetado para o contexto real do usuário.

Fluxo de Trabalho

1. Entenda o briefing antes de escolher o visual.

   • Identifique o público, a tarefa principal, o domínio e o tom emocional.
   • Observe quaisquer restrições técnicas: framework, estilos existentes, acessibilidade, desempenho, alvo de exportação ou requisitos de responsividade.
   • Se o repositório já tiver tokens de design, componentes, capturas de tela ou um DESIGN.md, use-os como fonte da verdade.

2. Comprometa-se com uma direção estética específica.

   • Escolha uma direção que se encaixe no produto: brutalmente minimalista, editorial, luxuosa, divertida, industrial, retrofuturista, operacional densa, corporativa calma, artística para o consumidor ou outra direção precisa.
   • Torne a direção concreta através de tipografia, espaçamento, cor, hierarquia, movimento e forma dos componentes.
   • Evite padrões genéricos de IA: gradientes roxo-azul, cartões de vidro vagos, layouts de SaaS intercambiáveis, cartões excessivamente arredondados, linhas de ícones de estoque e bolhas decorativas que não servem à interface.

3. Projete a interface real, não um pôster de placeholder.

   • Inclua os controles, estados vazios/carregando/erro, tabelas, filtros, navegação e comportamento responsivo que um usuário real esperaria.
   • Use conteúdo honesto. Se os dados forem desconhecidos, rotule-os como amostra, pendente ou indisponível em vez de inventar alegações.
   • Mantenha os fluxos de trabalho eficientes para o usuário alvo. Dashboards e ferramentas devem ser escaneáveis e densos o suficiente para uso repetido; páginas de marketing podem ser mais expressivas.

4. Construa código frontend de nível de produção.

   • Prefira o framework existente do repositório, convenções de componentes, ícones, tokens e abordagem de estilo.
   • Para artefatos autônomos, crie HTML/CSS/JS autocontidos, a menos que o usuário tenha solicitado um framework.
   • Use marcação semântica, controles acessíveis por teclado, estados de foco visíveis, contraste sensato e restrições de layout responsivo.
   • Use variáveis CSS para cores repetidas, espaçamento, sombras e escala de tipo.

5. Refine o ofício visual.

   • Tipografia: escolha pares de fontes expressivos, mas legíveis. Evite usar pilhas de sistema padrão como a ideia visual principal, a menos que a direção seja intencionalmente utilitária.
   • Cor: crie uma paleta equilibrada com clareza de função. Use cor de destaque de forma esparsa e deliberada.
   • Layout: use alinhamento, ritmo, densidade e espaço negativo intencionalmente. Não deixe cartões, painéis ou rótulos à deriva.
   • Movimento: adicione transições intencionais para mudanças de estado, revelações e feedback. Prefira transformações e opacidade para desempenho.
   • Detalhes: use textura, bordas, sombras, divisores, mídia e iconografia apenas quando eles apoiarem o conceito.

6. Auto-revisão antes da entrega final.

   • A interface funciona em larguras de celular e desktop.
   • O texto cabe em seus contêineres e não se sobrepõe à UI adjacente.
   • Elementos interativos têm estados de hover/foco/ativo/desabilitado.
   • O design evita tropos visuais óbvios gerados por IA.
   • O resultado tem uma qualidade memorável que um usuário poderia descrever após fechar a página.

Integração OpenDesign

Quando o OpenDesign fornecer um sistema de design ativo, trate-o como o contrato de marca do produto. Use a orientação de cor, tipografia, layout e componentes injetados primeiro, e depois aplique as regras de ofício frontend desta habilidade onde o sistema de design for omisso.

Quando o OpenDesign injetar referências de ofício como typography, color e anti-ai-slop, aplique essas verificações antes de finalizar. Se a orientação de marca do usuário entrar em conflito com uma regra de ofício genérica, a orientação de marca do usuário prevalece.

Fonte

• Upstream: https://github.com/anthropics/skills/tree/main/skills/frontend-design
• Categoria: web-artifacts

Licença

Esta habilidade é adaptada do repositório oficial de habilidades da Anthropic. Veja LICENSE.txt nesta pasta para os termos da licença Apache-2.0 upstream.