# 生成された UI がどれも似るのはなぜで、frontend-design で直るのか

Canonical URL: https://bestskillsforclaude.com/ja/skills/frontend-design
Language: ja
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: デザインとインターフェース
Last reviewed: 2026-08-05

公式セットで最もよく使われるスキルです。既定の見た目は、最も目につく失敗だからです。

## Short answer
frontend-design スキルは Claude に明示的なデザイン方針を与え、生成される画面が同じ中央寄せカード、同じグラデーションヘッダー、同じ丸みに収束するのを止めます。変わるのは出発点であって、最終判断ではありません。退屈な第一案を却下する役目は依然として人間側にあります。

Best for: 見た目が目的の一部であるランディング、ダッシュボード、プロトタイプ、アーティファクト。
Skip it if: 既存のデザインシステム内で作業していて、コンポーネントが視覚言語をすでに決めている場合。

## What to remember
- 生成 UI の最大の特徴である汎用的な既定値を、正面から崩します。
- 形容詞より制約のほうが効きます。避けるものを言語化してください。
- ブランドは渡さない限り知りません。そのために brand-guidelines と theme-factory があります。
- デザインの質は最後に人が決める必要があります。

## 実務で何が変わるか
どのモデルにランディングを頼んでも、出てくるのはたいてい同じ形です。グラデーションのヒーロー、3 つの特徴カード、大きめの角丸、そして誰も押さない行動喚起。すべての平均は安全であり、安全な答えが既定になるからです。
このスキルは生成前に明確なデザイン指針を読み込ませるため、モデルは平均ではなく立場から始めます。実際、第一案はテンプレートではなく判断に見えるようになります。それが編集できる出力と捨てる出力の差です。

## 期待に届かない点
曖昧な要件は救えません。銀行のように見せたいのか、独立系の雑誌のように見せたいのかが自分で決まっていなければ、スキルが代わりに決め、その結果は気に入らないはずです。
ブランド資産も知りません。色、書体、語調はどこかから供給する必要があり、だからこそブランド系スキルと置き換えではなく併用になります。

## Install and first run
1. anthropics/skills から Apache 2.0 で導入します。
2. 参照したい感覚と制約を 1 つずつ挙げます。たとえば密度が高く編集的、アクセントは 1 色のみ、遊びは不要。
3. 1 案ではなく対照的な 2 案を求め、より予測しにくいほうを残します。

## Questions
### ページだけでなく React コンポーネントにも効きますか
効きます。フレームワークではなくデザイン判断に作用するため、見た目が重要な場所すべてに当てはまります。

### 自社のデザインシステムに合いますか
単体では合いません。システムを渡すか、brand-guidelines と theme-factory を併用してください。

### 指示 1 回で足りますか
ほとんど足りません。対照的な 2 案を出させて選ぶほうが、平凡な 1 案を反復するより速いです。

## Sources
- GitHub の anthropics/skills: https://github.com/anthropics/skills
- anthropics/skills、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
- Brazilian Portuguese: https://bestskillsforclaude.com/pt-br/skills/frontend-design