{
  "id": "frontend-design",
  "handle": "frontend-design",
  "canonicalUrl": "https://bestskillsforclaude.com/pt-br/skills/frontend-design",
  "language": "pt-BR",
  "alternates": {
    "en": "https://bestskillsforclaude.com/en/skills/frontend-design",
    "es": "https://bestskillsforclaude.com/es/skills/frontend-design",
    "pt-BR": "https://bestskillsforclaude.com/pt-br/skills/frontend-design",
    "ja": "https://bestskillsforclaude.com/ja/skills/frontend-design"
  },
  "category": {
    "id": "design-and-interface",
    "name": "Design e interface"
  },
  "publisher": {
    "name": "Anthropic",
    "url": "https://github.com/anthropics"
  },
  "source": "https://github.com/anthropics/skills/tree/main/skills/frontend-design",
  "documentation": null,
  "licenseAsStated": "Apache 2.0",
  "runtime": "Claude apps and Claude Code",
  "lastReviewed": "2026-08-05",
  "headline": "Por que toda interface gerada é parecida, e o frontend-design resolve?",
  "summary": "A skill mais usada do conjunto oficial, porque o visual padrão é a falha mais visível.",
  "verdict": "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.",
  "bestFor": "Landings, painéis, protótipos e artefatos em que a aparência faz parte do objetivo.",
  "skipIf": "Você trabalha dentro de um design system existente, onde os componentes já decidem a linguagem visual.",
  "keyTakeaways": [
    "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."
  ],
  "quickStart": [
    "Instale a partir de anthropics/skills, sob Apache 2.0.",
    "Nomeie uma sensação de referência e uma restrição, por exemplo denso e editorial com uma única cor de destaque, nada divertido.",
    "Peça duas direções opostas em vez de uma, e fique com a menos previsível."
  ],
  "sections": [
    {
      "heading": "O que muda na prática",
      "paragraphs": [
        "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."
      ]
    },
    {
      "heading": "Onde decepciona",
      "paragraphs": [
        "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."
      ]
    }
  ],
  "faq": [
    {
      "question": "Serve para componentes React e não só páginas?",
      "answer": "Sim. Ela atua nas decisões de design, não no framework, então vale onde o resultado visual importa."
    },
    {
      "question": "Vai respeitar meu design system?",
      "answer": "Sozinha não. Forneça o sistema ou combine com brand-guidelines e theme-factory."
    },
    {
      "question": "Um prompt basta?",
      "answer": "Raramente. Peça duas direções opostas e escolha, que é mais rápido do que iterar em uma medíocre."
    }
  ],
  "sources": [
    {
      "label": "anthropics/skills no GitHub",
      "url": "https://github.com/anthropics/skills",
      "kind": "repository"
    },
    {
      "label": "anthropics/skills, pasta da skill frontend-design",
      "url": "https://github.com/anthropics/skills/tree/main/skills/frontend-design",
      "kind": "documentation"
    }
  ],
  "machineReadable": {
    "markdown": "https://bestskillsforclaude.com/pt-br/skills/frontend-design/content.md",
    "json": "https://bestskillsforclaude.com/pt-br/skills/frontend-design/skill.json"
  },
  "disclosure": "Editorial desk review based on the publisher's own repository. Not a security audit, a benchmark or a guarantee of maintenance."
}