frontend-design

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

このスキルは、独自性のある本番品質のフロントエンドインターフェースの作成を支援します。プロジェクトに既存のデザインシステムとフロントエンドフレームワークがあるかを自動的に検出し、まずそれらを尊重したうえで、構成、レイアウト、モーションを通じて創造性を発揮します。

ユーザーは、作成するコンポーネント、ページ、アプリケーション、インターフェースなどのフロントエンド要件を指定します。目的、対象ユーザー、技術的な制約に関する背景情報が含まれる場合もあります。

ステップ 1：コードベースのコンテキストを把握する（必須）

コードを書く前、またはデザインの方向性を選ぶ前に、コードベースをスキャンしてください。 この手順は必須であり、毎回実施します。

検出する項目

1. フロントエンドフレームワーク — package.json（または同等のファイル）を確認し、次のものを探します：react、vue、angular、svelte、next、nuxt、astro、solid-js
2. コンポーネントライブラリ — 依存関係を確認し、次のものを探します：PrimeVue、shadcn/ui、Vuetify、MUI、Chakra UI、Ant Design、Radix、Mantine、Quasar、Element Plus、Headless UI
3. CSS フレームワーク／手法 — 次の項目を確認します：
   • Tailwind：tailwind.config.* ファイルまたは @tailwind ディレクティブ
   • CSS Modules：*.module.css ファイル
   • Styled-components／Emotion：コンポーネントファイル内のインポート
   • SCSS/SASS：*.scss ファイル、変数ファイル
   • CSS-in-JS：インポートを確認
4. デザイントークン — 次の項目をスキャンします：
   • CSS カスタムプロパティのファイル（variables.css、tokens.css、:root ブロック）
   • tailwind.config.* の Tailwind テーマ拡張
   • SCSS 変数ファイル（_variables.scss、_tokens.scss）
   • テーマ設定ファイル
5. 既存のタイポグラフィ — 次のファイル内のフォント宣言を確認します：
   • エントリーポイント（index.html、_app.tsx、layout.tsx、nuxt.config.*、app.vue）
   • グローバル CSS ファイル
   • フォントのインポート文（Google Fonts、ローカルフォント）
6. 既存のカラーパレット — テーマファイル、CSS 変数、Tailwind 設定内の定義済みカラーを確認します
7. コンポーネントのパターン — 既存のコンポーネントを 2〜3 個調べ、次の項目を把握します：
   • 命名規則（PascalCase、kebab-case）
   • ディレクトリ構成
   • 実際に使用されているスタイル設定の方法
8. デザインシステムのルール — CLAUDE.md、.cursor/rules、その他のエージェント設定ファイルでデザインシステムのルールを確認します（create-design-system-rules スキルによって生成されます）

コンテキストの要約

スキャン後、プロジェクトを次の 3 つのティアのいずれかに内部的に分類します：

ティア	条件	動作
ティア 1：グリーンフィールド	フレームワーク、コンポーネントライブラリ、デザイントークンがない（単体の HTML、単発の成果物、新規プロジェクト）	創造性を最大限に発揮できます — ステップ 2 のパス B に進みます
ティア 2：フレームワークあり	フレームワークや CSS フレームワークが検出されたものの、確立されたデザインシステムやコンポーネントライブラリがない	フレームワークの慣習に従い、テーマ設定、レイアウト、構成を通じて創造性を発揮します
ティア 3：デザインシステムあり	コンポーネントライブラリ、デザイントークン、確立されたパターンが検出された	既存のシステムを厳守し、構成、モーション、マイクロインタラクションのみで創造性を発揮します

次に進む前に、調査結果を伝えてください。 例：「検出結果：カスタムテーマを使用した Vue 3 + PrimeVue + Tailwind CSS。ティア 3 — PrimeVue コンポーネントと既存のデザイントークンを使用します。」

ステップ 2：デザインを考える

Path A：既存のシステム内でデザインする（Tier 2 & 3）

既存のデザインシステムやフレームワークが検出された場合でも、創造性を抑えるのではなく、適切な方向へ導きます。

厳守する制約（絶対に違反しないこと）：

• プロジェクトのフォントスタックにすでに含まれているフォント以外は、絶対にインポートしないでください。
• 既存のデザイントークン（CSS 変数、Tailwind のテーマ値、SCSS 変数）を絶対に上書きしないでください。
• 既存のライブラリコンポーネントと重複するコンポーネントを絶対に作成しないでください（ライブラリに Button がある場合は、それを使ってください）。
• プロジェクトの方式と異なる CSS 手法を絶対に導入しないでください（プロジェクトが Tailwind を使っている場合は、インラインスタイルや CSS Modules ではなく、Tailwind を使ってください）。
• すでに使われているもの以外のスタイリングリソースについて、外部 CDN リンクを絶対に追加しないでください。

クリエイティブなレイヤー（独自性が生まれる場所）：

• 空間構成 — 既存のグリッドシステムを活用した意外性のあるレイアウト：非対称な配置、大胆な余白、重なり合うセクション、斜めに流れる構成、グリッドからはみ出すヒーロー領域
• 動きとアニメーション — 段階的な表示、スクロールをきっかけにしたトランジション、ホバー状態の演出、ページ読み込み時の一連の演出。プロジェクトのアニメーション手法を使ってください（CSS トランジション、Motion ライブラリ、GSAP など、すでにインストールされている、またはフレームワークに適したもの）。
• コンテンツの階層 — 既存の文字サイズの範囲内で大胆なサイズ差をつける、フォントウェイトの違いを活用する、文字間隔を工夫する、デザイン手法としてテキスト変換を使う
• アクセントカラーの使い方 — 既存のパレットの範囲内で、ベースカラーとアクセントカラーの関係を意図的に活用します。デザインシステムが色を定義し、このスキルは最大の効果を得るために色をどう使うかを決めます。
• コンポーネントの組み合わせ — 既存のプリミティブを意外な形で組み合わせます。たとえば、編集記事のような質の高いヘッダーを備えた DataTable、雑誌風のレイアウトにした Card グリッド、会話のように進む Form などです。
• マイクロインタラクション — すべてのインタラクティブ要素に、目的のあるフィードバックを加えます。ボタンを押したときの効果、入力欄のフォーカスアニメーション、読み込み状態の演出、成功・エラー時のトランジションなどです。
• 余白をデザインとして活用 — ゆとりのあるパディング、セクション間の余裕、視覚的なリズムを生み出す余白

**確立されたブランドを持つ企業のデザイナーのように考えてください。**ブランドの書体を置き換えるのではなく、既存の要素をどう構成するかによって独自性を生み出します。

Path B：ゼロからデザインする（Tier 1 — Greenfield）

既存のシステムが検出されない場合は、大胆な美的方向性を定めて取り組みます。

• 目的：このインターフェースはどのような問題を解決しますか？誰が使いますか？

• トーン：明確な美的方向性を選びます。

  • 徹底したミニマル
  • マキシマリストな混沌
  • レトロフューチャー
  • オーガニック／ナチュラル
  • ラグジュアリー／洗練
  • 遊び心のある／おもちゃのような
  • エディトリアル／雑誌風
  • ブルータリスト／荒削り
  • アールデコ／幾何学的
  • ソフト／パステル
  • インダストリアル／実用本位

  これらをインスピレーションとして参考にしつつ、選んだ美的方向性に忠実なデザインを作ってください。

• 差別化：これを忘れられないものにする要素は何ですか？人々の記憶に残る、たった一つの要素は何ですか？

重要：明確なコンセプトの方向性を選び、精度高く形にしてください。大胆なマキシマリズムも洗練されたミニマリズムも効果的です。重要なのは強さではなく、意図を持つことです。

実装基準

すべての Tier に適用

次の条件を満たす、動作するコードを実装してください。

• 本番環境に対応でき、機能する
• 明確なビジュアルの方向性があり、全体に一貫性がある
• 細部まで入念に仕上げられている
• アクセシブルである（適切なコントラスト比、セマンティック HTML、キーボード操作）

Tier 2 & 3（既存のシステム）

• プロジェクトの既存コンポーネントライブラリを、主要な構成要素として使ってください。
• プロジェクトのファイル命名規則とディレクトリ規則に従ってください。
• プロジェクトの CSS 手法だけを使ってください。
• 置き換えるのではなく、拡張してください。バリアントが必要な場合は、値をハードコードするのではなく、既存のトークンシステムを拡張してください。
• 必要なコンポーネントがライブラリにない場合は、ライブラリのパターンと規則に従って作成してください。

Tier 1（グリーンフィールド）

• 美しく、独自性があり、興味を引くフォントを選びます
• CSS 変数を使って、統一感のあるカラーシステムを定義します
• 明確なスペーシングスケールを作成します
• 一貫したコンポーネントのパターンを確立します
• システムを正式に定義するために、create-design-system-rules スキルを提案することを検討します

フロントエンドの美的ガイドライン

タイポグラフィ

Tier 2 & 3： プロジェクトで確立されたフォントスタックを使用します。次の方法で違いを生み出します。

• 既存の文字サイズスケールの範囲内で、サイズに大胆なコントラストをつけます
• プロジェクトで可変フォントを使用している場合は、フォントウェイトを柔軟に使い分けます
• 字間やテキストの大文字・小文字の変換を工夫します
• 視覚的なリズムを生み出すように行の高さを調整します
• プロジェクトで Inter を使用している場合は、Inter を最高に魅力的に見せます。フォントの選択だけが工夫できる要素ではありません

Tier 1（グリーンフィールド）：

• 美しく、独自性があり、興味を引くフォントを選びます
• Arial やシステムのデフォルトフォントなど、ありきたりなフォントは避けます
• 個性的な見出し用フォントと、洗練された本文用フォントを組み合わせます
• 使い古されたフォント（Space Grotesk、Inter、Roboto）に決して収束しないようにします

色とテーマ

Tier 2 & 3： 既存のパレットの範囲内で作業します。

• 主色とアクセントカラーの関係を意図的に活用します
• 既存のパレットを幅広く活用します（色が定義されていても、十分に使われていないプロジェクトはよくあります）
• 既存の色の不透明度や透明度を変化させ、奥行きを生み出します
• ダーク／ライトモードでは、プロジェクトの方式に従います

Tier 1（グリーンフィールド）：

• 統一感のある美的な方向性を定めます
• 一貫性を保つために CSS 変数を使用します
• 控えめに均等配分したパレットよりも、主色を際立たせ、アクセントに鋭いコントラストをつけるほうが効果的です
• ライトテーマとダークテーマを使い分けます

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

すべての Tier（デザインシステムにかかわらず、個性を発揮しやすい領域です）：

• エフェクトやマイクロインタラクションにアニメーションを使用します
• ページ読み込み時にアニメーションの遅延を段階的につけて要素を表示するなど、インパクトの大きな場面に注力します
• スクロールに応じたアニメーションや、意外性のあるホバー状態を取り入れます
• 状態の変化（読み込み、成功、エラー）に応じて、目的のあるトランジションを設定します
• プロジェクトで推奨されているアニメーション方式（CSS、Motion、GSAP、またはフレームワーク標準の方式）を使用します
• シンプルなトランジションには、CSS のみでの実装を優先します

空間構成

すべての Tier（構成の工夫は、どのようなシステムでも取り入れられます）：

• 予想外のレイアウトを取り入れます（標準的なコンポーネントを使う場合も同様です）
• 対称的なコンポーネントを非対称に配置します
• 要素を重ねて奥行きを生み出します
• グリッドからはみ出すヒーローセクションを作ります
• 広々とした余白も、計算された高密度な配置も、どちらも有効です
• 斜め方向の流れと視覚的なリズムを取り入れます

背景と視覚的なディテール

Tier 2 & 3： 既存のデザイン言語を使って雰囲気を作ります。

• 既存のパレットの色を使って、控えめなグラデーションを作ります
• 既存のトークンシステムを使って、背景パターンを作ります
• 既存の色で透明度を重ねます
• プロジェクトのエレベーションシステムに合ったシャドウを使います

Tier 1（グリーンフィールド）：

• グラデーションメッシュ
• ノイズテクスチャ
• 幾何学模様
• 透明度のレイヤー
• 大胆なシャドウ
• 装飾的なボーダー
• カスタムカーソル
• グレインオーバーレイ

避けるべきこと

常に避けること（すべての Tier）

• 視覚的なリズムのない画一的なレイアウト
• 変化をつけずに同じコンポーネントを並べること
• 目的のない、装飾だけのアニメーション
• アクセシビリティ上の問題（コントラスト不足、ラベルの欠落、キーボード操作への非対応）

Tier 2 & 3：システムを崩さない

• デザイントークンをハードコードした値で上書きすること
• プロジェクトのフォントスタックにないフォントを読み込むこと
• ライブラリのコンポーネントと重複する独自のコンポーネントを作成すること
• プロジェクトとは異なる CSS の方法論を使うこと
• プロジェクトの方式を確認せずに外部依存関係を追加すること
• 既存のコンポーネント API やパターンを無視すること

Tier 1（グリーンフィールド）：ありきたりな AI 風のデザインを避ける

• 使い古されたフォントファミリー（Inter、Roboto、Arial、システムフォント、Space Grotesk）
• ありきたりな配色（特に、白い背景に紫のグラデーションを重ねる配色）
• 予測可能なレイアウトやコンポーネントのパターン
• 文脈に応じた個性のない、ありきたりなスタイリング

デザインのバリエーション

• どのデザインも、ほかと同じ見た目にならないようにしてください
• 同じデザインシステム内でも、ページごとにコンポーネントの組み合わせ方を変えてください
• セクションごとに異なる空間構成を適用してください
• 要件を創造的に解釈してください。ダッシュボードをエディトリアル風にしたり、フォームを会話形式にしたり、設定ページを洗練されたデザインにしたりできます
• デザインシステムの制約は、創造性を制限するのではなく、さらに引き出すものであるべきです

補完的なスキル

• create-design-system-rules — デザインシステムが検出されない場合（Tier 1）は、まずこのスキルを実行してデザインシステムを確立するよう提案してください。すでにデザインシステムのルールがある場合は、それを参照して従ってください。
• react-best-practices / vue-best-practices — フレームワークの慣用的な使い方やコンポーネント API のパターンについては、これらを優先してください。このスキルはフレームワークのベストプラクティスではなく、視覚的な創造性に重点を置いています。
• web-design-guidelines — 既存のインターフェースを品質基準に照らして監査・レビューする際に使用してください。

覚えておくこと

まず、自分が置かれている環境を理解してください。そのうえで、その環境で最も創造的な存在になりましょう。ただし、誰かがすでに色を選んでいる壁を塗り替えてはいけません。

グリーンフィールドプロジェクトでは、遠慮はいりません。並外れて個性的な作品を生み出してください。 既存のプロジェクトでは、そのシステムの中で並外れた作品を生み出してください。PrimeVue のダッシュボードは息をのむほど美しくできます。shadcn/ui のページは忘れられないものにできます。デザインシステムは檻ではなく、創造性を引き出すためのブリーフです。