以下は ARTICLE / LINK / YOUTUBE 用の 9 セクション構成です。docs/prompts/article-ingest-system-prompt.md に従い、段落末に脚注番号を1つだけ付け、末尾にプレーンテキストの出典を記載してください。

1. これは何の話？

Whole Page vs Section

Antigravity と Gemini 3 Pro を活用して、Figma デザインや参考サイトのスクリーンショットからコードを生成する際、その「再現率」を極限まで高めるための実践的なテクニックについてです。特に、画像を「全画面」ではなく「セクション単位」で切り出して渡すことの有効性と、既存コードをコンテキストに含めるワークフローに焦点を当てています。[1]

2. 何がわかったか

ウェブサイトの全画面スクリーンショットをそのまま AI に渡すよりも、ヘッダー、ヒーローセクション、機能一覧などの「実装したいパーツ（セクション）」ごとに画像をトリミングして渡す方が、AI の認識精度とコード生成の品質が格段に向上することがわかりました。また、Antigravity の機能を使って既存のプロジェクトコード（共通 UI コンポーネントや globals.css など）を読み込ませた状態で生成を行うと、プロジェクトのスタイルガイドや命名規則に沿った、修正の少ない「使えるコード」が一発で出力されやすくなります。[1]

3. 他とどう違うのか

従来の「画像からコード生成（Image-to-Code）」のアプローチは、ページ全体を一気に生成しようとしてレイアウトが崩れたり、細部のスタイルが無視されたりすることが一般的でした。しかし、この「セクション単位 × 既存コードコンテキスト」というアプローチは、AI に与える情報を適切に絞り込みつつ、必要な文脈を与えることで、単なるコピーではなく、エンジニアが手書きしたかのような精度と整合性を持つコード生成を可能にします。[1]

4. なぜこれが重要か

デザインの再現性は、その後の「微調整コスト」に直結します。最初の生成で 60 点のコードしか出なければ、その後の修正に膨大な時間がかかりますが、80〜90 点のコードが出れば、修正は最小限で済みます。AI IDE を使った開発において、この「最初の一撃」の精度を高めることこそが、全体の開発スピードを劇的に加速させる鍵となります。特に、Antigravity のようなエージェント型 IDE では、対話のターン数を減らすことが効率化に繋がります。[1]

5. 未来の展開・戦略性

Figma などのデザインツールとの直接連携も進化していますが、現状では「画像 × テキスト指示」という柔軟なインターフェースが最強の汎用性を持ちます。将来的には、デザインデータから構造化された情報を抽出しつつ、AI がプロジェクトの文脈を理解して自律的にコーディングするフローが主流になるでしょう。Antigravity はそのハブとして機能し、人間は「全体の設計」と「微調整の指示」に集中する役割へとシフトしていきます。[1]

6. どう考え、どう動くか

まず、実装したい画面をセクションごとにスクリーンショットを撮る習慣をつけましょう。そして、Antigravity に指示を出す際は、必ず関連する既存ファイルのコンテキスト（@components/Button.tsx や @styles/theme.ts など）を追加します。生成されたコードに対しては、「余白をもっと詰めて」「角丸を 8px に統一して」といった具体的なフィードバックを繰り返し、120% の完成度を目指して磨き上げてください。[1]

指針：

  • Divide & Conquer: 画像は全画面ではなく、セクション単位で小さく切り出す。
  • Context is King: 既存コードを必ず読み込ませて、AI に文脈を理解させる。
  • Polish It: 初回の生成で満足せず、対話的に微調整を重ねる。

次の一歩： ・今日やること：次に実装する UI のスクリーンショットを、セクションごとに切り抜いて保存する。 ・今週やること：Antigravity で「画像 ＋ 既存コード」の組み合わせによる生成を試し、感触を掴む。

7. 限界と未確定

  • 複雑なアニメーションやインタラクション（ホバー時の挙動変化など）は、静止画だけでは完全に伝わりきらないため、別途テキストでの補足が必要です。[1]
  • 既存コードが極端にスパゲッティ化している場合や、大規模すぎる場合は、コンテキストに入れても AI が混乱する可能性があります（Gemini 3 Pro のコンテキストウィンドウは広いですが、整理されているに越したことはありません）。[1]
  • 最終的なピクセルパーフェクトな調整は、現時点ではまだ人間の目と手による確認が不可欠です。[1]

8. 用語ミニ解説

  • Antigravity: Google Deepmind が開発した、AI ネイティブな次世代コードエディタ（IDE）。ユーザーの意図を汲み取り、自律的にコーディングを行うエージェント機能を搭載している。
  • Gemini 3 Pro: Google の高性能マルチモーダル AI モデル。画像、映像、音声、テキストを同時に理解し、論理的な推論やコード生成を得意とする。

9. 出典と日付

[1] izanami (2025-12-08): https://izanami.dev/post/525d3b7b-d2c5-40c8-bd99-1d5bcb29e548