Design com IA: Claude Design, Loops de Crítica e o Fim do AI Slop

Oito vídeos, de canais diferentes, batem na mesma tecla: se você só manda um prompt solto para uma IA fazer um design, ela devolve “AI Slop”. Design genérico com cara de IA, o mesmo gradiente, os mesmos três cards e a mesma fonte repetida em centenas de sites. Entender por que isso acontece e como estruturar esteiras profissionais de design com loops de crítica é o divisor de águas entre interfaces amadoras e sistemas visuais de alto padrão.

Por que a IA sozinha produz Slop

Três dos criadores explicam o mesmo fenômeno de ângulos distintos, e juntar os três ajuda a entender o problema de verdade.

Anwar Hermuche (Engenheiro de IA) recorre à estatística: um modelo de linguagem foi treinado com trilhões de tokens, ou seja, bilhões de páginas de texto, e código também é texto. Quando você não dá nenhuma instrução específica, o modelo converge para a média estatística daquilo que viu, como uma distribuição gaussiana em que a maioria das pessoas tem altura próxima da média e poucas se desviam muito dela. Para provar isso ao vivo, ele mandou o mesmo prompt genérico (“faça uma landing page para uma padaria” e “faça uma landing page para uma pizzaria”) e os dois sites saíram praticamente idênticos, cores, layout, tudo. Só quando ele aplicou um design system com regras explícitas de cor, tipografia e comportamento de botão é que os resultados se diferenciaram de verdade, inclusive nas animações.

Felipe Borges (Fala IA!), no vídeo sobre a skill oficial /design, descreve o resultado desse “modo padrão” com uma lista concreta de sinais: sempre a mesma tipografia (a família Inter ou qualquer sans-serif genérica), sempre o mesmo gradiente índigo para violeta, sempre a mesma estrutura de hero section, sempre três cards (seja para recursos, preços ou depoimentos), cantos extremamente arredondados com efeito de vidro fosco (“glass”), e um texto sem personalidade que até quem não entende de design reconhece no subconsciente como “escrito por IA”.

Jack Roberts, no canal homônimo, chega à mesma lista por outro caminho: cita cinco sinais recorrentes de slop (tipografia, imagem, hierarquia, cor, espaçamento) e credita a um colega chamado Mike a observação de que os modelos “fazem designs ruins porque nunca viram de verdade como é um bom design”. Em outro vídeo ele detalha o mesmo padrão visual que Felipe descreveu: tipografia repetida, o mesmo degradê índigo-violeta, sempre três cards, tudo arredondado, vidro fosco, e um título que “soa a slop” mesmo quando o texto muda.

A conclusão comum aos três: o problema não é a ferramenta, é a ausência de referência. Sem uma referência concreta, o modelo entrega a média. Com uma referência concreta, ele se desvia dela.

Camada 1: dar “gosto” à IA com um design system

Antes de qualquer coisa, os oito vídeos concordam em um primeiro passo: mostrar para o modelo, de forma concreta, o que “bom” significa.

Jack Roberts usa um catálogo com mais de 2.000 sistemas de design reais (o mesmo site aparece em dois de seus vídeos, ele o descreve como “a fábrica de chocolate do Willy Wonka” do design, com exemplos como Linear, Mercury e Slush). Ele demonstra duas formas de uso: aplicar a estética de um sistema pronto (a Apple, no caso) a uma marca fictícia de shake proteico de titânio, gerando bottle art e paleta de cores só a partir do prompt de texto; e comparar o próprio site (o de sua startup, Glaido) lado a lado com o do Linear, pedindo ao Claude uma análise “impiedosa” que aponta detalhes como espaçamento entre letras solto demais e ausência de uma “escada de elevação” (as camadas de sombra que dão profundidade à interface).

Felipe Borges, no vídeo sobre o Gauntlet Loop, mostra o mesmo primeiro passo dentro do Claude Design: em “Design Systems > Create Design System” você pode arrastar apresentações, carrosséis ou qualquer material que já represente sua marca, ou simplesmente descrever em texto o que quer. O resultado é um documento completo com paleta, tipografia e regras de uso, no exemplo dele o “design system do canal Felipe Borges eIA”.

Anwar Hermuche demonstra o mesmo fluxo criando o design system da própria escola (Dácia): nomeia a empresa, descreve a missão, arrasta arquivos com logo e brandbook, e o Claude Design devolve um documento com backgrounds, gradientes, banco de imagens, variações da logo e até o comportamento de hover dos botões.

Robson Oliveira (Vibe Coding), usando a ferramenta gratuita Open Design (mais adiante neste artigo), segue a mesma lógica: um design system gerado sem nenhuma imagem de referência saiu “básico” e sem graça, na avaliação dele; só quando ele anexou uma referência visual real do Pinterest (um padrão de folhas entrelaçadas) é que o resultado ficou bom o suficiente para servir de base para uma identidade de marca.

Felipe Borges, de novo, no vídeo sobre a skill oficial /design, usa o site refero.design para buscar referências por categoria (educação, por exemplo) e escolhe o Duolingo como modelo para uma página de venda de curso de IA.

O padrão é sempre o mesmo: referência concreta primeiro, prompt depois.

Camada 2: o loop de crítica, a técnica mais repetida do lote

Esta é a peça central do conjunto: estruturar um ciclo contínuo de crítica e refinamento automatizado antes de considerar o design finalizado.

O nome e a origem

Felipe Borges chama a técnica de Gauntlet Loop e credita explicitamente sua popularização a “esse Mat Schumer”. Jack Roberts, em outro canal, descreve a mesma coisa, batiza-a de design loop para o próprio público, mas é honesto sobre a origem: “foi chamada de gauntlet loop por um cavalheiro que a descobriu”, com link para o vídeo original na descrição. Ou seja: mesmo mecanismo, dois nomes, a mesma fonte externa.

Como funciona, passo a passo

A explicação mais detalhada, com o mecanismo desmontado peça por peça, vem de Felipe Borges. A ideia central: quem constrói não deve ser quem avalia, porque o mesmo modelo que acabou de gerar a peça não enxerga o próprio erro. A solução é dividir o trabalho entre agentes com papéis fixos:

Um agente construtor, que gera a peça (site, carrossel, e-mail, o que for).
Um crítico de briefing, cuja única função é perguntar sem parar se o que foi construído é exatamente o que o usuário pediu, pegando alucinações do modelo.
Um crítico de sistema, que verifica se o resultado respeita as regras do design system: cor, fonte, identidade, padrões.
Um crítico visual, que compara o resultado com a referência enviada (seja o próprio design system ou um site externo) e avalia se aquilo está no nível esperado.

Cada crítico devolve correções específicas para o construtor, que ajusta e reenvia, em loop, até o resultado passar em todos os critérios ou até bater um número máximo de rodadas definido de antemão.

Felipe disponibiliza isso como uma skill (skill.md) que, ao ser ativada com /loop the design, primeiro faz uma entrevista (o que você quer construir, que referências tem), depois uma pré-verificação de que todo o material necessário foi enviado, depois desmonta a referência (tipografia, cor, hierarquia) antes de montar o loop propriamente dito. Uma pergunta chave da skill é qual combinação de modelos usar:

Qualidade máxima: construtor em Opus, crítico de briefing em Opus, crítico de sistema em Sonnet, crítico visual em Opus.
Custo-benefício (a opção que ele recomenda): construtor em Sonnet, crítico de briefing em Sonnet, crítico de sistema em Haiku, crítico visual em Opus.
Rápido e econômico, ou uma combinação personalizada.

E a skill pergunta também o número máximo de rodadas do loop, porque sem esse teto o processo pode ficar girando indefinidamente e consumindo tokens. Felipe recomenda começar com cinco rodadas e só aumentar (para sete, dez) se o resultado ainda não estiver satisfatório.

Jack Roberts descreve o mesmo mecanismo com uma variação de três críticos (um valida se a peça atinge o briefing, outro se o design está bom, um terceiro avalia impacto visual), aplicado por exemplo a um e-mail em HTML inspirado em um anúncio de lançamento da Apple. O resultado final ele integra de verdade a um fluxo real: conecta o Claude a uma conta Zapier e pede para criar e enviar o rascunho do e-mail, fechando o ciclo entre “design gerado” e “ação executada”.

Quanto isso custa de verdade

Este é o diferencial real do vídeo de Felipe Borges em relação aos demais: ele mostra os números. Usando a assinatura do Claude (não a API), ele soma o consumo de tokens de cada criação feita durante a gravação:

Um carrossel de Instagram: 293.000 tokens, em cinco rodadas de loop.
Um vídeo explicativo em HTML sobre o próprio Gauntlet Loop: 377.000 tokens, em quatro rodadas, equivalente a cerca de US$ 3,19 se fosse pago via API.
Um site completo inspirado no design da Apple (marca fictícia de roupa tecnológica, “Spider”): US$ 7,54 de custo equivalente, em apenas três rodadas (mais caro por rodada, porque o site é uma peça maior).

A conclusão dele: o Gauntlet Loop entrega de cara um resultado que ele avalia como “nota oito”, quando um prompt solto normalmente sai “nota seis” e exige muitas correções manuais para chegar lá. Mas por gastar tokens de forma real, ele recomenda reservar a técnica para entregas que realmente importam (projetos de cliente, peças que não podem falhar), e não usá-la para qualquer teste ou brincadeira.

A extensão: destilar o design em uma skill reutilizável

Depois de aprovar um resultado pelo loop, Jack Roberts descreve um segundo passo, separado do loop em si, que resolve o que ele chama de “problema da consistência”: como reproduzir o mesmo estilo depois, sem repetir todo o processo de referência.

O método, nas palavras dele: pegue um design que você ama, desmonte-o peça por peça, meça ao invés de apenas descrever, discuta consigo mesmo quais detalhes realmente importam, escreva essas regras num arquivo, escreva testes que uma cópia ruim reprovaria, tente reconstruir o original só a partir das regras escritas, e qualquer coisa que sair errada é uma regra que você esqueceu de anotar. Repita até fechar.

Na prática, ele fez isso com um pôster de conferência de IA inspirado num design do site Savee (um cartaz fictício com participantes conhecidos do mundo de IA, incluindo Andrej Karpathy, Matt Wolfe e Lex Fridman como exemplo de rostos). O processo de desmontagem virou um documento no Notion cobrindo proporções (a razão áurea, 1,618), teoria de cor (regra 60-30-10), “movimentos estranhos” do design, o que está ausente propositalmente, sombras, ícones, curvas e nomes de layout. Esse documento, colado de volta no Claude, vira uma skill reutilizável (no exemplo dele, /poster), que passa a perguntar sozinha pelos elementos que faltam (sujeito, primeiro plano, fundo) toda vez que é chamada para gerar uma nova peça no mesmo estilo.

Ele repete o mesmo tipo de destilação em dois outros formatos, sempre depois de aprovar algo pelo design loop: um site completo (uma versão fictícia “Duolingo da IA”, com sistema de design documentado, incluindo tipografia, botões, inventário de assets, “model sheet” de personagens e paleta de cores) e um motion graphic de 10 segundos no estilo do canal Vox, sobre seu próprio cachorro (um Springer Spaniel), usando a Higsfield para gerar vídeo e a Fish Audio para a narração.

Importante deixar claro: em nenhum dos dois vídeos de Jack Roberts essa destilação aparece batizada com um nome de produto fixo tipo “Design DNA Skill”. Ele descreve o processo como “desconstruir o DNA” do design, de forma informal, e o resultado prático é sempre uma skill nova, nomeada conforme o formato (/poster, e por aí vai). É um passo real e bem documentado, só não tem uma marca própria como o “Gauntlet Loop” tem.

A skill oficial /design dentro do Claude Code

O vídeo mais recente do conjunto, de Felipe Borges, cobre o lançamento pela Anthropic de uma skill oficial chamada /design, que traz para dentro do Claude Code o fluxo de trabalho por artboards que já existia no produto web Claude Design.

Ele demonstra em três níveis:

Nível básico: digitar /design no Claude Code abre a pergunta “o que você quer criar” (páginas, documentos, vídeos). Com um prompt simples (“crie uma landing page para meu curso Fluência, com o F, l e a em maiúsculo”), o resultado sai genérico, visivelmente slop, mas o artboard permite edição direta: trocar fonte, cor do botão, texto, tudo clicando nos elementos, do mesmo jeito que já era possível no Claude Design web. Dá para compartilhar o artboard como um link (como um Google Docs) e exportar como PNG ou HTML quando estiver pronto. Um ponto que ele destaca: o artboard ainda não é um site publicado, é um artefato dentro do Claude, o site de verdade só existe depois de um passo de construção posterior.

Nível avançado: usar uma referência real (ele busca no refero.design por sites de educação e escolhe o Duolingo) muda completamente o resultado. Colando o link do Duolingo e pedindo “crie inspirado nessa referência, eu sou o Duolingo da IA”, o site que sai já tem tipografia, cor e estrutura muito mais específicas, nada parecido com o resultado genérico do nível básico.

Nível “insano”: usa duas skills adicionais além da /design. A primeira, para gerar e aplicar imagens no site (inclusive imagens animadas, com efeito de scroll), usando o MCP da Higsfield como motor (ele avisa que dá para trocar por outro provedor, como a API da OpenAI, se você não tiver conta na Higsfield) e pede explicitamente para o Claude confirmar quantas gerações serão feitas antes de gastar créditos. A segunda skill, dedicada a melhorar todo o texto da página, é apenas citada por Felipe no vídeo, sem detalhamento do método: ele chega a introduzir o assunto (que o texto tem tanto peso quanto o visual para evitar a sensação de slop) mas a gravação corta antes de mostrar o passo a passo dessa segunda skill.

Felipe também explica por que rodar isso dentro do Claude Code é melhor do que usar o Claude Design (produto web) sozinho, com três diferenças concretas:

Contexto: o Claude Code já sabe quem você é, o que vende, para quem, porque tem memória do projeto. No Claude Design web, você precisa reenviar o design system toda vez que abre um projeto novo, porque não há memória entre sessões.
Deploy: o Claude Code consegue publicar o site direto (por exemplo, na Vercel), o Claude Design web não sabe fazer deploy.
Skills: no Claude Code você pode usar e criar qualquer skill sua. No Claude Design web só existe uma lista fixa de skills pré-definidas, sem opção de adicionar as suas.

Geração de imagem, vídeo, narração e animação como parte do processo

Um eixo recorrente nos vídeos de Jack Roberts é conectar o Claude a ferramentas externas de geração visual, já que o próprio Claude não gera imagem.

A Higsfield aparece em quase todos os vídeos dele como motor de imagem e vídeo, conectada via CLI e MCP, usando especificamente o modelo Seedance 2.5 para os vídeos. No nível mais avançado que ele descreve (“design operating system”, rodando localmente como parte de sua própria configuração pessoal), ele mostra: geração de imagem sob demanda escolhendo entre Higsfield, OpenAI e OpenRouter como provedores; indexação de todas as imagens do computador do usuário, pesquisável por palavra-chave; e “receitas de estilo” salvas, isto é, um conjunto de imagens de referência nomeado (por exemplo, um estilo de thumbnail do canal dele) que pode ser reaplicado a pedidos futuros. Ele mostra até o custo por geração dentro dessa interface pessoal (12 centavos de dólar para duas imagens 16:9 em 2K, usando “nano banana 2” como modelo).

Para narração, no motion graphic estilo Vox, ele usa a Fish Audio, justificando a escolha por ser, segundo ele, de três a sete vezes mais barata que alternativas, além de suportar tags de emoção no texto (e um recurso de “auto tag” que insere essas emoções automaticamente) e uma biblioteca grande de vozes, incluindo uma inspirada em Morgan Freeman que, segundo ele, o Claude se recusou a usar por questão de direitos. A conexão com o Claude é feita gerando uma chave de API dentro da própria Fish Audio.

Fora desse eixo, Lorena Bordonaba (Vibe Marketing OS), em espanhol, detalha um fluxo específico para infográficos animados usando Remotion + Claude Code + a biblioteca simple-icons. Vale registrar o passo a passo real que ela mostra, porque é o mais reprodutível do lote:

Criar (ou abrir) um projeto no Claude Code e pedir “instala Remotion no projeto”. O Claude oferece templates prontos (ela cita o “Hello World”) com prévia antes de escolher, ou permite começar em branco.
Instruir o Claude a adotar como regra fixa do projeto (gravada no CLAUDE.md) que, sempre que precisar de um logotipo ou referência de marca, use a biblioteca simple-icons em vez de inventar um logo parecido, porque um dos maiores problemas de infográficos gerados por IA é a IA “alucinar” uma marca falsa.
Buscar uma referência de hierarquia de informação (não de cor ou estilo) no Pinterest, colar a imagem no chat, e pedir que o Claude gere um infográfico animado usando essa referência só para a estrutura, com paleta de cor própria, formato e tamanho definidos, e uma regra específica de animação: cada elemento deve entrar com efeito “hook”, e as linhas conectoras devem ter um movimento fixo em loop infinito. Ela também pede uma assinatura obrigatória (o próprio nome) no rodapé.
O primeiro resultado sai como imagem estática (para não gastar créditos à toa), e só depois de aprovado ela pede a renderização da animação, exportada em MP4 e GIF, salva numa pasta do projeto com nome relacionado ao tema.
Depois de iterar até o design agradar, ela pede para salvar o resultado como um template reutilizável nomeado, e o Remotion passa a listar esses templates num README dentro da pasta out/.
Por fim, ela instala a skill oficial da Anthropic chamada Skill Creator e pede para transformar todo esse fluxo numa skill própria: a partir de uma ideia de conteúdo, a skill escolhe o template mais adequado, estrutura o conteúdo, busca dados que faltarem em fontes oficiais na internet, gera o infográfico e salva em MP4 e GIF com nome e data automáticos.
Com a skill pronta, um único comando (“criar infografia” + a ideia de conteúdo) reproduz o fluxo inteiro. Ela chega a pedir para o Claude publicar o resultado direto no LinkedIn, via um MCP daquela rede, o que ela descreve como mais complexo de configurar que outras integrações.

Um detalhe que ela cita para justificar por que vale a pena sistematizar: só a primeira rodada manual, antes de virar template e skill, já tinha consumido 194.000 tokens de contexto.

Tipografia e copy anti-slop

Dois vídeos tratam o texto do site como parte do problema de design, não como etapa separada.

Jack Roberts, no vídeo sobre sites de US$ 10 mil, dedica um bloco inteiro a fontes: recomenda o fontsinuse.com como referência de como fontes reais se comportam em contextos reais, e mostra, dentro do próprio sistema que construiu, um seletor de fonte recomendada que cruza o “tom” pretendido da marca (confiança, modernidade) com opções gratuitas, sempre lembrando de checar a licença (muitas fontes gratuitas para uso pessoal cobram para uso comercial).

Sobre copy, ele descreve um sistema que roda o texto gerado por um segundo modelo (ele cita “GPT 5.6”) para “descaracterizar” o texto do estilo reconhecível do Claude, porque, segundo ele, a força do Claude em escrita virou também seu maior problema: todo mundo que usa Claude para copy acaba com o mesmo tom perceptível. O sistema também compara a marca com concorrentes do mesmo nicho para identificar o que eles fazem de diferente, e aplica princípios de copywriting citados explicitamente: “don’t make me think” (uma ideia por tela, sem exigir esforço cognitivo do leitor) e “name the pain first” (nomear a dor do usuário antes de vender a solução, princípio que ele atribui ao sistema de marketing de Daniel Priestley). No exemplo dele, essa passada de copy identificou 28 mudanças de linha numa única landing page, trocando frases genéricas (“Get Started”) por versões mais específicas e concretas (“Start your first lesson”, “Five minutes on the train counts” em vez de “Five minutes wherever you are”).

A skill de “melhorar o texto da página” citada por Felipe Borges no vídeo da /design (mencionada na seção anterior) parece cobrir o mesmo território, mas, como já registrado, o vídeo não detalha o método.

Alternativa gratuita: Open Design

Robson Oliveira (Vibe Coding) testa ao vivo uma alternativa gratuita chamada Open Design, acessível pelo site do projeto e pelo repositório no GitHub. Aqui vale ser preciso sobre o que a transcrição confirma e o que não confirma: o vídeo não lê comandos de instalação linha a linha (não há um trecho tipo git clone narrado), o fluxo real mostrado é este:

No site do Open Design há uma vitrine do que a ferramenta constrói (protótipos web, landing pages para SaaS e micro-SaaS, painéis de controle, apps mobile, apps gamificados, carrosséis, entre outros), com 31 skills nativas e design systems prontos incluídos.
O download é feito pela aba Releases do repositório no GitHub, escolhendo o instalador do seu sistema operacional (ele baixa a versão Windows).
É necessário ter o Node.js instalado.
Na primeira execução, a ferramenta pede para você escolher um CLI de IA para conectar: ele cita como opções o Claude Code, o Open Code, além de Kimi, Qwen, Codex e Gemini CLI. Robson escolhe o Open Code, não o Claude Code, explicando que não tem certeza se o Claude Code permite usar modelos gratuitos ou locais de forma confiável, enquanto o Open Code parece mais aberto a isso. Ele testa a conexão com um botão “teste” que fica verde quando está tudo certo.
Escolhe um modelo entre as opções disponíveis (cita Kimi K2.6, modelos Llama, DeepSeek V4 Flash já embutido no Open Code) e opta por usar modelos Minimax, que ele diz ser o que costuma usar.
Muda o idioma da interface para português em Settings > Language.
Cria um novo projeto (no exemplo dele, um design system para uma cliente real de design gráfico, chamado “Design System Eli”), escolhendo um modelo base (“neutral”, “alta fidelidade”).
Escreve um prompt estruturado, evitando o que ele chama de “lazy prompting” (pedidos vagos e curtos que não dão contexto suficiente para a IA entender os detalhes). O exemplo dele: “gere um design system avançado de alta qualidade para um escritório de advocacia focado em público de alta renda”, detalhando paleta de cores, fonte principal com serifa elegante e padrões de marca.

O resultado inicial, sem nenhuma referência visual anexada, saiu, nas palavras dele, “básico” e “aquém do que eu gostaria”: um símbolo genérico que ele não gostou, cores que ele pediu para inverter, posts de exemplo que ele considerou pouco interessantes. Só quando ele anexou uma referência real do Pinterest (um padrão de entrelaçamento de folhas) é que o resultado melhorou visivelmente, a ponto de ele considerar usável como base de um branding.

A avaliação final dele é equilibrada: a ferramenta é gratuita e genuinamente capaz, boa o suficiente como ponto de partida para apresentar a um cliente ou alimentar a criação posterior de um site, mas o resultado bruto, mesmo depois de algumas iterações, ainda fica abaixo do que ele considera um entregável final, e exige mais referências e mais rodadas de ajuste do que o Claude Design pago costuma exigir para o mesmo nível de acabamento. Ele também nota que, usando modelos gratuitos, a geração é sensivelmente mais lenta do que num fluxo pago.

Regra prática

Juntando os oito vídeos, o padrão que se repete não muda: referência visual concreta primeiro, seja um design system próprio, um concorrente específico ou uma marca que você admira; crítica independente depois, um ou mais agentes sem o viés de quem acabou de construir, comparando o resultado com a referência e com o pedido original. O Gauntlet Loop (ou “design loop”, dependendo de qual canal você segue) é a forma mais estruturada de aplicar essa crítica, com um custo real em tokens que vale reservar para entregas que importam. A destilação do “DNA” de um design aprovado numa skill reutilizável resolve o problema seguinte, o de repetir o mesmo estilo sem recomeçar do zero. E a skill oficial /design do Claude Code, de um lado, e o Open Design gratuito, de outro, são dois pontos de entrada diferentes para o mesmo processo, um dentro do ecossistema pago da Anthropic, outro fora dele.

Fontes

“Turn Claude into a Design Genius… Just Watch” — Jack Roberts
“Claude Design Now Builds Beautiful $10,000 Websites (NO AI Slop)” — Jack Roberts
“O Design do Claude acaba de ficar 10 x MELHOR… e é perfeito!” — Felipe Borges - Fala IA!
“CLAUDE DESIGN 2.0: crie SITES, SLIDES e ANIMAÇÕES com a SUA identidade (AULA PRÁTICA!)” — Anwar Hermuche | Engenheiro de IA
“Claude FINALMENTE resolvió las infografías animadas (Adiós IA basura)” — Lorena Bordonaba - Vibe Marketing OS
“CLAUDE DESIGN 100% GRATUITO com método ILIMITADO no Open Design para criar VISUAIS INSANOS” — Robson Oliveira - Vibe Coding
“Claude Design FINALMENTE chegou no Claude Code (e é melhor)” — Felipe Borges - Fala IA!
“Claude Design Just Solved its #1 Problem” — Jack Roberts