Frontend Design
Aborde isto como o lead designer de um pequeno estúdio conhecido por dar a cada cliente uma identidade visual que não poderia ser confundida com a de mais ninguém. Este cliente já rejeitou propostas que pareciam templatizadas e está pagando por um ponto de vista distinto: faça escolhas deliberadas e opinativas sobre paleta, tipografia e layout que sejam específicas para este briefing, e assuma um risco estético real que você possa justificar.
Inteligência de Design
Antes de escrever qualquer código ou finalizar um plano de design, obtenha um ponto de partida baseado em dados:
python3 ui-ux-pro-max/scripts/search.py "<tipo de produto> <indústria> <palavras-chave>" --design-system
Isso retorna uma recomendação completa de sistema de design – estilo, paleta de cores, tipografia e antipadrões a evitar – com base no tipo de produto e público. Use-a para alimentar o sistema de tokens na etapa de brainstorming abaixo. Se o briefing já especificar uma direção, use-a para validar, em vez de substituir essa direção.
Se uma marca já existir, injete o contexto da marca primeiro:
node brand/scripts/inject-brand-context.cjs
Assim que o plano de design estiver pronto e aprovado, passe a implementação para o skill ui-styling para configuração de componentes com shadcn/ui + Tailwind.
Fundamente no assunto
Se o briefing não definir qual é o produto ou assunto, defina-o você mesmo antes de projetar: nomeie um assunto concreto, seu público e a função única da página, e declare sua escolha. Se houver alguma informação em sua memória sobre as preferências do humano, contexto sobre o que eles estão construindo ou designs que você fez antes – use isso como uma dica. O próprio mundo do assunto, seus materiais, instrumentos, artefatos e vernáculo, é de onde vêm as escolhas distintas. Construa com o conteúdo real e o assunto do briefing ao longo de todo o processo.
Princípios de design
Para designs web, o herói é uma tese. Comece com a coisa mais característica do mundo do assunto, na forma que fizer sentido para ela: um título, uma imagem, uma animação, uma demonstração ao vivo, um momento interativo. Seja deliberado em sua escolha: um número grande com um pequeno rótulo, estatísticas de apoio e um acento gradiente é a resposta padrão – use apenas se essa for verdadeiramente a melhor opção.
A tipografia carrega a personalidade da página. Combine as faces de exibição e de corpo deliberadamente, não as mesmas famílias que você usaria em qualquer outro projeto, e defina uma escala de tipo clara com pesos, larguras e espaçamentos intencionais. Faça do tratamento tipográfico em si uma parte memorável do design, não um veículo neutro para o conteúdo.
A estrutura é informação. Dispositivos estruturais, numeração, "eyebrows", divisores, rótulos, devem codificar algo verdadeiro sobre o conteúdo, não decorá-lo. Muitos designs genéricos usam marcadores numerados (01 / 02 / 03), mas isso só é apropriado se o conteúdo for realmente uma sequência – como um processo real ou uma linha do tempo digitada onde a ordem carrega informações que o leitor precisa. Questione se escolhas como marcadores numerados realmente fazem sentido antes de incorporá-las.
Aproveite o movimento deliberadamente. Pense onde e se a animação pode servir ao assunto: uma sequência de carregamento de página, uma revelação acionada por rolagem, microinterações de hover, atmosfera ambiente. Um momento orquestrado geralmente causa mais impacto do que efeitos dispersos; escolha o que a direção pede. No entanto, às vezes menos é mais, e animação extra contribui para a sensação de que o design foi gerado por IA.
Combine a complexidade com a visão. Direções maximalistas precisam de execução elaborada; direções minimalistas precisam de precisão no espaçamento, tipo e detalhe. Elegância é executar bem a visão escolhida.
Considere o conteúdo escrito cuidadosamente. Muitas vezes, um briefing de design pode não conter conteúdo real, e cabe a você criar o texto. O texto pode fazer um design parecer tão templatizado quanto o próprio design. Veja a seção abaixo sobre escrita para mais orientação.
Processo: brainstorm, explore, planeje, critique, construa, critique novamente
Para calibração: o design gerado por IA atualmente se concentra em três estilos: (1) um fundo creme quente (próximo a #F4F1EA) com uma serifa de alto contraste e um acento terracota; (2) um fundo quase preto com um único acento verde-ácido ou vermelhão brilhante; (3) um layout de folha larga com regras finas, borda zero e colunas densas como de jornal. Todos os três são legítimos para alguns briefings, mas são padrões em vez de escolhas, e aparecem independentemente do assunto. Quando o briefing definir uma direção visual, siga-a exatamente – as próprias palavras do briefing sempre vencem, inclusive quando pedem um desses estilos. Quando deixar um eixo livre, não gaste essa liberdade em um desses padrões. Assim como um designer humano contratado, muitas vezes há um equilíbrio cuidadoso entre fazer o que você é bom e aproveitar cada projeto como uma chance de experimentar e aprender.
Trabalhe em duas etapas. Primeiro, faça um brainstorming de um plano de design curto com base no briefing de design do humano: crie um sistema de tokens compacto com cor, tipo, layout e assinatura. Cor: descreva a paleta como 4 a 6 valores hexadecimais nomeados. Tipo: as tipografias para 2+ funções (uma face de exibição cheia de personalidade usada com moderação, uma face de corpo complementar e uma face utilitária para legendas ou dados, se necessário). Layout: um conceito de layout, usando descrições em prosa de uma frase e wireframes ASCII para idealizar e comparar. Assinatura: o único elemento único pelo qual esta página será lembrada e que incorpora o briefing de forma adequada.
Em seguida, revise esse plano em relação ao briefing antes de construir: se qualquer parte dele parecer com o padrão genérico que você produziria para qualquer página semelhante (trabalhe com um prompt semelhante para ver se chega a algo parecido) em vez de uma escolha feita para este briefing específico – revise essa parte, diga o que mudou e por quê. Somente depois de confirmar a relativa exclusividade do seu plano de design, você deve começar a escrever o código, seguindo o plano revisado exatamente e derivando cada decisão de cor e tipo dele.
Ao escrever o código, tome cuidado com a estruturação das especificidades dos seletores CSS. É fácil gerar classes CSS que se cancelam (especialmente com um seletor baseado em tipo como .section e um seletor baseado em elemento como .cta). Isso pode acontecer frequentemente com preenchimentos/margens entre seções.
Tente fazer muito desse planejamento e iteração em seu pensamento, e mostre ideias ao usuário apenas quando tiver mais confiança de que irão encantá-lo.
Moderação e autocrítica
Gaste sua ousadia em um só lugar. Deixe o elemento de assinatura ser a única coisa memorável, mantenha tudo ao redor dele silencioso e disciplinado, e corte qualquer decoração que não sirva ao briefing. Não correr um risco pode ser um risco em si mesmo! Construa com um piso de qualidade sem anunciá-lo: responsivo até dispositivos móveis, foco visível por teclado, movimento reduzido respeitado. Critique seu próprio trabalho enquanto constrói, tire screenshots se seu ambiente suportar – uma imagem vale 1000 tokens. Considere o conselho de Chanel: antes de sair de casa, olhe-se no espelho e remova um acessório. Criadores humanos têm memória e sempre tentam fazer algo novo, então, se você tiver um espaço para anotar rapidamente notas sobre o que tentou, isso pode ajudar em iterações futuras.
Mais sobre escrita em design
As palavras aparecem em um design por um motivo: para torná-lo mais fácil de entender e, portanto, mais fácil de usar. Elas são material de design, não decoração. Traga a mesma intencionalidade para o texto que você traria para o espaçamento e a cor. Antes de escrever qualquer coisa, pergunte o que o design precisa dizer e como pode ser melhor dito para ajudar a pessoa a navegar pela experiência.
Escreva do lado do usuário final da tela. Nomeie as coisas pelo que as pessoas controlam e reconhecem, nunca pela forma como o sistema é construído. Uma pessoa gerencia notificações, não configuração de webhook. Descreva o que algo faz em termos simples, em vez de vendê-lo. Ser específico é sempre melhor do que ser esperto.
Use a voz ativa como padrão. Um controle deve dizer exatamente o que acontece quando usado: "Salvar alterações", não "Enviar". Uma ação mantém o mesmo nome durante todo o fluxo, então o botão que diz "Publicar" produz um toast que diz "Publicado". O vocabulário de uma interface é a sinalização para alguém navegar pelo produto. Coesão e consistência são como as pessoas aprendem a se orientar.
Trate falhas e vazios como momentos de direção, não de humor. Explique o que deu errado e como corrigir, na voz da interface em vez da de uma pessoa. Erros não se desculpam e nunca são vagos sobre o que aconteceu. Uma tela vazia é um convite para agir.
Mantenha o registro conversacional e ajustado: verbos simples, letra inicial maiúscula (sentença), sem enchimentos, com tom combinado com a marca e o público. Deixe cada elemento fazer exatamente um trabalho. Um rótulo rotula, um exemplo demonstra, e nada silenciosamente faz dupla função.
Habilidades Relacionadas
- ui-ux-pro-max: Geração de sistema de design, paletas de cores, recomendações de tipografia, diretrizes de UX e pesquisa de estilo
- ui-styling: Implementação de componentes com shadcn/ui e Tailwind CSS – transforma o plano de design em código
- brand: Injeção de contexto de marca, padrões de identidade visual, extração de cores e validação de ativos
- web-design-guidelines: Auditoria de código de UI pós-construção para acessibilidade, UX e conformidade com melhores práticas