Artboards no Claude Code: a skill /design e como evitar o AI Slop

A Anthropic lançou uma skill oficial pro Claude Code chamada /design, que traz pra dentro do terminal o fluxo de trabalho que antes só existia no Claude Design, a ferramenta web separada. O ponto central dessa skill é o artboard, um tipo de artefato editável que o Claude Code gera e que dá pra ajustar depois, fonte, cor, texto, posição, sem precisar pedir tudo de novo pro modelo. Uso isso há alguns dias em projetos reais e quero mostrar os níveis de uso, do mais básico ao mais refinado, porque a diferença de resultado entre eles é grande.

O que é a skill /design e os artboards

O artboard funciona parecido com um documento do Google Docs. Depois que o Claude Code gera o resultado, ele continua editável, dá pra trocar texto, cor, fonte e posição de elemento direto na interface, sem reescrever o prompt. Também dá pra compartilhar esse artboard com outras pessoas pra revisão, e exportar como PNG ou como HTML.

Um ponto importante pra não confundir, o artboard não é o site publicado. Ele é um documento visual, um protótipo. Pra virar um site de fato, ainda é preciso dar um passo extra, pedir pro Claude Code transformar aquele artboard num site real, com código, rotas e tudo que isso implica. O artboard resolve a parte de design e validação visual, o site em produção é uma etapa separada.

Claude Code vs Claude Design: as diferenças

Como o Claude Design já existia como ferramenta web separada, vale entender onde usar a skill /design dentro do Claude Code faz diferença de verdade.

• Contexto: no Claude Code, a skill usa a memória e o contexto que você já construiu sobre o seu negócio, seu público e seus produtos. No Claude Design, cada projeto novo exige passar esse contexto de novo, ele não guarda nada de uma sessão pra outra.
• Deploy: o Claude Code consegue publicar o site depois de pronto, numa hospedagem, por exemplo. O Claude Design não tem esse caminho, ele para no protótipo.
• Skills: no Claude Code você pode usar e criar qualquer skill customizada pra complementar o fluxo. No Claude Design existe só uma lista fixa de skills pré-definidas, sem opção de adicionar as suas.

Essas diferenças fazem o Claude Code valer mais a pena quando o objetivo final é publicar algo de verdade, não só gerar um protótipo visual isolado.

Nível básico: prompt genérico, resultado genérico

No nível mais simples, basta escrever um prompt direto pro /design pedindo uma landing page. Testei com um curso fictício de IA, e o resultado, embora funcional, tem a cara clássica de AI Slop, tipografia sans-serif padrão, parecida com Inter, paleta em tons de índigo e violeta, a mesma estrutura de hero section, cards em três colunas, cantos arredondados e aquele efeito de vidro translúcido que já virou clichê.

Isso não significa que o resultado é inútil. Como o artboard é editável, dá pra ajustar manualmente depois, trocar a fonte, mudar a cor do botão, reposicionar algum elemento. Mas se o ponto de partida já é genérico, o trabalho de correção fica maior do que precisaria ser.

Nível avançado: referência visual de qualidade

A diferença fica grande quando, em vez de um prompt genérico, você passa uma referência visual de qualidade pro /design. Pra achar essas referências, uso o site refero.design, que permite buscar por categoria, educação, por exemplo.

No teste que fiz, usei o design do Duolingo como referência pra uma landing page de produto educacional de IA. O resultado ficou visivelmente mais específico, com identidade própria, bem distante do padrão genérico que aparece quando não existe referência nenhuma guiando o modelo.

Nível de imagens e copy

O terceiro nível entra em dois pontos que normalmente entregam que um site foi feito com IA, as imagens e o texto.

Pra imagem, existe uma skill que gera e aplica imagens customizadas no site, incluindo imagens animadas, não só estáticas. Ela se conecta a um serviço de geração de vídeo e imagem, algo como Higgsfield, embora eu não tenha certeza absoluta da grafia exata do nome. Quem não tem conta num serviço assim pode usar os modelos de imagem da OpenAI, já que o Claude não gera imagem nativamente. Um detalhe que gostei dessa skill, antes de gastar créditos gerando qualquer imagem, ela pede confirmação de quantas gerações vão ser necessárias antes de seguir adiante, o que evita gasto desnecessário.

Pra texto, existe uma segunda skill, algo como "supercopy", focada em melhorar a copy do site. Ela remove aquele ar de texto gerado por IA e aplica princípios de copywriting consagrados, com inspiração em referências históricas como Ogilvy e Caples. O resultado vem com um relatório mostrando exatamente o que foi alterado e por quê, por exemplo, trocar uma frase vaga por uma promessa mais concreta, com uma métrica clara, como "15 minutos por dia", em vez de uma vaga promessa de resultado. Ela também dá uma nota de antes e depois pra qualidade do texto. Prefiro usar um modelo diferente do Claude especificamente pra essa tarefa de copy, cito o GPT como exemplo, justamente pra fugir da mesma cara de texto que tantos outros sites feitos com Claude acabam tendo.

Resultado final

Juntando os três níveis, o resultado é um site com design específico, não genérico, imagens customizadas geradas especificamente pra aquele projeto, incluindo animações sutis, e um texto revisado com copywriting de qualidade. A combinação desses três elementos dificulta bastante identificar que o site foi feito com IA, que no fim é exatamente o problema que o AI Slop representa, um resultado que entrega de longe de onde saiu.