コンポーネント単位でAIに依頼するのが鉄則
ページ全体を一度に作ろうとするとAIの出力が長くなりすぎ、既存HTMLへの組み込みが困難になります。カードひとつのように小さな単位で依頼することが、使いやすいコードを得る最大のコツです。
プロンプト例（商品カード）
「ECサイト用の商品カードコンポーネントをHTMLとCSSで作ってください。
構成要素：商品画像（16:9比率）・商品名（h3）・価格（税込み）・カートボタン・NEWバッジ（任意表示）
横幅：280px固定
hover時：カードが軽く浮き上がるシャドウアニメーション
クラス名はすべて .product-card__ で始めてください（BEM）。」
用途別カードのプロンプトパターン
- ブログカード：「サムネイル・カテゴリタグ・タイトル・投稿日・読了時間を含むブログカード」
- プロフィールカード：「アバター・名前・肩書き・SNSリンク・フォローボタン付きプロフィールカード」
- 料金プランカード：「プラン名・月額・機能リスト・CTAボタン・おすすめバッジ付き料金カード」
- 統計カード：「アイコン・数値・前月比・ミニグラフ付きダッシュボードカード」
既存HTMLへの組み込み手順
- まず別ファイル（test.html）でAI生成コードが単体動作することを確認する。
- 使用フォント・アイコンが既存ページで読み込まれているかチェックする。
- クラス名の重複・CSSの競合がないことを確認してから本番に組み込む。
💡 コツ：AIに「既存のCSS変数（–color-primary: #3498db）を使ってください」と伝えると、プロジェクトのカラーパレットに合ったコードが生成されます。
