cofounder-frontend-design

汎用的な「AIスロップ」のような見た目を避け、独自性のある本番品質のフロントエンドインターフェースを作成するためのスキルです。美的な細部や創造的な選択に細心の注意を払い、実際に動作するコードを実装してください。

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

デザイン思考

コーディングを始める前に、背景を理解し、大胆な美的方向性を定めてください。

• 目的：このインターフェースはどのような問題を解決しますか？誰が使いますか？
• トーン：極端な方向性を選びましょう。徹底的にミニマル、マキシマリストな混沌、レトロフューチャー、オーガニック／ナチュラル、ラグジュアリー／洗練、遊び心のあるおもちゃ風、エディトリアル／雑誌風、ブルータリスト／無骨、アールデコ／幾何学的、柔らかい／パステル調、インダストリアル／実用本位など、さまざまな方向性があります。これらを参考にしつつ、選んだ美的方向性に忠実なデザインを作りましょう。
• 制約：技術要件（フレームワーク、パフォーマンス、アクセシビリティ）。
• 差別化：忘れられないものにする要素は何ですか？見る人の記憶に残るポイントは何ですか？

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

次に、以下の要件を満たす実際に動作するコード（HTML/CSS/JS、React、Vue など）を実装してください。

• 本番品質で、機能すること
• 見た目が際立ち、記憶に残ること
• 明確な美的視点を持ち、全体に統一感があること
• 細部まで丹念に仕上げられていること

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

次の点に注力してください。

• タイポグラフィ：美しく、独自性と興味を引くフォントを選びましょう。ArialやInterのような一般的なフォントは避け、フロントエンドの美しさを高める個性的なフォントを選びます。特徴的なディスプレイフォントと、洗練された本文用フォントを組み合わせましょう。
• 色とテーマ：統一感のある美的方向性を貫きましょう。CSS変数を使って一貫性を保ちます。控えめで均等に配分された配色より、主役となる色に鮮やかなアクセントを加える配色のほうが効果的です。
• モーション：エフェクトやマイクロインタラクションにアニメーションを使いましょう。HTMLではCSSだけで実現できる方法を優先します。ReactでMotionライブラリが利用できる場合は活用してください。効果の高い場面に集中しましょう。表示タイミングをずらした演出（animation-delay）を使って、ページ読み込み時の動きを入念に組み立てるだけでも、あちこちに小さなインタラクションを散りばめるより大きな楽しさを生み出せます。スクロールをきっかけとする動きや、意外性のあるホバー状態も取り入れましょう。
• 空間構成：意外性のあるレイアウトを取り入れましょう。非対称、重なり、斜めの流れ、グリッドを崩す要素などを活用します。広い余白を取るか、密度を意図的に調整しましょう。
• 余白とリズム：要素間の余白を一貫させることは、譲れない基盤です。Tailwindの余白スケール（p-、m-、gap-、space-y-、space-x-）を体系的に使いましょう。各コンテナに適切なパディングを設定してください。項目のリストでは、間隔を統一しましょう。各セクションには、隣接するセクションとの間に十分な余裕を持たせてください。創造的なレイアウトは、しっかりした余白の基礎の上に成り立ちます。美的な実験のためにパディングやマージンを犠牲にしてはいけません。コンポーネントのスタイルをカスタマイズしたり上書きしたりする際は、余白を明示的に維持するか、意図して調整し、気づかないうちにゼロにならないようにしてください。
• 背景とビジュアルの細部：単色に頼らず、雰囲気と奥行きを生み出しましょう。全体の美的方向性に合ったエフェクトやテクスチャを加えます。グラデーションメッシュ、ノイズテクスチャ、幾何学模様、透明度を重ねたレイヤー、ドラマチックな影、装飾的な境界線、カスタムカーソル、グレインオーバーレイなど、創造的な表現を取り入れましょう。

ライト／ダークモードシステム

覚えておくべき点が2つあります。

1. 両方のモードを意図的にデザインしてください。 ダークモードは「色を反転する」だけではありません。それぞれのモードに、背景の色調、テキストのコントラスト、アクセントカラーの鮮やかさ、影の深さ、ボーダーの不透明度を個別に調整した、厳選されたパレットが必要です。白を黒に置き換えただけのダークテーマは、色あせて生気のない印象になります。それぞれのモードを、独自の個性を持つ本格的な体験としてデザインしてください。
2. CSS カスタムプロパティを唯一の信頼できる情報源として使用してください。 すべてのカラーのトークンを、:root（ライト）と [data-theme="dark"]（または .dark）に --color-* 変数として定義します。コンポーネントで生のカラー値を直接参照してはいけません。変数のみを使用してください。これにより、テーマの変更を一か所で行え、両方のモードを完全に同期できます。切り替え状態として Light、Dark、System の3つを用意します。デフォルトの System は、prefers-color-scheme: dark を介して OS 全体の設定に従います。ユーザーの選択は localStorage に保存して再読み込み後も維持しますが、常に System から開始し、アプリが最初からプラットフォームの設定に従うようにしてください。
3. プリレンダリングされたページでは、data-theme は React ではなくインラインの <head> スクリプトが管理する必要があります。 描画前に実行される小さなスクリプトで設定し、React がレンダリングする JSX からこの属性を除外して、<html> に suppressHydrationWarning を追加してください。プリレンダリングされた HTML にはビルド時の値が埋め込まれます。React にこの属性をレンダリングさせると、ハイドレーションの不一致やテーマのちらつきが発生します。

インタラクションのフィードバック

• 操作には必ず視覚的なフィードバックを提供してください。 処理を開始するすべてのユーザー操作に、目に見える反応が必要です。たとえば、ダイアログを閉じずに保存するボタンには、短い成功状態（チェックマーク、色の点滅、トースト通知、控えめなパルスなど）を表示します。成功しても何も表示されないと、ボタンが壊れている場合と区別できません。操作の重要度に応じて、フィードバックの強さを調整してください。破壊的な削除には、通常の保存よりも明確な確認を表示します。
• カーソルのスタイルで操作可能な要素を示してください。 クリックできる要素（ボタン、リンク、カード、切り替え、タブ）には cursor: pointer を設定します。無効な要素には cursor: not-allowed を、ドラッグ可能な項目には cursor: grab／cursor: grabbing を使用します。カーソルは、要素が操作可能であることをユーザーに伝える最初の手がかりです。デフォルトの矢印のままでは、操作できることが伝わりません。

ファビコン

アプリ用のカスタムファビコンを必ず生成してください。Vite のデフォルト（vite.svg）を再利用しないでください。ブランドアイデンティティの一部としてデザインし、選択した美的方向性（カラーパレット、ビジュアルモチーフ、全体的なトーン）を反映させてください。16×16px でも認識しやすい、シンプルな形状にしてください。

<link rel="icon"> の href に、インライン SVG データ URIとして指定してください。public/ に別ファイルを作成しないでください。cofounder アプリ（React Router フレームワークモード。index.html はありません）では、app/root.tsx の links エクスポートを使って宣言してください。

export const links: Route.LinksFunction = () => [
  { rel: "icon", href: "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='7' fill='%23e74c3c'/></svg>" },
];

単独の HTML ページでは、同じ <link> を <head> に直接記述してください。

<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='7' fill='%23e74c3c'/></svg>">

16 進カラーコードの # の代わりに %23 を使用してください。# は URL 内で特別な意味を持ち、データ URI が気付かれないまま壊れる原因になります。

よく使われるフォントファミリー（Inter、Roboto、Arial、システムフォント）、ありきたりな配色（特に白い背景に紫のグラデーション）、予測可能なレイアウトやコンポーネントのパターン、そして文脈に即した個性のない画一的なデザインなど、一般的な AI 生成の美的表現は絶対に使用しないでください。

創造性を発揮して解釈し、文脈に合った、本当にデザインされたと感じられる意外性のある選択をしてください。どのデザインも同じにならないようにしてください。ライトテーマとダークテーマ、さまざまなフォントや美的表現を使い分けてください。生成を重ねるうちに、よくある選択肢（たとえば Space Grotesk）へ収束することは絶対に避けてください。

重要：実装の複雑さは、美的ビジョンに合わせてください。マキシマリストなデザインには、豊富なアニメーションやエフェクトを含む、作り込まれたコードが必要です。ミニマリストや洗練されたデザインでは、抑制、精密さ、余白やタイポグラフィ、繊細なディテールへの注意が必要です。優雅さは、ビジョンを巧みに実現することで生まれます。

Claude には、並外れた創造的な仕事を生み出す力があります。遠慮せず、既成概念にとらわれず、独自のビジョンを貫くことで何が生み出せるのかを示してください。