frontend-design

name: frontend-design description: 独自性のある本番品質のフロントエンドインターフェースを作成。汎用的な「AI slop」美学を避け、記憶に残るデザインを実現。タイポグラフィ、カラー、モーション、空間構成に焦点。

フロントエンドデザインスキル

これは、汎用的な「AI slop」美学を避けた独自性のある高品質のフロントエンドインターフェースを作成するためのスキルガイドです。

主要原則

デザイン思考（コーディング前）

実装前に以下を確立する：

• 目的: どんな問題を解決するか？誰が使うか？
• トーン: 大胆な美的方向性を選ぶ（極限のミニマル、マキシマリスト、レトロフューチャー、ラグジュアリー、プレイフル、ブルータリスト、アールデコなど）
• 制約: 技術要件（フレームワーク、パフォーマンス、アクセシビリティ）
• 差別化: 何が記憶に残り、忘れられないものにするか？

重要: 意図性は強度よりも重要—大胆なマキシマリズムも洗練されたミニマリズムも、精度を持って実行されればどちらも機能する。

フロントエンド美学ガイドライン

以下の要素に焦点を当てる：

タイポグラフィ

• M PLUS 2: 基本フォント（本文、UI全般）
• Noto Sans JP: 象徴的な見出しやアクセントに使用

カラー＆テーマ

• 一貫した美学にコミットする
• 一貫性のためにCSS変数を使用する
• 控えめなパレットよりも、支配的な色とシャープなアクセントの組み合わせが効果的

モーション＆アニメーション

• HTMLにはCSSのみ、ReactにはMotionライブラリを使用
• インパクトの高い瞬間を優先する（段階的な表示を伴うオーケストレーションされたページロード）
• 驚きを与えるスクロールトリガーとホバー状態を実装

空間構成

• 予想外のレイアウト、非対称性、オーバーラップ、斜めの流れを使用
• グリッドの慣習を破る
• 豊富なネガティブスペースまたは制御された密度のバランスを取る

背景＆ビジュアルディテール

• 単色を超えた雰囲気と奥行きを作る
• テクスチャ、グラデーションメッシュ、ノイズ、幾何学模様、レイヤード透過を追加
• クリエイティブなタッチ：ドラマチックな影、装飾的なボーダー、カスタムカーソル、グレインオーバーレイ

避けるべきこと

❌ 汎用的なAI美学：

• 陳腐な配色（パープルグラデーション）
• 予測可能なレイアウト
• 量産型デザイン

✅ 代わりに: 創造的に解釈し、コンテキストに特有の予想外の選択をする。

❌ UIデザインで気をつけること：

• 関連性の低い要素を近くに配置する、または関連要素を離して配置する
• 情報を大きな塊のまま表示する（小さなグループに分割すること）
• 不要なコンテナで囲む（余白・整列・背景色などより控えめな手法を優先）
• 同じ機能の要素で見た目が異なる、異なる機能の要素で見た目が同じ
• fill/outlineアイコンの混在（スタイルを統一すること）
• 左揃え・中央揃えなど複数の整列方向の混在
• 1画面に複数のプライマリボタン（primary / secondary / tertiaryで使い分け）
• タップターゲットが48×48pt未満
• 視覚的階層が不明確（重要な情報ほど目立たせる）
• 意味のない装飾的な線・背景色・アニメーション
• 装飾目的だけのカラー（白黒ベースで設計し意味のある場所にのみ色を導入）
• アイコンのみでテキストラベルがない（ミニマル≠シンプル）
• アイコンとテキストの視覚的バランスが崩れている

実装アプローチ

コードの複雑さを美的ビジョンに合わせる：

• マキシマリストデザイン → 豊富なアニメーションを伴う精巧なコード
• ミニマリストデザイン → 抑制、精度、注意深い余白とタイポグラフィ

目標は、既成概念にとらわれず、独自のビジョンに完全にコミットすることで並外れた創造的な作品を実証すること。

k8oプロジェクトでの適用

スタイリング制約

• TailwindCSS: ArteOdyssey (@k8o/arte-odyssey/styles.css) で定義されたカスタムトークンのみ使用
• 禁止: 標準のTailwindクラス（text-gray-600など）は使用禁止

アニメーション

• Motion: Reactコンポーネントには motion ライブラリを使用
• CSS: 単純なトランジションにはTailwindのtransitionユーティリティを活用

コンポーネント

• ArteOdyssey: 基本的なUIコンポーネントは @k8o/arte-odyssey から利用
• カスタム: 独自の視覚表現が必要な場合はプロジェクト固有のコンポーネントを作成

ライセンス

このスキルは anthropics/skills の frontend-design (0075614) をベースに作成されています。

Copyright 2025 Anthropic, PBC

原作は Apache License 2.0 でライセンスされています。

MODIFIED: このファイルは原作から以下の変更を加えています：

• 日本語に翻訳
• k8oプロジェクト固有の設定を追加（ArteOdyssey UIライブラリ、TailwindCSSカスタムトークン等）
• 避けるべきことにUIデザイン原則の注意項目を追加