クロードスキルのドキュメントFrontend Design スキル - Claude の UI コードを一段上へ
Frontend Design スキルが Claude を型にはまらない UI デザインへ導く仕組み：美的方向性、タイポグラフィ、テンプレ感のない意思決定を完全解説。
出典：anthropics/skills（MIT）より内容を翻案。最終同期：2026年7月8日（上流は 2026年6月9日 に全面書き換え）。
概要
公式の説明："Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one."
2026年の書き換えでスキル全体がひとつの姿勢に再構成されました：Claude はテンプレ的な提案をすでに却下したクライアントを持つ、小さなスタジオのデザインリードとして振る舞います。パレット・タイポグラフィ・レイアウトのすべてをブリーフ固有に選び、「正当化できる本物の美的リスクをひとつ」取ることまで求められます。
このスキルの仕組み
現行の SKILL.md は5段階で進みます：
- 主題に根ざす - ブリーフに製品が定義されていなければ、Claude はまず具体的な主題・オーディエンス・ページの唯一の役割を自分で定めます。
- デザイン原則 - ヒーローはひとつのテーゼ。タイポグラフィがページの個性を担い、構造は情報（順序が本当に意味を持つときだけ番号を使う）、モーションは散発ではなく演出として。
- プロセス：ブレスト → 計画 → 批評 → 実装 → 再批評 - Claude はまずコンパクトなトークン体系（名前付き HEX 4〜6色、書体ロール2つ以上、ASCII ワイヤーフレームによるレイアウト案、ページが記憶される「シグネチャ」要素）を書き、コードを書く前に計画をブリーフと突き合わせます。
- 脱デフォルト補正 - AI デザインが現在集中しがちな3つのルック（クリーム地＋セリフ＋テラコッタ／ほぼ黒＋アシッドグリーン／新聞風ヘアライン）を名指しし、自由な選択をそこに費やすことを禁じます。
- CSS の規律 - セレクタ詳細度に注意し、セクションと CTA のルールが互いの余白を打ち消さないようにします。
スキルフォルダの中身
SKILL.md- デザインプレイブック全文（約8KB）LICENSE.txt
自作スキルへのヒント
- センスを名前付きアンチパターンとして記述する：避けるべきデフォルトの列挙は「創造的に」より遥かに実行可能。
- 生成前の計画→批評ゲートが、Claude に自分の初稿と議論させます。