{
  "id": "frontend-design",
  "handle": "frontend-design",
  "canonicalUrl": "https://bestskillsforclaude.com/ja/skills/frontend-design",
  "language": "ja",
  "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": "デザインとインターフェース"
  },
  "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": "生成された UI がどれも似るのはなぜで、frontend-design で直るのか",
  "summary": "公式セットで最もよく使われるスキルです。既定の見た目は、最も目につく失敗だからです。",
  "verdict": "frontend-design スキルは Claude に明示的なデザイン方針を与え、生成される画面が同じ中央寄せカード、同じグラデーションヘッダー、同じ丸みに収束するのを止めます。変わるのは出発点であって、最終判断ではありません。退屈な第一案を却下する役目は依然として人間側にあります。",
  "bestFor": "見た目が目的の一部であるランディング、ダッシュボード、プロトタイプ、アーティファクト。",
  "skipIf": "既存のデザインシステム内で作業していて、コンポーネントが視覚言語をすでに決めている場合。",
  "keyTakeaways": [
    "生成 UI の最大の特徴である汎用的な既定値を、正面から崩します。",
    "形容詞より制約のほうが効きます。避けるものを言語化してください。",
    "ブランドは渡さない限り知りません。そのために brand-guidelines と theme-factory があります。",
    "デザインの質は最後に人が決める必要があります。"
  ],
  "quickStart": [
    "anthropics/skills から Apache 2.0 で導入します。",
    "参照したい感覚と制約を 1 つずつ挙げます。たとえば密度が高く編集的、アクセントは 1 色のみ、遊びは不要。",
    "1 案ではなく対照的な 2 案を求め、より予測しにくいほうを残します。"
  ],
  "sections": [
    {
      "heading": "実務で何が変わるか",
      "paragraphs": [
        "どのモデルにランディングを頼んでも、出てくるのはたいてい同じ形です。グラデーションのヒーロー、3 つの特徴カード、大きめの角丸、そして誰も押さない行動喚起。すべての平均は安全であり、安全な答えが既定になるからです。",
        "このスキルは生成前に明確なデザイン指針を読み込ませるため、モデルは平均ではなく立場から始めます。実際、第一案はテンプレートではなく判断に見えるようになります。それが編集できる出力と捨てる出力の差です。"
      ]
    },
    {
      "heading": "期待に届かない点",
      "paragraphs": [
        "曖昧な要件は救えません。銀行のように見せたいのか、独立系の雑誌のように見せたいのかが自分で決まっていなければ、スキルが代わりに決め、その結果は気に入らないはずです。",
        "ブランド資産も知りません。色、書体、語調はどこかから供給する必要があり、だからこそブランド系スキルと置き換えではなく併用になります。"
      ]
    }
  ],
  "faq": [
    {
      "question": "ページだけでなく React コンポーネントにも効きますか",
      "answer": "効きます。フレームワークではなくデザイン判断に作用するため、見た目が重要な場所すべてに当てはまります。"
    },
    {
      "question": "自社のデザインシステムに合いますか",
      "answer": "単体では合いません。システムを渡すか、brand-guidelines と theme-factory を併用してください。"
    },
    {
      "question": "指示 1 回で足りますか",
      "answer": "ほとんど足りません。対照的な 2 案を出させて選ぶほうが、平凡な 1 案を反復するより速いです。"
    }
  ],
  "sources": [
    {
      "label": "GitHub の anthropics/skills",
      "url": "https://github.com/anthropics/skills",
      "kind": "repository"
    },
    {
      "label": "anthropics/skills、frontend-design スキルのディレクトリ",
      "url": "https://github.com/anthropics/skills/tree/main/skills/frontend-design",
      "kind": "documentation"
    }
  ],
  "machineReadable": {
    "markdown": "https://bestskillsforclaude.com/ja/skills/frontend-design/content.md",
    "json": "https://bestskillsforclaude.com/ja/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."
}