Essa skill do Claude Code faz designs IRRESISTÍVEIS

Como transformar landing pages genéricas “feitas por AI” em designs bonitos e distintos

Eu descobri um negócio que tá mudando completamente o jeito que eu crio interfaces com AI, e esse negócio é a skill de frontend design da Anthropic (basicamente um playbook que ensina seu coding assistant a fazer designs bonitos de verdade) - que não à toa é uma das skills mais instaladas no mundo com mais de 73 mil instalações. A diferença entre usar e não usar essa skill é a diferença entre criar uma página genérica “cara de AI” e criar algo com identidade visual forte e profissional.

Testei ela na prática e o antes/depois foi tão absurdo que eu precisei gravar um vídeo inteiro sobre isso. A diferença não é só meramente estética. Essa skill te ajuda a criar algo que tenha identidade, que seja memorável, e que não pareça mais uma landing page genérica / AI slop.

Vou te mostrar exatamente como usar essa skill no seu projeto e transformar seus designs de “meh” para “UAU”.

O que é uma “skill”?

Antes de mais nada, se você ainda não tá familiarizado com o conceito de skills: pensa que uma skill é como se fosse um playbook que sua AI vai ler quando precisar fazer alguma coisa.

Você pode ter inúmeras skills instaladas no seu coding assistant. E diferente do system prompt (que é lido toda vez que você envia um prompt), a skill só vai ser carregada no contexto certo.

Por exemplo: se você disser no prompt que precisa fazer um design e o Claude Code vê que você tem uma skill de design instalada, aí ele vai ler a skill para entender como fazer design do jeito certo.

Eu inclusive já mostrei por aqui a skill do Remotion (que ensina o Claude Code a fazer animações com React). É o mesmo princípio, só que nesse outro caso, o “playbook” ensinava o Claude code a criar animações com o Remotion.

Sem skill vs. com skill

Para vocês entenderem o impacto dessa skill, eu fiz um teste prático com uma landing page pro meu projeto.

Primeiro round: SEM a skill de frontend design

Peguei um arquivo markdown com toda a copy da página (seção hero, social proof, comparação com concorrentes, features, como funciona, depoimentos, FAQ, etc.) e pedi pro Claude Code criar a landing page.

O resultado? Bem... funcionou. Tem todos os elementos que eu pedi. Mas:

Deborah Folloni | Youtube

• Layout genérico

• Cores sem personalidade

• Tipografia padrão

• Zero identidade

• 100% cara de AI

É aquela página que poderia ser literalmente de qualquer produto. Não tem alma. Não tem diferenciação.

Segundo round: COM a skill de frontend design

Aí eu instalei a skill de frontend design, criei alguns assets básicos da marca (logo dark, logo light, paleta de cores, tipografia), e pedi pro Claude Code melhorar o design usando a skill e aplicando os assets da minha marca, e o resultado foi completamente diferente:

Deborah Folloni | Youtube

• Design sofisticado e distinto

• Cores da marca aplicadas estrategicamente

• Tipografia com hierarquia clara (fonte marcante pros títulos, fonte legível pro corpo)

• Micro-interações (hover effects, animações sutis)

• Identidade visual forte

Não se esqueça de criar uma identidade visual

Uma coisa que, sem dúvidas, faz muita diferença é ter uma identidade visual básica para o seu projeto antes de usar essa skill.

Você não precisa ser designer pra fazer isso! Eu já ensinei em uma outra edição da minha newsletter como criar essa mini identidade visual mesmo sem habilidade nenhuma de design.

Como criar uma identidade visual premium usando IA (gastando zero reais)

Você só precisa do básico:

• Logo (com versão dark e light)

• Paleta de cores (3-5 cores principais com seus códigos hex)

• Tipografia (uma fonte pra títulos, outra pro corpo do texto)

• Conceito visual (ex: montanhas, tecnologia, minimalismo)

Eu fiz isso pro meu projeto em menos de 30 minutos usando ferramentas de AI. E o resultado foi suficiente pra dar uma identidade forte pra página.

Por que isso importa? Porque sem essa identidade básica, ainda que essa skill de frontend design deixe seu projeto BONITO, ele não vai ficar DISTINTO - ou seja, seu projeto vai ficar parecido com todo mundo. A skill potencializa sua identidade, mas você precisa ter uma identidade para potencializar 😉

Como instalar e usar a skill

A instalação é super simples. Existem vários diretórios de skills por aí, mas eu gosto muito do skills.sh (feito pela Vercel). Ele também mostra quantas instalações cada skill teve - o que ajuda a identificar quais skills realmente valem a pena.

skills.sh

Instalação

Você tem duas opções:

Opção 1: Rodar no terminal

npx skills add https://github.com/anthropics/skills --skill frontend-design

Opção 2: Colar esse prompt no Claude Code e pedir pra ele instalar pra você (mais prático)

"Help me install this skill npx skills add https://github.com/anthropics/skills --skill frontend-design"

Depois da instalação, você precisa começar uma conversa nova no Claude Code pra ele detectar a skill.

Como usar

O workflow que eu usei:

1. Prepare seus assets: Coloque no projeto seus logos (dark + light), uma imagem de fundo/ assets da sua marca se tiver, e tenha em mãos os códigos das suas cores e nomes das fontes da sua marca.

2. Monte seu prompt: Diga pro Claude Code que você quer melhorar o design usando a skill de frontend design, mencione onde estão os assets da sua marca dentro do seu projeto (ex: pasta /public/assets):

"help me improve the design of this landing page using frontend design skill. Use font [title font name] for titles and [body font name] for body. Use #XXXXXX, #XXXXXX and #XXXXXX as brand colours for this project. Use assets in folder public/assets"

3. Deixe a skill trabalhar: O Claude Code vai ler as melhores práticas da skill e aplicar no seu design

Por que isso importa pra você

Dizem que “taste is the new moat” e num mundo onde todos os designs parecem iguais, isso não poderia ser mais verdade. Você pode ter o melhor produto do mundo, mas se sua landing page parece “feita por AI” e sem identidade, você perde credibilidade. As pessoas julgam pela capa, sim. A boa notícia é que essa skill, você não precisa gastar horas aprendendo design e ter que usar ferramentas mais complexas como o Figma.

Você só precisa:

• Criar uma mini identidade visual básica

• Instalar a skill

• Fazer prompts que eu ensinei

Assim, você terá um design profissional, distinto, e que não grita “feito AI”.

---

Quer ver todo esse processo na prática?

Eu gravei um vídeo completo mostrando o antes e depois, o passo a passo da instalação e os resultados completos!

Até a próxima edição da DebGPT! 💜