フロントエンドデザイン

ジェネリックなAI美学を避け、際立った本番環境対応のフロントエンドインターフェースの構築を指導します。このスキルは完全なライフサイクルをカバーします: 既存システムの検出、デザイン計画、意図的なビルド、視覚的検証。

権限階層

このスキルのすべてのルールはデフォルトであり、強制ではありません。

1. 既存デザインシステム / コードベースパターン -- 最高優先度、常に尊重
2. ユーザーの明示的指示 -- スキルのデフォルトを上書き
3. スキルのデフォルト -- グリーンフィールド作業またはユーザーがデザイン指導を求める場合に適用

確立されたパターンを持つ既存コードベース内で作業する場合、それらのパターンに従います。ユーザーがデフォルトに矛盾する方向を指定する場合は、ユーザーに従います。

ワークフロー

コンテキスト検出 -> デザイン計画 -> ビルド -> 視覚的検証

---

レイヤー 0: コンテキスト検出

デザイン作業の前に、コードベースから既存のデザインシグナルを検出します。これにより、スキルの意見的なガイダンスがどの程度適用されるかが決まります。

確認対象

• デザイントークン / CSS 変数: --color-*, --spacing-*, --font-* カスタムプロパティ、テーマファイル
• コンポーネントライブラリ: shadcn/ui、Material UI、Chakra、Ant Design、Radix、またはプロジェクト固有のコンポーネントディレクトリ
• CSS フレームワーク: tailwind.config.*、styled-components テーマ、Bootstrap インポート、一貫した命名規則のある CSS モジュール
• タイポグラフィ: HTML/CSS のフォントインポート、@font-face 宣言、Google Fonts リンク
• カラーパレット: 定義されたカラースケール、ブランドカラーファイル、デザイントークンのエクスポート
• アニメーションライブラリ: Framer Motion、GSAP、anime.js、Motion One、Vue Transition インポート
• スペーシング / レイアウトパターン: 一貫したスペーシングスケール使用、グリッドシステム、レイアウトコンポーネント

プラットフォームのネイティブファイル検索およびコンテンツ検索ツール(例: Claude Code の Glob/Grep)を使用してこれらのシグナルをスキャンします。ルーチンなファイル探索にはシェルコマンドを使用しないでください。

モード分類

検出されたシグナルに基づいて、モードを選択します:

• 既存システム(複数のカテゴリにまたがる 4 つ以上のシグナル): これに従う。スキルの美的意見(タイポグラフィ、色、モーション)は確立されたシステムに譲ります。構造的ガイダンス(構成、コピー、アクセシビリティ、検証)は引き続き適用されます。
• 部分的システム(1-3 個のシグナル): 存在するものに従う。スキルのデフォルトは、慣例が検出されなかった領域にのみ適用します。例えば、Tailwind が構成されているがコンポーネントライブラリが存在しない場合は、Tailwind トークンに従い、コンポーネント構造にはスキルガイダンスを適用します。
• グリーンフィールド(シグナルが検出されない): スキルの全ガイダンスが適用されます。
• 曖昧(シグナルが矛盾している、または不明確): ユーザーに確認してから進めます。

ユーザーに質問する

コンテキストが曖昧な場合、プラットフォームのブロッキング質問ツール: Claude Code の AskUserQuestion (スキーマが読み込まれていない場合は ToolSearch を select:AskUserQuestion で呼び出す)、Codex の request_user_input、Gemini の ask_user、Pi の ask_user (requires the pi-ask-user extension) を使用します。スキーマ読み込みが必要であるからではなく、ハーネスに利用可能なブロッキングツールがないか呼び出しがエラーになった場合(例: Codex エディットモード)にのみ、チャットでオプションを提示することにフォールバックします。サイレントにスキップしないでください。ユーザーが選択を拒否した場合は、「部分」モードと想定して慎重に進めます。

例の質問: 「[検出されたシグナル]が見つかりました。既存のデザインパターンに従うべきか、それとも独特なものを作成すべきか?」

---

レイヤー 1: プリビルド計画

コードを書く前に、3 つの短い文を書きます。これらは一貫性を生み出し、ユーザーがコードを書く前にリダイレクトするチェックポイントを提供します。

1. ビジュアルテーゼ -- ムード、マテリアル、エネルギーを説明する 1 文

   • グリーンフィールド例: 「クリーンな編集フィール、たっぷりのホワイトスペース、セリフ見出し、ミュートアースカラー」または「密度のあるデータフォーカスダッシュボード、モノスペース強調、ダーク表面階層」
   • 既存コードベース: 既存の美学を説明し、新しい作業がそれをどのように拡張するかを説明

2. コンテンツ計画 -- ページに何が表示されるか、どのような順序か

   • ランディングページ: ヒーロー、サポート、詳細、CTA
   • アプリ: プライマリワークスペース、ナビ、セカンダリコンテキスト
   • コンポーネント: どのような状態があるか、何を伝えるか

3. インタラクション計画 -- フィールを変える 2-3 個の特定のモーションアイデア

   • 「アニメーションを追加する」ではなく「ヒーロー読み込み時のスタッガードフェードイン、セクション間のスクロールパラレックス、カードホバー時のスケールアップ」
   • 既存コードベースで、既存のモーションライブラリを使用して、追加されるインタラクションのみを説明

---

レイヤー 2: デザインガイダンス コア

これらの原則はすべてのコンテキストタイプに適用されます。各原則は権限階層に従って既存デザインシステムとユーザーの指示に譲ります。

タイポグラフィ

• 特徴的で個性的なフォントを選択します。既存コードベースが使用していない限り、よくある選択肢(Inter、Roboto、Arial、システムデフォルト)は避けます。
• 明確な理由がない限り、最大 2 つのタイプフェース。ディスプレイ/見出しフォントと本文フォントを組み合わせます。
• レイヤー 0 で検出された既存フォント選択に譲ります。

色とテーマ

• CSS 変数を使用して、一貫性のあるパレットにコミットします。鋭いアクセントを持つドミナントカラーは、臆病な均等配分パレットより優れています。
• パープルオンホワイトの偏り、ダークモード偏りはありません。コンテキストに基づいて、ライトとダーク間で変動させます。
• デフォルトでは 1 つのアクセントカラー、製品が既にマルチカラーシステムを持っていない限り。
• 検出された既存カラートークンに譲ります。

構成

• コンポーネントではなく、構成から始めます。最初のビューポートをドキュメントではなくポスターとして扱います。
• ホワイトスペース、アラインメント、スケール、トリミング、コントラストを使用してから、クローム(ボーダー、シャドウ、カード)を追加します。
• デフォルトはカードレスレイアウト。カードは、ユーザーインタラクションのコンテナー(クリック可能アイテム、ドラッグ可能ユニット、選択可能オプション)として機能する場合に許可されます。カードスタイルを削除しても理解に支障がない場合、カードにすべきではありません。
• すべての構成ルールはデフォルトです。ユーザーはそれらを上書きできます。

モーション

• ビジュアル主導の作業には、2-3 個の意図的なモーション を提供: 1 つのエントランスシーケンス、1 つのスクロールリンクまたは深度効果、1 つのホバー/リビールトランジション。
• プロジェクトの既存アニメーションライブラリがあればそれを使用します。
• 既存ライブラリが見つからない場合、フレームワーク条件付きデフォルトを使用:
  • CSS アニメーション - ユニバーサルベースライン
  • Framer Motion - React プロジェクト用
  • Vue Transition / Motion One - Vue プロジェクト用
  • Svelte トランジション - Svelte プロジェクト用
• モーションはクイック録画で目立つはず、モバイルでスムーズ、ページ全体で一貫しているべき。純粋に装飾的であれば削除します。

アクセシビリティ

• セマンティック HTML をデフォルト: nav、main、section、article、button -- すべてに div ではなく。
• WCAG AA 最小値を満たすカラーコントラスト。
• すべてのインタラクティブ要素にフォーカス状態。
• アクセシビリティと美的価値は、上手に行われれば対立していません。

イメージ

• イメージが必要な場合、抽象的なグラデーションや偽の 3D オブジェクトより、実際のまたはリアルな写真を優先します。
• テキストオーバーレイのための安定したトーンエリアを備えたイメージを選択または生成します。
• 環境でイメージ生成ツールが利用可能な場合、プレースホルダーストックではなく、文脈的に適切なビジュアルを作成するために使用します。

---

コンテキストモジュール

構築中のもの に合うモジュールを選択します。既存アプリケーション内で作業する場合、機能が何であるかに関わらずモジュール C をデフォルトとします。

モジュール A: ランディングページとマーケティング (グリーンフィールド)

デフォルトセクション シーケンス:

1. ヒーロー -- ブランド/製品、プロミス、CTA、1 つのドミナントビジュアル
2. サポート -- 1 つの具体的な機能、オファー、または証明ポイント
3. 詳細 -- 雰囲気、ワークフロー、製品の深さ、またはストーリー
4. 最終 CTA -- 変換、開始、訪問、または連絡

ヒーロールール (デフォルト):

• ダッシュボードではなく、1 つの構成。フルブリード画像またはドミナントビジュアルプレーン。
• ブランド優先、見出し次、本文次、CTA 最後。
• テキスト列は狭く保ち、イメージの落ち着きのある領域に固定します。
• 明確な理由なく 6 セクション以上。
• 1 つの H1 見出し。ファールド上の 1 つのプライマリ CTA。

コピー:

• 見出しに意味を持たせます。サポートコピーは通常、1 つの短い文です。
• デザインコメンタリーではなく、製品言語で書きます。UI にプロンプト言語または AI コメンタリーはありません。
• 各セクションは 1 つのジョブを取得: 説明、証明、深め、または変換。
• すべての文がその場所を得るべき。デフォルトはより多くのコピーではなく、より少ないコピー。

モジュール B: アプリとダッシュボード (グリーンフィールド)

デフォルトパターン:

• 落ち着いた表面階層、強いタイポグラフィとスペーシング、少数のカラー、密度があるが読みやすい情報、最小限のクローム。
• 以下を中心に構成: プライマリワークスペース、ナビゲーション、セカンダリコンテキスト/インスペクター、アクションまたは状態の 1 つの明確なアクセント。
• カードは、カードがインタラクション(クリック可能アイテム、ドラッグ可能ユニット、選択可能オプション)である場合のみ。パネルが意味を失わずにプレーンレイアウトになる場合、カード処理を削除します。

コピー(ユーティリティ、マーケティングではなく):

• プロミス、ムード、またはブランドボイスより、オリエンテーション、ステータス、アクションを優先します。
• セクション見出しは、エリアが何であるか、またはユーザーがそこで何ができるかを言う必要があります。良い: 「計画ステータス」「メトリクス検索」。悪い: 「あなたの可能性を解き放つ」。
• 文がホームページヒーローに表示される可能性がある場合、それが製品 UI のように聞こえるまで書き直します。
• リトマス試験: オペレーターが見出し、ラベル、および数字のみをスキャンする場合、ページを即座に理解できますか?

モジュール C: コンポーネントと機能 (既存アプリのデフォルト)

既存アプリケーションに追加する場合:

• 既存のビジュアル言語と一致させます。このモジュールは何か際立つものではなく、属するものを作成することです。
• 周囲のコードからスペーシングスケール、ボーダー半径、カラートークン、タイポグラフィを継承します。
• インタラクション品質に焦点を当てます: 明確な状態(デフォルト、ホバー、アクティブ、無効、ローディング、エラー)、状態間のスムーズなトランジション、明白なアフォーダンス。
• 1 つの新しいコンポーネントが新しいデザインシステムを導入すべきではありません。既存アプリが 4px ボーダー半径を使用する場合、8px を持つコンポーネントを追加しないでください。

---

ハードルールとアンチパターン

デフォルト反対 (上書き可能)

これはスキルが意見的です。ユーザーはそれらのいずれかを上書きできます。

• 最初の印象としてのジェネリック SaaS カードグリッド
• パープルオンホワイトカラースキーム、ダークモード偏り
• グリーンフィールド作業で過度に使用されるフォント(Inter、Roboto、Arial、Space Grotesk、システムデフォルト)
• 統計、スケジュール、ピルクラスター、ロゴクラウドで散らかった見出しセクション
• 異なる言葉で同じムード宣言を繰り返すセクション
• ナラティブ目的のないカルーセル
• 複数の競合するアクセントカラー
• 実際のビジュアルコンテンツの代わりに立つ装飾的グラデーションまたは抽象的背景
• デザインコメンタリーのように聞こえるコピー(「シームレスな統合を体験」)
• テキストが画像の忙しい側に座る分割スクリーンヒーロー

常に回避 (品質フロア)

これらは、ユーザーが望まない本当の品質失敗です。

• UI にリークするプロンプト言語または AI コメンタリー
• 壊れたコントラスト -- イメージまたは背景上で読み取り不可能なテキスト
• 見える フォーカス状態のないインタラクティブ要素
• 適切な HTML 要素が存在する場合のセマンティック div スープ

---

リトマス試験

コードを移動する前のクイック自己レビュー。すべてのチェックがすべてのコンテキストに適用されるわけではありません -- どのものが関連するかについて判断を適用します。

• ブランドまたは製品は最初の画面で識別不可能ですか?
• 1 つの強いビジュアルアンカーがありますか?
• 見出しのみをスキャンしてページを理解できますか?
• 各セクションは 1 つのジョブを持っていますか?
• カードは実際に使用されている場所で必要ですか?
• モーションは階層または雰囲気を改善しますか、それともそこにあるだけですか?
• すべての装飾的なシャドウが削除された場合、デザインはプレミアムに感じますか?
• コピーはプロンプトではなく製品のように聞こえますか?
• 新しい作品は既存デザインシステムと一致していますか? (モジュール C)

---

視覚的検証

実装後、視覚的に検証します。これはピクセルパーフェクトなレビューではなく、健全性チェックです。1 回のパス。明らかな問題がある場合は、修正してください。しっかり見えたら、進みます。

ツール設定優先度カスケード

最初に利用可能なオプションを使用します:

1. 既存プロジェクトブラウザーツーリング -- Playwright、Puppeteer、Cypress、または同様のものが既にプロジェクトの依存関係にある場合は、それを使用します。検証のためだけに新しい依存関係を導入しないでください。
2. ブラウザー MCP ツール -- ブラウザーオートメーションツール(例: claude-in-chrome)がエージェントの環境で利用可能な場合は、それを使用します。
3. agent-browser CLI -- 他に何も利用不可で agent-browser がインストールされている場合は、それを使用します。インストールされていない場合は、ユーザーに通知してください: 「agent-browser はインストールされていません。/ce-setup を実行して必要な依存関係をインストールしてください。」その後、次のオプションにスキップします。
4. メンタルレビュー -- ブラウザーアクセスが不可能な場合(ヘッドレス CI、インストール許可なし)、リトマス試験をセルフレビューとして適用し、視覚的検証がスキップされたことを記述してください。

評価対象

• 出力はプリビルド計画からのビジュアルテーゼと一致していますか?
• 明らかなビジュアル問題はありますか(壊れたレイアウト、読み取り不可能なテキスト、欠落イメージ)?
• コンテキストモジュール意図のように見えますか(ランディングページはランディングページのように感じる、ダッシュボードはダッシュボードのように感じる、コンポーネントはその周囲に適合)?

スコープ管理

1 回のイテレーション。スクリーンショットを撮り、リトマス試験に対して評価し、明らかな問題を修正して、進みます。スクリーンショットを成果物に含めます(PR 説明、会話出力など)。

複数のパス(複数のスクリーンショット-評価-修正ラウンド)を超えたイテレーティブ改善については、ce-design-iterator エージェントを参照してください。

---

クリエイティブエネルギー

このスキルは構造を提供しますが、目標は AI slop を避ける際立った作品です -- 定型化された出力ではありません。

グリーンフィールド作業では、大胆な美的方向にコミットします。トーンを考慮してください: 残忍なほど最小限、最大主義的、レトロフューチャーティック、有機的/自然、ラグジュアリー/洗練、遊び心、編集的、ブルータリスト、アールデコ、ソフト/パステル、インダストリアル -- または、コンテキストに適したものを発明してください。無限の味わいがあります。これらをインスピレーション用に使用しますが、プロジェクトに本物のデザインを行います。

問い: 何がこれを忘れられないようにしますか? 誰かが覚えている 1 つのこと は何ですか?

実装の複雑さを美的ビジョンと一致させます。最大主義的なデザインは、広範なアニメーションと効果を備えた精巧なコードが必要です。最小限のデザインは、スペーシング、タイポグラフィ、微妙な詳細への節度、精度、注意深い注意が必要です。優雅さは、強度ではなく、ビジョンをうまく実行することから来ます。