# Por que toda interface gerada é parecida, e o frontend-design resolve?

Canonical URL: https://bestskillsforclaude.com/pt-br/skills/frontend-design
Language: pt-BR
Skill: frontend-design
Publisher: Anthropic (https://github.com/anthropics)
Source: https://github.com/anthropics/skills/tree/main/skills/frontend-design
License as stated by the publisher: Apache 2.0
Runtime: Claude apps and Claude Code
Category: Design e interface
Last reviewed: 2026-08-05

A skill mais usada do conjunto oficial, porque o visual padrão é a falha mais visível.

## Short answer
A skill frontend-design dá ao Claude direção de design explícita para que as interfaces geradas parem de convergir no mesmo card centralizado, no mesmo cabeçalho com degradê e nos mesmos cantos arredondados. Ela muda o ponto de partida, não o seu gosto: você ainda precisa recusar o primeiro resultado quando ele é sem graça.

Best for: Landings, painéis, protótipos e artefatos em que a aparência faz parte do objetivo.
Skip it if: Você trabalha dentro de um design system existente, onde os componentes já decidem a linguagem visual.

## What to remember
- Ataca o padrão genérico, que é o sinal mais reconhecível de interface gerada.
- Restrições funcionam melhor que adjetivos. Diga o que evitar.
- Ela não conhece sua marca se você não fornecer, e é para isso que existem brand-guidelines e theme-factory.
- Qualidade de design ainda depende de uma decisão humana no fim.

## O que muda na prática
Peça uma landing a qualquer modelo e sai quase sempre o mesmo artefato: herói com degradê, três cards de funcionalidades, cantos bem arredondados e um botão que ninguém clicaria. Acontece porque a média de tudo é segura, e o seguro é o padrão.
A skill carrega critérios de design deliberados antes de gerar, então o modelo parte de um ponto de vista e não de uma média. Na prática o primeiro resultado deixa de parecer template e passa a parecer decisão, que é a diferença entre algo editável e algo que você joga fora.

## Onde decepciona
Ela não salva um briefing confuso. Se você não sabe se a página deve soar como um banco ou como uma revista independente, a skill escolhe por você e você não vai gostar da escolha.
Ela também não conhece seus ativos de marca. Cores, tipografia e voz precisam vir de algum lugar, por isso ela se combina com as skills de marca em vez de substituí-las.

## Install and first run
1. Instale a partir de anthropics/skills, sob Apache 2.0.
2. Nomeie uma sensação de referência e uma restrição, por exemplo denso e editorial com uma única cor de destaque, nada divertido.
3. Peça duas direções opostas em vez de uma, e fique com a menos previsível.

## Questions
### Serve para componentes React e não só páginas?
Sim. Ela atua nas decisões de design, não no framework, então vale onde o resultado visual importa.

### Vai respeitar meu design system?
Sozinha não. Forneça o sistema ou combine com brand-guidelines e theme-factory.

### Um prompt basta?
Raramente. Peça duas direções opostas e escolha, que é mais rápido do que iterar em uma medíocre.

## Sources
- anthropics/skills no GitHub: https://github.com/anthropics/skills
- anthropics/skills, pasta da skill frontend-design: https://github.com/anthropics/skills/tree/main/skills/frontend-design

## Other languages
- English: https://bestskillsforclaude.com/en/skills/frontend-design
- Spanish: https://bestskillsforclaude.com/es/skills/frontend-design
- Japanese: https://bestskillsforclaude.com/ja/skills/frontend-design