はじめに
デザイナーが作ったFigmaや参考画像を見ながら、ピクセル単位でCSSを書き起こす作業——地味に時間を食います。色を拾い、余白を測り、フォントサイズを当てはめて……。
最近はAI（Claude、GPT-4o、Gemini など）のマルチモーダル能力が十分実用的になってきたので、画像を渡して「これをCSSにして」と頼むフローを実務に組み込んでいます。ただ、ただ画像を投げるだけでは精度がイマイチ。自然言語での補足と適切なプロンプト設計をセットにすると、一気に使える出力になります。
この記事では、自分が普段使っている画像→CSS生成のフローとプロンプトのコツを紹介します。
想定読者
- フロントエンドエンジニアで、デザインカンプ起こしに時間がかかっていると感じている人
- AI（特にClaude CodeやCursor）を日常的に使っている人
- プロンプトをそのままコピペして試したい人
全体フロー
┌─────────────────┐
│ 1. 画像を用意 │ Figma書き出し / スクショ / 手描きラフ
└────────┬────────┘
↓
┌─────────────────┐
│ 2. 文脈を言語化 │ どこの、何のための、どういう状態のUIか
└────────┬────────┘
↓
┌─────────────────┐
│ 3. プロンプトで │ 制約・トークン・出力形式を指定
│ 制約を渡す │
└────────┬────────┘
↓
┌─────────────────┐
│ 4. 生成・検証 │ ブラウザで確認 → 差分を自然言語でフィードバック
└─────────────────┘
ポイントは**「画像だけ投げない」**こと。画像はあくまで入力の一部で、自然言語での補足がないとAIはプロジェクトの文脈を知らないので、浮いたCSSが出てきます。
各ステップの詳細
1. 画像を用意する
準備する画像は以下のいずれか。
- Figmaからフレーム単位でPNG書き出し（2x推奨）
- 実装済みの参考サイトのスクショ
- 手描きのラフをスマホで撮ったもの
コツ: 余計な領域を含めず、対象コンポーネントだけをトリミングすること。周囲のUIが写っていると、AIがそちらに引きずられて意図しないCSSを返してくることがあります。
2. 文脈を言語化する
ここがいちばん効きます。画像に写っていない情報を先にテキストで渡す。具体的には以下。
- どこの画面のなにか（例: ダッシュボードの通知カード / ランディングのヒーローセクション）
- インタラクション状態（デフォルト / hover / active / disabled）
- レスポンシブの扱い（モバイルファースト / PCのみ / ブレークポイント）
- 既存のデザイントークン（CSS変数、Tailwindのテーマ、既存スタイルガイドなど）
これを書かないと、AIは「それっぽい汎用CSS」を返してきます。
3. プロンプトで制約を渡す
ここでテンプレを使います。以下のプロンプトをベースに、案件ごとにトークンや制約を差し替えて使っています。
汎用プロンプト（コピペ用）
添付した画像のUIをCSSで再現してください。
## コンテキスト
- 画面: {どこの画面}
- コンポーネント名: {コンポーネント名}
- 状態: {デフォルト / hover / active など}
- 対象ブラウザ: {モダンブラウザのみ / IE11対応 など}
## 技術スタック
- CSSフレームワーク: {Tailwind v4 / CSS Modules / 素のCSS など}
- 既存のデザイントークン:
```css
--color-primary: #0066ff;
--color-bg: #ffffff;
--radius-md: 8px;
--space-4: 16px;
--font-sans: "Inter", sans-serif;
```
## 出力ルール
- 既存のデザイントークンがあればそれを優先して使う
- トークンにない値のみ生の数値で書く（その際はコメントで理由を付ける）
- マジックナンバーは避け、rem / em / % を適切に使い分ける
- フォントサイズは画像から推定し、rem換算で記述
- hoverやfocusなどのインタラクション状態も推測して含める
- 実装後のHTML構造も提示する
## 出力形式
1. 推定したデザインの要約（3〜5行）
2. HTML
3. CSS
4. 採用した値の根拠（色・余白・フォントサイズの推定理由）
ポイントは最後の「採用した値の根拠」。これを出させることで、AIがどう画像を読み取ったかが可視化され、ズレの修正が一発でできます。
4. 生成・検証・フィードバック
出てきたコードをそのままブラウザに貼って確認します。だいたい8割くらいの精度なので、残り2割を自然言語でフィードバックします。
フィードバック時のコツは**「どう違うか」を具体的に言語化すること**。
悪い例:
もっといい感じにして
良い例:
ボタンの角丸が強すぎます。画像だと4pxくらいに見えますが、12pxで出力されています。
また、アイコンとテキストの間隔が狭いので、8px → 12pxに広げてください。
hoverで背景が暗くなる挙動も追加してほしいです（画像の右側の状態を参照）。
画像の中でどの部分を指しているかを明示すると、さらに精度が上がります。
実例: カード型の通知コンポーネント
実際に手元でやったときの流れを紹介します。
入力した自然言語
添付画像はSaaS管理画面の「未読通知カード」です。
## コンテキスト
- 画面: ダッシュボード左サイドの通知リスト内の1アイテム
- 状態: 未読（左端に青いドット / 背景が薄い青）
- 既読時は背景が透明になり、ドットが消える想定
## 技術スタック
- Tailwind CSS v4
- 既存トークン: primary-500 (#2563eb), neutral-50 (#f9fafb), neutral-900 (#111827)
## 出力ルール
- Tailwindクラスで記述（任意値[]は最小限）
- 未読・既読の両方をdata属性で切り替えるHTML構造
- 根拠も添えて
AIから返ってきた出力（抜粋）
<article
data-read="false"
class="group relative flex gap-3 rounded-lg bg-blue-50 p-4 transition-colors
hover:bg-blue-100 data-[read=true]:bg-transparent"
>
<span
class="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-primary-500
group-data-[read=true]:hidden"
aria-hidden="true"
></span>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-neutral-900">新しいコメントが届きました</p>
<p class="mt-0.5 text-xs text-neutral-500">2分前 · プロジェクトA</p>
</div>
</article>
根拠の出力例
- 背景色:
bg-blue-50→ 画像の背景は彩度の低い薄青で、neutral-50より明らかに青寄り- パディング:
p-4(16px) → ドットとテキストの余白、カード端の余白からおおよそ16pxと推定- ドットサイズ:
h-2 w-2(8px) → 相対的にテキスト1文字分の高さの半分程度- gap:
gap-3(12px) → ドットとテキストの距離がドットの1.5倍程度
この根拠があると、「ドットのサイズだけ10pxにしてほしい」みたいな微調整がやりやすい。
うまく使うためのTips
トークンを先に食わせる
デザインシステムがあるプロジェクトでは、先にトークン一覧をプロンプトに含めるのが必須。そうしないと生の#2563ebみたいな値が出てきて、あとで全部置換する羽目になります。
Claude CodeならCLAUDE.mdや.cursor/rulesにトークンを書いておくと、毎回コピペしなくて済みます。
画像を複数枚渡す
- デフォルト状態 + hover状態の2枚
- デスクトップ + モバイルの2枚
- ライトモード + ダークモードの2枚
複数枚渡すと、AIが状態間の差分を読み取ってくれるので、CSS変数の設計まで提案してくれます。
苦手なものを知る
AIは以下の要素が苦手です。
- フォントの特定: 画像だけから「これはInter」「これは游ゴシック」を当てるのは無理。フォント名は必ず明示する
- 厳密なピクセル値: 1〜2px単位の誤差は出る前提で、あとから微調整する
- 複雑なグラデーション: 方向と色は合うが、角度や停止位置のズレが出やすい
- z-index: 画像から重なり順を正確に読み取れない。構造で補足する
検証を自動化する
生成したCSSをそのまま信用せず、Storybookやプレビュー環境でデザインと並べて表示して差分を見る運用が安全です。Playwrightでスクショを撮ってdiffをとる、みたいなところまでやるプロジェクトもあります。
おわりに
AIに画像からCSSを生成させるのは、「ベテランの実装者によくあるUIをサクッと書いてもらう」のに近い感覚です。完璧を期待せず、8割を爆速で作って2割を人間が調整するくらいの分担がちょうど良い。
プロンプトのテンプレ化、デザイントークンの事前共有、そして具体的な自然言語フィードバック——この3つを意識するだけで、体感の生産性が大きく変わります。
もし同じようなフローでやってる方がいたら、プロンプトの工夫をコメントで教えてもらえると嬉しいです。