付録E AI に Tailwind コードを依頼するときのプロンプト集
第26章・第27章・第30章で見たとおり、AI は Tailwind を出力しやすい一方、規約を知らないと崩れがちです。ここでは、実務ですぐ使えるプロンプトの型を示します。
E.1 良い依頼の型: 前提を渡す
「カードを作って」だけでは、AI は独自の色やスケールで作ってしまいます。既存のテーマと規約を前提として渡すのがコツです。
悪い例:「Tailwind でカードコンポーネントを作って」
良い例:「Tailwind v4 でカードを作ってください。色は既存のデザイントークン（
bg-surfacetext-foregroundborder-border）だけを使い、独自のbg-gray-*や任意の値（[...]）は使わないでください。余白は spacing スケール（p-4p-6など）に従ってください。」
E.2 出力形式の明示
「出力は React の関数コンポーネント（TypeScript, tsx）で、props で
intent（primary/secondary）とsize（sm/md）を受けられるようにしてください。バリアントは CVA で定義し、cnヘルパーでclassNameを合成してください。」
Rails なら「ERB の部分テンプレートで」「ViewComponent で」、と形式を指定します。
E.3 制約の指定（崩れを防ぐ）
「次の制約を守ってください。
- クラス名は完全な文字列で書く（
bg-${color}のような動的生成は禁止）。- 色・余白はデザイントークンを使い、任意の値（
[...]）は避ける。- レスポンシブ（
sm:md:）とアクセシビリティ（aria-*、focus-visible:、適切な HTML 要素）を考慮する。」
E.4 そのまま使えるプロンプト例
新規 UI 生成:
「Tailwind v4 ＋ React(tsx) で、通知カードのコンポーネントを作ってください。デザイントークン（
bg-surfacetext-foregroundtext-muted）のみ使用。タイトル・本文・閉じるボタンを持ち、閉じるボタンにはaria-labelとfocus-visible:のリングを付けてください。動的クラス名と任意の値は使わないこと。」
既存コンポーネントの改修:
「次のコンポーネントを、ダークモード対応にしてください。
dark:を直接ベタ書きするのではなく、セマンティックトークン（bg-surfaceなど）で表現する方針です。アクセシビリティとレスポンシブは崩さないでください。\n\n（ここにコードを貼る）」
リファクタリング:
「次の長いクラス列を持つボタンを、CVA でバリアント整理し、
cnでclassNameを合成する形にリファクタリングしてください。見た目は変えないこと。\n\n（ここにコードを貼る）」
E.5 レビュー用チェックリスト
AI の出力は「下書き」として受け取り、次を確認してから取り込みます（第27章）。
- 使われているクラスは実在するか（綴り間違いがないか）。
-
レスポンシブが破綻していないか（
md:などの設計が妥当か）。 -
アクセシビリティを落としていないか（適切な要素・
aria-*・フォーカス可視化）。 - 色・余白・角丸・影がトークンに沿っているか（直値・任意値の乱用がないか）。
-
text-${color}のような検出漏れパターンがないか。 - 長いクラス列は、コンポーネントや CVA に畳み込めているか。