frontend-design (Anthropic)

Avaliação

Codex CLI 0.166 (gpt-6-astra, raciocínio baixo), um projeto temporário novo a cada execução, skill instalada ou ausente, duas execuções por grupo, rede desligada. Nunca mencionamos a skill no prompt, então isso também testa o acionamento automático. Três tarefas: uma landing page para uma assinatura inventada de petiscos de algas (Tidepool), um dashboard de monitoramento de qualidade da água com dados de exemplo e o redesign de uma página inicial deliberadamente sem graça de uma academia de escalada, que precisava manter todo o conteúdo. Renderizamos cada página com Playwright (desktop 1440 px e mobile 390 px) em um sandbox sem rede e demos nota às cegas pelas capturas de tela, de 0 a 5. Também contamos recursos específicos no HTML.

Comparação entre os braços

Medido com Codex CLI em 18 execuções, com pontuação por verificações baseadas em regras e sem juiz LLM. Total 25.5 / 30, veredito Situacional.

Veredito: Situacional (25.5 / 30, a maior nota entre nossas três primeiras análises). Fonte: anthropics/skills, skills/frontend-design, fixada no commit ca45fc4. Instalação: npx skills@latest add anthropics/skills --skill frontend-design. Apache-2.0.

O que é

Um único arquivo de prosa, sem scripts. Ele instrui o agente a agir como o líder de design de um estúdio que já rejeitou propostas clichês: escolher uma paleta, tipografias e layout específicos para o briefing, evitar padrões comuns de "design gerado por IA" (fundo creme com acento terracota, rótulo em caixa alta acima de cada título, marcadores numerados 01/02/03 que não indicam sequência), trabalhar em duas passagens (planejar, revisar o plano contra o briefing e então construir) e terminar com uma autocrítica. Também lista padrões mínimos de qualidade: responsivo para mobile, foco de teclado visível, movimento reduzido respeitado.

Como testamos

Codex CLI 0.166 (gpt-6-astra, raciocínio baixo), um projeto temporário novo por execução, skill instalada ou ausente, duas execuções por grupo, rede desativada. Nunca mencionamos a skill no prompt, então isso também testa o acionamento automático. Três tarefas: uma landing page para uma assinatura inventada de snacks de algas (Tidepool), um dashboard de monitoramento de qualidade da água com dados de exemplo e um redesign de uma homepage deliberadamente sem graça de uma academia de escalada que precisava manter todo o conteúdo. Renderizamos cada página com Playwright (desktop 1440 px e mobile 390 px) em um sandbox sem rede e as pontuamos às cegas a partir das capturas de tela, de 0 a 5. Também contamos recursos específicos no HTML.

O que aconteceu

Ela é acionada sozinha. O arquivo da skill foi lido nas seis execuções com a skill, sem nenhum estímulo. Ninguém precisou digitar um comando.

As marcas que ela aponta desaparecem. Por página, as páginas de controle usaram em média 3.2 rótulos em caixa alta e 1.5 marcadores numerados; as páginas feitas com a skill usaram 0.3 e 0. Isso é o próprio conselho da skill aparecendo no resultado. Nenhum grupo usou os valores hex de creme e terracota contra os quais ela alerta, e o uso de gradientes foi idêntico (0.17 por página). As famílias de fontes ficaram limitadas a fontes do sistema nos dois grupos porque o sandbox estava offline, o que prejudica uma skill que se importa com tipografia. Esperamos resultados diferentes com fontes web.

A qualidade geral foi mais ou menos a mesma. As notas cegas tiveram média 3.75 com a skill e 3.5 sem. As landing pages se saíram melhor com a skill (4.0 vs 3.25), o dashboard e o redesign empataram. Com duas execuções por célula, isso é ruído. Todas as páginas eram competentes: hierarquia clara, espaçamento sensato, nenhum layout quebrado.

A mesmice continua intacta. Três das quatro landing pages, com e sem a skill, usaram o mesmo título, "A little ocean. A lot of crunch."; a quarta (uma execução com a skill) escreveu "A little sea." com outro texto. As quatro compartilhavam o mesmo layout geral: sachês do produto e um cartão de preços no meio da página. A skill pede "um ponto de vista distintivo e específico para este briefing", mas um modelo executado duas vezes a partir do mesmo prompt ainda converge para o próprio padrão. A skill remove clichês de superfície; não diversifica a ideia por trás. A tarefa de redesign produziu um pouco mais de variedade na tipografia: as execuções de controle usaram Arial/Helvetica e Courier, as execuções com a skill escolheram tipos display estilo Impact com Helvetica Neue ou Avenir Next. Isso é só variedade de fontes do sistema.

Padrões mínimos de qualidade foram atendidos igualmente. A meta viewport, @media queries e estilos :focus apareceram em todas as páginas dos dois grupos. O tratamento de movimento reduzido faltou nos dois dashboards dos dois grupos. O overflow no mobile foi zero em 10 de 12 páginas; uma landing page de cada grupo transbordou de 2 a 6 pixels.

Sem custo. As execuções com a skill usaram 87,900 tokens em média contra 93,000 sem (0.95x) e levaram 155 segundos contra 189. Ler o arquivo é barato comparado com as próprias páginas.

Uma ressalva sobre nossas próprias verificações

Nossa verificação automatizada de "mantém os preços $22 / $79 / $720" falhou em três das quatro execuções de redesign, nos dois grupos. É um defeito da nossa regex, não das páginas: os preços estavam divididos entre tags <span>, e as capturas de tela mostram os três preços presentes. Não usamos essa verificação nas notas.

Análise de segurança

Um arquivo markdown e um arquivo de licença. O scanner não encontrou nada; o único domínio é apache.org dentro do texto da licença. Sem scripts, binários, caracteres ocultos ou instruções sobre segredos. Veja security.md.

Notas

Quem deve usar

Se as páginas do seu agente continuam chegando com os mesmos rótulos em caixa alta e marcadores 01/02/03, esta skill impede isso de forma confiável, sem custo extra de tokens, então há pouca razão para não mantê-la instalada. Se você espera que ela faça um modelo mediano produzir um design visivelmente mais original, não vimos isso: você ainda vai receber uma página competente com a cara do que o modelo costuma fazer. A solução confiável para a mesmice é um briefing mais forte da sua parte (uma paleta, uma referência, um clima), e a própria skill diz que as palavras do briefing sempre prevalecem.

Limitações deste teste

Duas execuções por célula, um modelo, sandbox offline com fontes do sistema, três tarefas, pontuadas por um único avaliador cego em vez de um painel. Julgamento de design é subjetivo. O tier do Codex vale para Codex e Claude Code sob a regra do site.

Atualização (2 de novembro de 2026): grupo de uma frase adicionado

Adicionamos um terceiro grupo: sem skill, mas com uma frase anexada ao prompt que carrega a regra central da skill ("Dê à página um ponto de vista visual específico e ousado ... evite sinais genéricos de design de IA, como gradientes roxos, rótulos em caixa alta, marcadores numerados 01/02 e grades idênticas de três cartões"). 6 execuções, rodadas em uma máquina Windows com a mesma build do Codex, rede desativada.

A frase única iguala a skill (ganho da skill sobre ela: 0.00) e supera sem skill em 0.25, tudo dentro do ruído com n=2. As execuções da frase gastaram cerca de 1.4x os tokens do controle; a skill não. A página mais bonita de todo o conjunto (um título de dashboard em serifada, "A clear view of your water.") veio de uma execução da frase, e a única página claramente com bug (um ticker embaralhado com o texto literal ?/b>) veio da outra execução da frase na tarefa de redesign. As notas do novo grupo foram dadas em uma sessão cega separada da comparação original de seis execuções, então uma pequena variação é possível (a mesma landing page tirou 4.5 em uma sessão e 3.25 em média na outra). A parte sem custo da skill continua a mesma: ela remove os sinais específicos que nomeia. Um prompt de uma frase também faz a maior parte disso.