Plugin frontend-design do Claude Code: como instalar, o que faz e o que falta

A Anthropic entrega a habilidade de design de frontend dentro do plugin frontend-design, distribuído pelo marketplace oficial de plugins do Claude Code (verificado pela Anthropic, com mais de um milhão de instalações). Os nomes causam certa confusão: o *plugin* é a unidade de instalação; a *skill* (habilidade) é o que ele contém e o que é acionado quando você trabalha em UI. A instalação requer dois comandos de barra dentro de uma sessão do Claude Code:

1. 1

   Adicione o marketplace oficial

   Configuração única; registra o catálogo de plugins da Anthropic.

   Copy

   /plugin marketplace add anthropics/claude-code

2. 2

   Instale o plugin

   A partir daí, a habilidade é carregada automaticamente sempre que sua solicitação for um trabalho de frontend; não há nada para invocar manualmente.

   Copy

   /plugin install frontend-design@claude-code-plugins

O que você recebe não são scripts ou componentes: o payload completo do plugin é um arquivo SKILL.md de 55 linhas no repositório público da Anthropic. Nós o analisamos para que o restante desta página descreva o arquivo real, e não o resumo de marketing.

Uma skill é um pacote de instruções que é carregado quando é relevante, em vez de em cada solicitação: a metade sob demanda da stack de arquivos do agente. Esta skill é carregada quando sua solicitação é um trabalho de UI (sua descrição abrange "construir nova UI ou remodelar uma existente") e coloca o modelo em um papel específico: um lead de design em um estúdio pequeno cujo cliente já rejeitou propostas baseadas em templates. As instruções que seguem são excepcionalmente concretas:

• Ela nomeia os padrões da IA e os proíbe. O arquivo descreve os três visuais nos quais o design de IA costuma "se agrupar": creme quente próximo a #F4F1EA com fonte serifada e acento terracota; quase preto com um acento verde-ácido ou vermelhão; e estilo jornal com linhas finas e raio zero. O modelo é instruído a tratar esses como padrões a serem evitados, não como escolhas. Isso é a própria equipe da Anthropic confirmando por que sites de IA parecem todos iguais.
• Ela força um plano antes do código. Duas etapas: primeiro, faz um brainstorm de um sistema de tokens compacto (4 a 6 valores hex nomeados, dois ou mais papéis tipográficos, um conceito de layout, um "elemento assinatura" pelo qual a página será lembrada); depois, critica esse plano em relação ao briefing, questionando se o mesmo resultado apareceria para qualquer prompt semelhante e, só então, constrói.
• Ela trata tipografia e estrutura como significado. A combinação tipográfica deve carregar a personalidade da página, e recursos estruturais como a numeração 01 / 02 / 03 só são permitidos quando o conteúdo é realmente uma sequência.
• Ela estabelece um piso de qualidade. Responsividade até mobile, foco de teclado visível, respeito ao modo de movimento reduzido, além de uma seção inteira sobre copywriting de interface (voz ativa, "Salvar alterações" em vez de "Enviar", erros que explicam o que aconteceu).

Este é um briefing de design genuinamente bom, e é a razão pela qual o plugin vale a pena ser instalado. Note, porém, o que o processo produz: um sistema de tokens novo, inventado por briefing. Esse é o limite do escopo, e o próprio arquivo sugere isso: "Criadores humanos têm memória e sempre tentam fazer algo novo". A skill não tem memória. A sua precisa viver em outro lugar.

Uma skill carrega o *como decidir*. Ela não carrega *o que foi decidido*. Essa distinção parece acadêmica até que você observe duas sessões lado a lado.

Leia o processo de duas etapas novamente: a skill instrui o modelo a *inventar* um sistema de tokens de 4 a 6 cores e um elemento assinatura para cada briefing, e a rejeitar qualquer plano que se assemelhe ao que ele produziria para um prompt similar. Por sessão, essa é exatamente a instrução correta; é o que torna telas únicas distintivas. Entre sessões, isso se torna um motor de divergência: a skill não tem como saber que sua cor primária é oklch(0.55 0.19 45), porque você nunca disse a ela e não há lugar no arquivo para isso residir, e seu próprio processo empurra cada nova sessão para um sistema novo, defensável e diferente.

Não aceite isso apenas por confiança. O teste é curto e o resultado é inequívoco.

1. 1

   Peça um card de preços em uma sessão nova

   Com a skill ativa e sem um design system presente. Guarde a saída.

2. 2

   Inicie uma sessão genuinamente nova

   Não uma nova mensagem: uma nova sessão, para que nada seja transferido.

   Copy

   claude

3. 3

   Peça um painel de configurações para o mesmo produto

   Mesma redação sobre o produto, sem referência ao primeiro componente.

4. 4

   Compare a diferença entre as duas

   Compare a cor primária, o border radius, o tamanho da fonte base e o espaçamento vertical entre o label e o controle.

5. 5

   Analise o resultado honestamente

   Ambas parecerão competentes. Em nossos testes, três ou quatro desses quatro valores divergem, e cada um é, individualmente, uma escolha razoável.

Mantenha a skill. Ela faz um trabalho que nada mais faz. Adicione a camada que ela não consegue conter: um conjunto de tokens mais um DESIGN.md no repo, que o agente lê no início de cada sessão.

A divisão de trabalho é clara assim que ambos estão implementados. O arquivo responde *qual* azul, *qual* radius, *qual* escala tipográfica. A skill responde como compô-los em uma tela que seja legível. Nenhum substitui o outro, e o erro comum é assumir que a skill tornou o arquivo desnecessário.

1. 1

   Instale um kit no repo

   Isso escreve o DESIGN.md e os arquivos de tokens que seu agente irá ler.

   Copy

   npx --yes identityforge@latest install --client claude-code

2. 2

   Aplique o kit que você deseja

   Kits gratuitos não precisam de conta.

   Copy

   identityforge apply ambient-sage

3. 3

   Aponte o AGENTS.md para ele

   Uma única linha, para que o contrato de design seja descoberto, e não incidental.

   Copy

   Never hardcode theme colors. Use the semantic tokens in DESIGN.md.

4. 4

   Execute novamente o teste de duas sessões

   Mesmo procedimento de cima. Os valores agora devem coincidir exatamente, pois são lidos em vez de serem decididos novamente.

Esta é a pergunta que as pessoas realmente fazem sobre skills de design, e quase nada do que foi escrito sobre elas responde a isso. A resposta honesta: uma skill respeita o seu tema apenas na medida em que o seu tema existe como valores que ela possa ler. Uma skill são instruções sobre como trabalhar. Ela não é a fonte dos seus valores.

Essa distinção define o resultado em uma base de código existente:

Existe uma versão mensurável disso. Analisamos 299 arquivos DESIGN.md públicos e descobrimos que, dos 72 que descreviam um sistema visual, 86% não usam nomes de funções de cores semânticas: eles listam hexes ou nomeiam cores por matiz. Uma skill que recebe --primary pode aplicar seu sistema a um componente que ninguém descreveu. Uma skill que recebe uma tabela de hexes só consegue copiar, e é na cópia que ela começa a adivinhar.

1. 1

   Verifique se o seu tema é legível

   Procure por um DESIGN.md ou um arquivo de tokens na raiz do repositório. Se a única fonte for o Figma, a skill não tem base para trabalhar.

2. 2

   Torne os valores semânticos

   Use funções em vez de matizes, para que a skill possa posicioná-los corretamente em casos que você nunca documentou.

3. 3

   Aponte para eles no AGENTS.md como uma proibição

   Copy

   Never hardcode theme colors, spacing or radii. Use the tokens in DESIGN.md.

4. 4

   Execute o mesmo build em uma nova sessão

   A mesma cor primária e o mesmo raio significam que ele está lendo. Pequenas divergências significam que ele está lembrando, e a memória degrada.

A maior parte do conteúdo sobre isso são listas comparativas, e essas listas usam os três termos como sinônimos. Eles não são a mesma coisa, e a diferença define se o que você instalou consegue sequer ser carregado.

A consequência prática é a condição de carregamento. Uma skill é selecionada pelo modelo com base em sua descrição, portanto, ela só atua quando sua solicitação parece um trabalho de design. Peça "uma página de configurações" e ela será acionada. Peça para "corrigir o padding na linha 40" e ela pode não ser, pois isso parece uma edição e não uma tarefa de design, e você receberá uma edição comum, sem o refinamento técnico pelo qual instalou a skill.

Esta é a pergunta que as listas comparativas ignoram completamente, e é a que importa depois que você tem ambos. Eles conflitam porque são escritos por pessoas diferentes para propósitos diferentes. Seu arquivo diz que a cor primária é oklch(0.55 0.19 45). O julgamento da skill diz que uma cor primária precisa atingir um limite de contraste em relação à superfície onde está. Em um card claro, eles concordam. Em sua superfície escura elevada, podem não concordar.

Nenhuma das camadas está errada, e não há um árbitro nativo: o modelo resolve a questão e, por padrão, prioriza a instrução mais específica e lida mais recentemente. É por isso que a resolução deve ser documentada, em vez de presumida:

1. Valores não são negociáveis; a composição sim. Declare isso no AGENTS.md. O hex, o raio e a escala tipográfica vêm do arquivo. Como eles são organizados na tela é decisão da skill.
2. Dê ao arquivo a saída de emergência que a skill precisa. O conflito acima só existe porque o sistema tem apenas uma cor primária. Forneça uma primária que seja legível também em suas superfícies escuras, ou um par documentado, e a divergência desaparece em vez de ser julgada a cada sessão.
3. Escreva proibições, não preferências. "Prefira tokens semânticos" perde para um argumento específico de contraste. "Nunca use cores de tema hardcoded" não perde, pois não deixa margem para ponderação.
4. Espere silêncio em caso de conflito. O modelo não avisará que sobrescreveu seu token. A única detecção confiável é fazer um grep no diff em busca de valores literais de cor e espaçamento.

# the only conflict detector that actually fires: literals in the diff
git diff | grep -nE '#[0-9a-fA-F]{3,8}|oklch\(|rgb\(|[0-9]+px'

Execute isso em todo diff gerado por um agente. Um resultado limpo significa que os valores foram lidos. Qualquer retorno é um ponto onde o julgamento substituiu silenciosamente uma decisão que você já havia tomado — a mesma deriva do teste de duas sessões, apenas chegando por outra porta.