Skill frontend design para o Claude Code

A Anthropic distribui uma skill chamada frontend-design que muda como o Claude Code encara trabalho de interface. Aqui vai o que ela faz, como instalar e como combinar com os prompts deste site para o resultado parecer o seu produto em vez de uma demo.

O que a skill muda

Sem ela, o Claude Code escreve UI do jeito que escreve tudo: correto, genérico e idêntico aos últimos vinte projetos. Hero centralizado, três cards de recursos, cantos arredondados, um acento violeta. A skill adiciona uma etapa de design antes da etapa de código. O Claude escolhe uma direção, se compromete com um par tipográfico, decide uma grade e uma escala de espaçamento, e só então escreve a marcação. Ela também diz ao modelo o que evitar, e é aí que está a maior parte do valor.

Ela muda as decisões tomadas antes de escrever, não o CSS. Não há biblioteca de componentes dentro dela.

Instalando

Skills ficam numa pasta skills que o Claude Code lê ao iniciar. A Anthropic publica a frontend-design no seu repositório de skills; adicione do mesmo jeito que qualquer skill:

git clone https://github.com/anthropics/skills
cp -r skills/frontend-design .claude/skills/

Mantenha dentro do projeto se quiser versionar junto com o código, ou em ~/.claude/skills/ para todos os projetos. Reinicie a sessão para carregar, depois invoque pelo nome no começo do trabalho de UI: "Use a skill frontend-design para construir a página de configurações."

Combinando com um prompt de estilo

A skill decide a composição. Ela não conhece a sua paleta nem o visual que você quer, então vai escolher algo razoável e esquecível. É aí que entra um prompt de estilo. A ordem importa:

Cole o prompt de estilo (ou o bloco "Para design.md" de uma página de estilo) no design.md sob um título como "Design direction".
Inicie a sessão e peça a página com a skill pelo nome.
Quando precisar de um componente específico, cole um prompt de snippet. A skill respeita os nomes de classe e os valores porque eles são precisos.

Primeiro a skill, depois o prompt de estilo, depois os prompts de snippet. Pule um e o modelo preenche a lacuna com os padrões dele.

O que ela ainda erra

Fontes. Ela vai sugerir um par de webfonts. Diga "só a pilha de fontes do sistema" se você se importa com bytes, ou nomeie as duas famílias que você licenciou.
Movimento. Ela tende a adicionar fade-in ao rolar em toda seção. Peça só estados de hover e focus.
Modo escuro. Ela oferece um por padrão. Recuse a menos que a marca peça.
CSS novo. Ela fica nos recursos seguros de 2019. Os prompts de Novo em CSS nomeiam os mais novos para ela usar.

Codex, Cursor e os outros

O formato de skill é específico do Claude Code, mas a ideia se transporta. O Cursor lê .cursor/rules, o Codex lê AGENTS.md. Cole o mesmo bloco de direção de design lá e você tem quase todo o efeito. A página do Cursor tem o layout exato do arquivo.

Comece com um estilo: Suíço, Neobrutalismo ou a lista completa.