フロントエンドUIデザインを洗練された独自性のあるスタイルで生成します。ランディングページ、ダッシュボード、Webアプリケーションのデザイン、UIコンポーネント作成時に使用してください。「AIっぽい」汎用デザインを避け、プロフェッショナルで記憶に残るUIを実現します。
このスキルは、AIが生成しがちな「汎用的で無個性なデザイン」を避け、洗練された独自性のあるフロントエンドUIを作成するためのガイドラインです。
以下のパターンは「AIスロップ美学」と呼ばれ、避けるべきです：
推奨フォントの組み合わせ例：
| ヘッダー | ボディ | 特徴 |
|---|---|---|
| Playfair Display | Source Sans Pro | クラシック＆モダン |
| Space Grotesk | Inter | テック＆ミニマル |
| Fraunces | Work Sans | エレガント＆読みやすい |
| DM Serif Display | DM Sans | 統一感のある対比 |
| Syne | Outfit | 大胆＆現代的 |
タイポグラフィ原則：
カラーパレット構築原則：
プライマリ：ブランドアイデンティティを表す主色
セカンダリ：プライマリを補完する色（補色または類似色）
アクセント：CTAやハイライトに使用する注目色
ニュートラル：背景やテキストに使用するグレー系
独自性を出すテクニック：
差別化するレイアウトパターン：
効果的なアニメーション原則：
高影響度の瞬間に集中
タイミングの指針
イージング関数
/* 推奨イージング */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
背景デザインのアイデア：
進捗チェックリスト：
詳細なテーマ例については以下を参照：
フォントペアリング即決リスト：
カラー参考：