Frontend Design

• 視覚的な品質と独自性が重要な新しいUIコンポーネントやページを構築する場合（機能的な正確さだけでなく）。
• 製品やランディングページのプロトタイプを作成する際に、自動生成されたものではなく、本当にデザインされたように見えるものを求めている場合。
• ブランド、アプリ、またはキャンペーンのクリエイティブな方向性を探る場合（デザインシステムに着手する前に）。
• 単調でありきたりな既存のインターフェースを、明確な美的観点を持つものに置き換える場合。

• 厳格なブランド／デザインシステムへの準拠が必要な場合 — このスキルはクリエイティブな独自性を優先するため、既存のスタイルガイドから逸脱する可能性があります。
• バックエンドAPIやデータレイヤーのみが必要な場合 — このスキルはフロントエンドのプレゼンテーションコードに特化しています。

コードを一行も書く前に、このスキルは明確なコンセプトのトーンにコミットします — 徹底的なミニマル、マキシマリスト、オーガニック、ラグジュアリー、インダストリアル、エディトリアルなど、多岐にわたります。その結果、ありきたりな寄せ集めではなく、一貫した視点を持つインターフェースが生まれます。

汎用的なフォントスタック（Inter、Roboto、Arial）は明示的に避け、個性的なディスプレイフォントと本文フォントの組み合わせを優先します。カラーパレットはCSSカスタムプロパティを使用し、おとなしく均等に分散したカラースキームではなく、支配的なメインカラーとシャープなアクセントカラーで構成します。

アニメーションは戦略的に活用されます — 段階的な遅延を伴うオーケストレーションされたページ読み込みのリビール、スクロールトリガーのエフェクト、そして驚きを与えるホバー状態などが含まれます。HTMLにはCSSのみのソリューションが優先され、Reactが利用可能な場合はMotionライブラリが使用されます。

背景はベタ塗りの色に留まりません。グラデーションメッシュ、ノイズテクスチャ、ジオメトリックパターン、レイヤー状の透明効果、ドラマチックなシャドウ、グレインオーバーレイ、装飾的なボーダーなどが、文脈に応じて活用され、奥行きと雰囲気を生み出します。

レイアウトは非対称性、重なり、斜めの流れ、グリッドを破る要素を重視します。余白を大胆に取るか、密度を凝縮するかは意図的に選択されるものであり、デフォルトの結果であってはなりません。

生成されるコードは実用的かつ本番グレードで、HTML/CSS/JS、React、Vue、その他のフレームワークに対応しています。複雑さはデザインのビジョンに合わせて調整され、マクシマリストなデザインには精巧なアニメーションが含まれ、ミニマリストなデザインは精度と抑制を追求します。

あるファウンダーが、競合他社と差別化されたランディングページを求めています。このスキルは大胆な美的方向性を選択します — たとえば、強いタイポグラフィ階層を持つエディトリアル／マガジン風スタイル — そして、スクロールアニメーションと独自のカラーシステムを備えた完全に動作するページを生成します。

デザイナーや開発者には、自分の個性を反映した個人サイトが必要です。このスキル「Frontend Design」は、テンプレートのような構造を避け、非対称なレイアウト、カスタムカーソル、丁寧に選ばれたフォントの組み合わせなど、印象に残るものを制作します。

チームは、テーブル、チャートカード、フィルターパネルなど、データが密集したインターフェースコンポーネントを必要としながらも、洗練されたデザイン感を求めています。Frontend Design スキルは、実用的またはミニマリスト的な美学を取り入れ、細部まで計算されたスペーシングと繊細なモーションを組み合わせることで、コンポーネントに磨き上げられた印象を与えます。

キャンペーンページは、没入感があり、視覚的に印象的である必要があります。このスキルは、レイヤード視覚エフェクト、ドラマチックなタイポグラフィ、そして本物の感動を生み出す演出されたエントランスアニメーションを備えた、マキシマリストでアニメーション豊富なページを作成できます。