正確なスタイリングプロンプトを書けるかどうかが、AIが汎用的なUIを生成するか、ブランドに合った洗練されたUI（すべてのユーザーが使えるもの）を生成するかの分かれ目になる。 このセクションでは、そのために必要な語彙とテクニックを身につける。
「いい感じにして」のような曖昧な指示はAIに推測を委ねることになる。色・スタイルの種類・コントラスト比・シャドウの深さを具体的に指定するスタイリングプロンプトを書くことで、実際にリリースできるクオリティの結果が得られる。
| ページ | 学べること |
|---|---|
| スタイリングとフレームワーク | CSSフレームワーク・カラーシステムの指定方法 |
| スタイリングの基礎 | ビジュアル階層・スタイルの種類・色が行動に与える影響 |
| UIスタイリングのカラー理論 | 色彩心理学・調和ルール・hexカラーパレットリファレンス |
| テーマとシャドウの深さ | ライト/ダーク/オートテーマ・シャドウレベル・エレベーション階層 |
| レスポンシブデザインとアクセシビリティ | ブレークポイント・WCAGコントラスト・アクセシビリティチェックリスト |
| 上級スタイリングテクニック | グラデーション・マイクロインタラクション・CSS変数・カラーパレット |
| スタイリングプロンプトの実例 | 実践的なプロンプト例6点（良い例・悪い例付き） |
効果的なスタイリングプロンプトの核心原則
Section titled “効果的なスタイリングプロンプトの核心原則”スタイルの種類を明示的に指定する — 「モダンなスタイル」ではなく「バックドロップブラーを使ったグラスモーフィズム」と書く
具体的なカラー値を含める — 「青い色」ではなく「#3B82F6 をプライマリカラーとして」と書く
ライトとダーク両方の挙動を指定する — テーマごとに色とシャドウがどう変わるかを明記する
アクセシビリティ要件を追加する — WCAGコントラスト比を含めることでAIが可読性を考慮するようになる