参考サイトのデザインはAI（Antigravity）でパクれる
Web制作の現場において、いいなと思った参考サイトを見ながらコードを書く「模写コーディング」。
これまでは新人エンジニアの練習課題でしたが、ぶっちゃけ「面倒くさい」ですよね。
しかし、Google Antigravity（Gemini 1.5 Pro）を使えば、その面倒な作業は一瞬で終わります。
「コードを書く」のではなく、「画像をパクって（参照して）指示する」。これだけで、実用レベルのReact/Tailwind CSSコンポーネントが生成される時代が到来しました。
本記事では、Antigravityの画像認識機能（Vision）を活用し、参考サイトのスクリーンショットからUIコードを瞬時に生成（＝パクる）する具体的なワークフローと、その精度を高めるための技術的要件を解説します。
実践：参考サイトを1分でコンポーネント化する（パクる）手順
Antigravityのエージェントは、テキストだけでなく画像を「視覚情報」として理解します。この特性を活かした「Design-to-Code」のプロセスは以下の通りです。
Step 1: デザインのキャプチャとコンテキスト定義
まず、再現（パク）したいUIのスクリーンショットを用意します。Figmaのデザイン画でも、既存サイトのキャプチャでも構いません。
重要なのは、AIに「見た目」だけでなく「役割」を伝えることです。
Step 2: 具体的なプロンプト設計
単に「これを作って」と投げるだけでは、AIは迷います。構造、スタイル、挙動を明確に分離して指示することが、高品質なコードを得る鍵です。
推奨プロンプト構成:
役割: あなたは熟練したフロントエンドエンジニアです。
入力: 添付のUI画像のスクリーンショット。
出力: 以下の要件を満たすReactコンポーネント（Tailwind CSS使用）。
- 構造: セマンティックなHTML（
<section>,<article>等）を使用すること。- デザイン: 画像のレイアウト、余白、配色、フォントサイズを可能な限り忠実に再現（パク）すること。
- レスポンシブ: モバイルファーストで実装し、PC表示時はグリッドレイアウトに切り替えること。
- アクセシビリティ: 適切な
aria-labelやコントラスト比を確保すること。
Step 3: リアルタイムプレビューと微調整
生成されたコードを実行し、実際のブラウザで確認します。
もし余白が狭すぎる、色が微妙に違うといった場合も、修正は自然言語で行います。
- 「カードの影（Shadow）をもう少し薄くして」
- 「スマホ表示のとき、画像とテキストを縦積みに変更して」
AIは前後の文脈を理解しているため、具体的なクラス名を指定しなくても、意図を汲み取って修正コードを提示します。
精度を高めるプロンプトエンジニアリング
GoogleのAI研究チームやコミュニティ（Suzuken Blog等でも言及されるような）の知見に基づくと、以下の要素をプロンプトに含めることで、コードの品質は劇的に向上します。
1. 「技術スタック」の明示
使用するライブラリのバージョンまで指定すると手戻りが減ります。
- 例:
React 18,Tailwind CSS v3.4,Lucide React (Icons)
2. 「コンポーネント指向」の徹底
ページ全体を一度に作らせるのではなく、「ヘッダー」「ヒーローセクション」「機能一覧」といった粒座で生成させ、最後に組み立てる手法が最も効率的です。これにより、各パーツの再利用性と保守性が高まります。
エンジニアの役割は「実装」から「監修」へ
このワークフローにおいて、エンジニアがコードを「書く」時間はほぼゼロになります。
代わりに求められるのは、以下の「監修（Review）」能力です。
- 生成されたコードはセキュリティ的に安全か？（XSS対策など）
- パフォーマンスは最適化されているか？（不要な再レンダリングなど）
- プロジェクト全体の設計思想と整合性が取れているか？
【検証】実際にやってみた：たった30秒でこのクオリティ
論より証拠です。実際に「某SaaSの料金プラン表」のような画像をAntigravityに読み込ませ、コードを書かせてみました。
1. 入力したプロンプト
画像と共に、以下の短い指示を与えました。
役割: フロントエンドエンジニア。
画像の「Proプラン」のカードを、ReactとTailwind CSSでコンポーネント化してください。
- 背景は白、枠線あり、角丸は
xl。- ボタンは青色（
bg-blue-600）で、ホバー時に少し濃くする。- チェックアイコンは
lucide-reactを使用。
2. 出力されたコード（一切修正なし）
Gemini 1.5 Proがわずか30秒で吐き出したコードがこちらです。
import React from 'react';
import { Check } from 'lucide-react';
const PricingCard = () => {
return (
<div className="max-w-sm w-full bg-white rounded-xl border border-gray-200 shadow-sm p-6 hover:shadow-lg transition-shadow duration-300">
<div className="flex flex-col gap-4">
{/* Header */}
<div>
<h3 className="text-lg font-semibold text-gray-800">Pro Plan</h3>
<p className="mt-1 text-sm text-gray-500">For growing teams.</p>
</div>
{/* Price */}
<div className="flex items-baseline gap-1">
<span className="text-4xl font-bold text-gray-900">$29</span>
<span className="text-gray-500">/month</span>
</div>
{/* Features */}
<ul className="space-y-3 mt-4 mb-6">
{['Unlimited Projects', 'Team Collaboration', 'Advanced Analytics', '24/7 Support'].map((item) => (
<li key={item} className="flex items-center gap-2">
<Check className="w-5 h-5 text-blue-600" />
<span className="text-gray-700 text-sm">{item}</span>
</li>
))}
</ul>
{/* Button */}
<button className="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-200 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Get Started
</button>
</div>
</div>
);
};
export default PricingCard;3. 解説
驚くべきは、以下の細部まで「指示なし」で再現されている点です。
- インタラクション:
hover:shadow-lgやtransition-shadowといった動きの演出が勝手に追加されています。 - 構造:
divのネストが深すぎず、非常にフラットで読みやすい構造です。 - 拡張性: 特徴リスト（Features）を配列の
map展開で実装しており、項目の増減に対応しやすくなっています。
ここまでベースが出来上がっていれば、あとはテキストを書き換えるだけで実装完了です。これが「秒で完コピ」の威力です。
まとめ
AIの可能性について毎日発信していきますので、ぜひフォローください！
