🎨 Por que o padrão sai genérico

Novo aqui? Front-end é a parte de um site ou aplicativo que a pessoa vê e toca na tela — botões, cores, textos, layout. É diferente do "back-end", que é o motor por trás (banco de dados, regras de negócio) que ninguém vê diretamente. Quando este módulo fala em "o site que o agente produz", está falando do front-end.

Você já deve ter visto: fundo branco ou cinza-clarinho, um título grande e centralizado, um botão azul com cantos arredondados escrito "Get Started" ou "Saiba mais", ícones genéricos, tipografia do sistema. Não importa o assunto do site — receita de bolo, currículo, loja de roupa — o resultado padrão de um agente de IA sem instrução visual tende a essa MESMA cara. Isso já tem apelido entre quem trabalha com IA: "cheiro de IA" (no original em inglês, "AI slop" ou "AI smell") — o visual que denuncia, à primeira vista, que ninguém colocou a mão ali.

Novo aqui? Um modelo de IA (o "cérebro" que interpreta seu pedido e gera o resultado) foi construído num processo chamado treinamento: mostraram a ele milhões de exemplos reais — nesse caso, milhões de páginas de front-end escritas por gente do mundo inteiro — e ele aprendeu os padrões que mais se repetem nesses exemplos. Ele não "decorou" um site específico; ele aprendeu estatisticamente o que costuma vir depois do quê.

Isso tem uma consequência direta: quando você pede algo vago ("faz um site bonito"), o modelo não tem de onde escolher — então ele converge para a resposta mais provável, ou seja, a média estatística de tudo que ele já viu. E a média de milhões de sites de front-end tende ao mesmo lugar: azul (cor mais usada em botões de CTA no mundo todo), branco (fundo mais seguro e mais comum), fonte do sistema (a que sempre funciona sem configurar nada). Não é preguiça do modelo — é matemática de probabilidade fazendo exatamente o que foi treinada pra fazer.

Legenda: em cima, o pedido vago cai na média de tudo que o modelo já viu e sai genérico; embaixo, o mesmo pedido com referência visual preenche o vazio com a sua cara em vez da média — essa é a diferença que os módulos 5.2 e 5.5 vão te ensinar a construir.

Há uma segunda causa, tão importante quanto a primeira: o agente que escreve o código de um site não necessariamente vê o resultado. Um prompt (o pedido em texto que você digita pro agente) descreve o que você quer em palavras — mas texto não é imagem. A menos que alguém force o agente a tirar um print da tela e olhar pra ele como um designer olharia, ele está trabalhando "às cegas": escrevendo HTML e CSS certos tecnicamente, mas sem checar se aquilo ficou bonito, equilibrado, com a personalidade certa.

Junte as duas causas e você entende o problema por inteiro: (1) sem referência de marca, cores ou exemplo visual, o modelo preenche os vazios com o que é estatisticamente "seguro" nos dados de treino; (2) sem alguém — ou algo — forçando um olhar crítico sobre o resultado, nada corrige esse primeiro instinto. As duas causas juntas é que explicam o "cheiro de IA" — e as duas têm solução, que é justamente o resto desta trilha.

Para deixar isso concreto, veja a mesma tarefa — "criar a landing page de uma padaria de bairro" — pedida de dois jeitos diferentes. O texto abaixo descreve o que sairia de cada pedido, ponto a ponto, exatamente como um designer descreveria dois wireframes (esboço simplificado de layout, sem detalhes finais) colocados lado a lado.

Legenda: mesma tarefa, dois resultados. À esquerda, sem cor/fonte/foto de referência, o modelo cai na média (azul, arredondado, ícone genérico). À direita, com a paleta terracota/creme da padaria e uma foto real do produto informadas no pedido, o resultado já nasce com identidade — sem precisar de "mais criatividade", só de mais informação.

A melhor forma de internalizar este módulo é ver o fenômeno com as próprias mãos, uma vez só, antes de aprender a evitá-lo. Objetivo: confirmar, no seu próprio Claude Code, que um pedido vago de front-end realmente cai no padrão genérico descrito acima — sem nenhuma instrução de estilo, cor ou marca.

Crie uma landing page em HTML/CSS para 
com um formulário de contato e uma seção de depoimentos. Não me dê nenhuma cor, fonte ou
referência de estilo — decida você mesmo o visual.

Resultado típico: fundo branco/cinza-claro, título centralizado em negrito, botão azul arredondado escrito algo como "Get Started" ou "Fale conosco", cartões de depoimento idênticos entre si, fonte do sistema. Se o seu resultado bater com essa descrição — como bate na grande maioria dos casos — você acabou de reproduzir o fenômeno deste módulo.

Você acabou de ver as duas causas do problema: falta de referência visual, e falta de um critério automático de "olhar" pro resultado. Os dois próximos módulos atacam exatamente essas duas causas, nessa ordem.