AI コーディングエージェントでデザイン再現精度を上げる 7 つのテクニック

X で 毎日 AI 情報を配信してるコムテです。Agentic AI / AI 駆動開発などを中心に情報を配信しています

AI コーディングエージェントっていうのは、コードを自動生成してくれる AI エージェント（自律的に行動してゴールの達成をするシステム）のこと。Cursor、Claude Code、Antigravity、GitHub Copilot あたりが有名やね

デザインを渡せば HTML/CSS を書いてくれるし、「こんな機能作って」って言えばコンポーネントを生成してくれる。人間がやってた「手を動かしてコードを書く」部分を AI が代行してくれるイメージ

AI コーディングエージェントにデザインを渡す時、やり方で精度が全然変わる

Figma のデザインや参考サイトのスクリーンショットを AI コーディングエージェント に渡して「これ実装して」って頼むこと、めっちゃ増えたよね

やけど、同じデザインを渡しても、人によって出てくるコードの精度が全然違う

80 点で妥協する人もいれば、120 点のクオリティまで持っていく人もいる

Figma MCP 使っても綺麗に再現してくれない

その差は「AI への渡し方」と「フィードバックの出し方」にあるんよ

今回は、有料プラン契約して、ガンガン使い込んでるワイが、Antigravity、Claude Code、Cursor など、どの AI コーディングエージェントでも使える「デザイン再現の精度を上げるテクニック」を 7 つ紹介していく

モデルを選択する

ワイが使い分けてる感覚だと、モデルにはこんな傾向がある

画像を切り出すときは、Figma MCP プラグインインストールすればいいし、新たにアイコンや画像を作りたい場合は、Gemini 3 系をメインで使えばいい

個人的には Antigravity + Gemini 3 Flash の組み合わせがフロントエンドに強いと感じてるけど、結局は 1 つのモデルに固執しない。タスクごとに切り替える のが一番いい

それじゃあ、デザインの再現率を上げるテクニックを紹介していくよ

テクニック 1：セクション単位で切り出す

セクションというのは、ページ内の一つのエリアのこと。ヘッダー、ヒーローセクション、コンテンツエリア、フッターなどがセクションになる

コンテンツエリアは、例えばサービスの特徴・料金表・FAQ セクションのこと

デザイン全体のスクリーンショットを一気に渡すのは、実は逆効果やったりする

AI は視覚情報を処理する時、画像全体に均等に注意を払おうとするから、「ここが重要」っていう部分に焦点が合いにくくなる

例えば、ランディングページ全体を渡すと、ヘッダー、ヒーローセクション、機能紹介、フッターすべてが混在して、どこに注力すべきか判断しづらい

それよりも、「このヒーローセクションだけ」「この CTA ボタン周辺だけ」って切り出して渡す方が、圧倒的に精度が上がる

なぜ切り出すと精度が上がるのか

AI の視覚認識には「解像度」みたいな概念があって、情報量が少ないほど細部まで読み取れる

全画面だと「大体こんな感じのレイアウト」っていう粗い認識になるけど、セクション単位だと「この余白は 32px」「このフォントは font-semibold」っていう細かいレベルまで見てくれる

余白のピクセル感、フォントのウエイト、微細なシャドウや角丸の R（半径）まで正確に認識できるようになるんよ

これは研究でも裏付けられてて、FastVLM の論文では「画像解像度のスケーリングが VLM の性能向上に不可欠」って言われてる。ただし、高解像度の画像をそのまま渡すとトークン数が増えて非効率になるから、必要な部分だけ切り出すのが効率的なんよね

さらに面白いのが、VLM のアテンションヘッド研究で、数千あるアテンションヘッドのうち、たった 3 つで位置特定ができるって分かってる。つまり AI は画像の特定領域に集中する仕組みを持ってるから、こっちがその領域を絞ってあげると精度が上がるってこと

だから、Figma MCP を使う場合も、セクションや UI ごとにリンクを投げると再現率が高くなる

具体例：ヒーローセクションの切り出し

例えば、こんな感じで切り出す

画面全体ではなく、ヒーローセクションの「見出し + サブテキスト + CTA ボタン」だけをトリミングして渡す

そうすると、AI は以下のような細部まで拾ってくれる

• 見出しと本文の行間（line-height）
• ボタンの角丸の数値（rounded-lg なのか rounded-xl なのか）
• ボタンのパディング（px-6 py-3 なのか px-8 py-4 なのか）
• 見出しとボタンの間の余白（gap-4 なのか gap-6 なのか）

全画面で渡すと「とりあえず見出しとボタンを配置しました」で終わるけど、切り出すと「Tailwind の gap-6、rounded-xl、px-8 py-4 で実装しました」っていう具体的なコードが返ってくる

ツールごとの切り出し方

どのツールでも基本は同じやけど、ちょっとした違いがある

写真や画像を渡すときは、Figma MCP を使って書き出してる。Antigravity で難しい場合は、Claude Code を使って書き出す

Antigravity や Claude Code は、画像をアップロードする時に「この部分だけ見て」ってコメントを添えるとさらに精度が上がる

Cursor は、エディタ内でコメントとして「このセクションを参考に」って書いて画像を貼ると、前後のコードと比較しながら生成してくれる

テクニック 2：既存コードとクラス設計を読み込ませる

AI にデザインを渡す時、いきなり「これ作って」って言うよりも、既存のコードを先に読み込ませておくと、サイト全体の統一感を保ったまま実装してくれる

特に、Tailwind CSS や CSS Modules を使ってるプロジェクトだと、クラス名の命名規則やスペーシングのルールが既にあるはずやから、それを学習させることで「このサイトっぽい」コードが出てくる

トーン＆マナーの継承

既存のコンポーネントファイルを読み込ませると、AI は以下のようなパターンを学習する

• クラス名の命名規則（BEM なのか、単純な utility-first なのか）
• スペーシングの基準（gap-4 が標準なのか、gap-6 が標準なのか）
• カラーパレット（primary、secondary、accent の使い分け）
• タイポグラフィ（見出しは text-2xl font-bold が標準なのか、text-3xl font-semibold が標準なのか）

これを事前に渡しておくだけで、新しいセクションを生成する時も「このサイトの文脈に沿った」コードが返ってくる

具体例：既存ボタンのスタイルを継承

例えば、既にこんなボタンコンポーネントがあるとする

このコードを読み込ませた状態で、新しい CTA セクションのデザインを渡すと、勝手に px-6 py-3 rounded-lg っていうスタイルを継承してくれる

逆に、既存コードを読ませずにいきなり「これ作って」って言うと、px-8 py-4 rounded-xl みたいに微妙に違うスタイルで実装されて、後で統一するのが面倒になる

Tailwind の config も読ませる

Tailwind CSS を使ってる場合、tailwind.config.js も一緒に読み込ませると、カスタムカラーやスペーシングの設定まで反映してくれる

この config を読ませておけば、AI は勝手に bg-primary とか mt-18 みたいなカスタムクラスを使ってコードを生成してくれる

テクニック 3：修正指示を反復で伝える

一発で完璧なコードが返ってくることは、まずない

やけど、多くの人がここで諦めてしまう

「だいたい合ってるからいいか」で妥協するんよね

実は、細かい修正指示を何度も出すことで、80 点のコードが 100 点、120 点に化ける

AI は反復フィードバックに強いから、「角丸をもっと小さく」「左寄せに」「間隔を狭めて」みたいな具体的な指示を出すほど、理想形に収束していく

なぜ反復が効くのか

AI は「前回の生成結果」をコンテキストとして保持してるから、修正指示を出すたびに「前回からの差分」を理解して調整してくれる

例えば、最初に生成されたボタンが px-8 py-4 rounded-xl だったとして、「もっと小さく」って指示を出すと、px-6 py-3 rounded-lg に調整される

さらに「角丸をもっと控えめに」って言うと、rounded-md になる

このように、段階的に理想形に近づけていける

これは Self-Refine の研究でも証明されてて、反復的なフィードバックと改善によって、タスクパフォーマンスが平均 20% 向上するって結果が出てる。しかも追加の学習データや強化学習なしで、同じ LLM を使って生成 → フィードバック → 改善のループを回すだけでこの効果が得られる

具体例：CTA ボタンの微調整

最初に生成されたコードがこんな感じだとする

やけど、デザインを見ると「もうちょっと小さめで、角丸も控えめ」っていう感じやったとする

そこで、こんな修正指示を出す

「ボタンのパディングを px-6 py-3 に変更して、角丸を rounded-lg にして」

すると、こうなる

さらに、「フォントを font-semibold に変えて、ホバー時に少し明るくして」って追加で指示を出すと、最終的にこうなる

このように、反復で伝えることで、最初の 80 点が 120 点に到達する

諦めずに指示を出し続けることが最強

多くの人が「AI に修正を頼むのは面倒」って思ってるけど、実は自分で手動で修正するよりも速い

AI は「この数値を変えて」っていう指示に対して、瞬時に反映してくれるから、手動で CSS を書き直すよりも圧倒的に速く調整できる

だから、「微調整を諦めず、何度も指示する」ことが、最強のアプローチになる

テクニック 4：インタラクションを言語化する

静止画だけだと、「動き」の部分が伝わらない

ホバー時のアニメーション、クリック時のフィードバック、スクロール時の挙動など、UX に関わる部分は言葉で補足しないと、AI は実装してくれない

例えば、「ホバーした時にふわっと浮き上がる感じ」「クリックした時に少し沈み込む」「スクロールに応じてフェードインする」みたいな表現を添えると、コードに反映しやすくなる

具体例：ホバー時の浮き上がり

例えば、カードコンポーネントにホバー時の浮き上がり効果を付けたいとする

静止画だけだと、AI はこんなコードを生成する

やけど、「ホバー時にふわっと浮き上がる感じ」って添えると、こうなる

hover:-translate-y-2 と hover:shadow-xl が追加されて、ホバー時に浮き上がる効果が実装される

具体例：クリック時の沈み込み

ボタンに「クリックした時に少し沈み込む」っていう効果を付けたい場合も、言葉で伝えるだけで実装される

active:scale-95 が追加されて、クリック時に少し縮む効果が入る

Framer Motion や GSAP の指定も有効

もっと複雑なアニメーションを実装したい場合、「Framer Motion を使って、スクロールに応じてフェードインさせて」みたいに指定すると、ライブラリを使ったコードを生成してくれる

このように、インタラクションを言語化することで、静止画では伝わらない「質感」まで実装できる

テクニック 5：アクセシビリティを意識する

デザインを再現する時、見た目だけ合わせればいいってわけじゃない

スクリーンリーダーでの使い勝手、キーボード操作、フォーカス管理など、アクセシビリティも考慮しないと、プロレベルのコードにはならない

AI に「見た目だけでなく、スクリーンリーダーでの使い勝手も考慮して」って一言添えるだけで、より高品質な HTML 構造を提案してくれる

具体例：ボタンのアクセシビリティ

例えば、アイコンだけのボタンを実装する時、普通に生成すると以下のようになる

やけど、「スクリーンリーダー対応も考慮して」って添えると、こうなる

aria-label が追加されて、スクリーンリーダーでも「メニューを開く」って読み上げられるようになる

フォーカス管理も自動で入る

さらに、「キーボード操作も考慮して」って指示を出すと、フォーカス時のスタイルも追加される

focus:ring-4 と focus:outline-none が追加されて、キーボードでフォーカスした時にリングが表示される

セマンティック HTML も提案される

「見出し構造を意識して」って指示を出すと、<div> の代わりに <article>、<section>、<header> みたいなセマンティックタグを使ったコードが返ってくる

このように、アクセシビリティを意識することで、単なる「見た目が合ってるコード」から「プロレベルのコード」に格上げされる

テクニック 6：配色とフォントのルールを明示する

デザインを渡す時、「この色は primary」「このフォントは見出し用」みたいに、デザインシステム的な情報も一緒に伝えると、AI が勝手にルールを守ってくれる

特に、複数のセクションを実装する時、色やフォントが統一されてないと、後で調整するのが面倒になる

具体例：カラーパレットの定義

例えば、こんな感じでカラーパレットを定義して渡す

これを AI に伝えておくと、新しいセクションを生成する時も、勝手に bg-blue-600（Primary）や text-gray-600（Secondary）を使ってくれる

フォントのルールも定義する

フォントについても、「見出しは font-bold、本文は font-normal、強調は font-semibold」みたいに伝えておくと、統一感のあるコードが返ってくる

これを伝えておけば、AI は勝手にルールを守ったコードを生成してくれる

テクニック 7：80 点の構造から 120 点に到達する

一発で 100 点を目指すよりも、「80 点の構造」を出した後に、具体的なフィードバックを出す方が、結果的に最速で 120 点のクオリティ（理想以上）に到達する

AI は「ゼロから完璧なものを作る」よりも、「ある程度の形があるものを修正する」方が得意やから、最初は大枠だけ作らせて、後から細部を詰めていくアプローチが効率的

具体例：ヒーローセクションの段階的改善

最初に、「ヒーローセクションを作って」って指示を出す

すると、こんなコードが返ってくる

これで 80 点

ここから、細かい修正指示を出していく

「背景をグラデーションにして、見出しをもっと大きく、ボタンを左寄せに」

すると、こうなる

これで 100 点

さらに、「ボタンにホバー時のアニメーションを付けて、見出しに文字間隔を少し広げて」って追加指示を出すと、最終的にこうなる

これで 120 点

最初から完璧を求めずに、段階的に改善していくことで、理想以上のコードに到達する

なぜ段階的改善が最速なのか

AI は「全体像を一気に理解して完璧なものを作る」よりも、「既にある構造を部分的に修正する」方が得意

最初から完璧を求めると、AI は「全部を一度に考えなきゃいけない」状態になって、逆に精度が落ちる

やけど、「まず大枠を作る → 細部を修正する」っていう流れにすると、AI は一つ一つの修正に集中できるから、結果的に高精度なコードが出来上がる

まとめ

AI にデザインを実装させる時、「ただ渡すだけ」じゃなくて、以下の 7 つのテクニックを使うことで、精度が爆上がりする

どれも「ちょっとした工夫」やけど、これをやるかやらないかで、出てくるコードのクオリティが全然変わる

AI は「完璧なものを一発で作る道具」じゃなくて、「反復的に改善していく道具」として使うのが正解

諦めずに指示を出し続けることで、理想以上のコードに到達できる