screenshot-to-code

スクリーンショットからコードを作成

画像内の UI を、クリーンでレスポンシブ、かつアクセシブルなコードで再現し、レンダリング結果を画像と照らし合わせて確認します。

ワークフロー

1. 対象のスタックを選びます。 ユーザーがプロジェクト内にいる場合は、そのプロジェクトに合わせます。package.json を確認して React／Next／Vue と Tailwind のバージョンを調べ、既存のコンポーネント、トークン、アイコンライブラリを再利用します。リポジトリで確認できることは質問しないでください。プロジェクトがない場合は、次のようにします。

   • 単一画面または手早いプロトタイプ：自己完結型の index.html を1つ（ブラウザー用ビルドの Tailwind を使用します。references/stack-setup.md を参照）
   • アプリまたは複数画面：Vite 上で React + TypeScript + Tailwind v4
   • ユーザーが Next.js、SSR、またはルーティングに言及した場合：Next.js App Router

2. コーディング前に短い仕様を作成します。 画像を見て、次の点を記録します。

   • 上から下へのレイアウト領域（ナビゲーション、ヒーロー、サイドバー、グリッド、フッター）と、それぞれのグリッドまたはフレックス構造
   • デザイントークン：3〜6色の16進カラーコード、フォントファミリーの推定値と文字サイズのスケール、間隔のリズム（通常は4pxの倍数）、角丸、影のスタイル
   • 繰り返し使うコンポーネント（カード、リスト行、ボタン）。プロパティを使って単一のコンポーネントにまとめるもの
   • 画像だけでは確認できない内容：ホバーとフォーカスの状態、モバイルレイアウト、実際のデータ、画面下部に続くコンテンツ

   画像の解像度からサイズを推定します。スクリーンショットが2倍（幅2880pxの Retina キャプチャが幅1440pxのレイアウト）の場合は、ピクセル寸法を半分にします。

3. 実装します。 セマンティック要素（header、nav、main、section、button、a）を使い、繰り返し要素はコンポーネントに分け、16進カラーコードを各所に散らさず、トークンを1か所（Tailwind v4 の @theme または CSS カスタムプロパティ）にまとめます。プレースホルダーの lorem ipsum ではなく、画像内の実際のテキストを使います。抽出できない画像やロゴには、サイズを指定したプレースホルダーと説明的な alt テキストを使います。手描きの SVG や絵文字ではなく、プロジェクトにすでにあるアイコンライブラリ（デフォルトは lucide-react）を使います。

4. レスポンシブにします。 まずスクリーンショットのビューポートに合わせて実装し、その後、どのように折りたたむかを定義します。複数列のグリッドは縦に並べ、ナビゲーションはメニューボタンにし、文字サイズは clamp() またはレスポンシブユーティリティで縮小します。スクリーンショットがモバイルの場合は、逆の方向で対応します。

5. レンダリングして比較します。 ブラウザー（Playwright、ヘッドレスブラウザー、またはブラウザーツール）を実行できる場合は、元画像と同じビューポート幅で結果のスクリーンショットを撮り、左右に並べて比較します。references/visual-check.md を参照してください。まず最も大きな差異から修正します。レイアウトと配置、間隔、文字サイズと太さ、色の順に対応します。通常は2〜3回の確認で十分です。残る差異がフォントのレンダリング程度になったら終了します。

6. 成果物を提出します。 ファイル、実行方法、推定したフォントや独自に設定した状態、推測したコンテンツなどの前提を簡潔に示します。実際のアセットが必要なものも明記します。

スタックに関する注意事項

• React 19：TypeScript のプロパティ型を使った関数コンポーネントを使用します。propTypes のチェックは React 19 で削除されているため、追加しないでください。関数コンポーネントに ref を渡すために forwardRef を使う必要はありません。
• Tailwind CSS v4：設定は CSS に記述します。tailwind.config.js や v3 の @tailwind base/components/utilities ディレクティブではなく、@import "tailwindcss"; と @theme { --color-brand: #...; } を使います。カスタムトークンは自動的にユーティリティになります（bg-brand）。
• Next.js (App Router)：ページは app/ に置き、コンポーネントはデフォルトで Server Component です。状態、エフェクト、またはイベントハンドラーを使うコンポーネントにのみ "use client" を追加します。
• Create React App は非推奨です。React のみを使う場合は Vite を使用します。

各スタックのセットアップコマンドは references/stack-setup.md にあります。

実例

入力：幅 1440px の料金プランセクションのスクリーンショット。中央揃えの見出し、中央のプランが強調された3つのプランカード、機能のチェックリスト、各カードに1つのボタンがあります。

仕様：

• 領域：見出しブロック、その下に3列のカードグリッド。最大幅は約1100px、間隔は24px
• トークン：背景色 #0B1220、カード #111A2E、アクセント #3B82F6、テキスト #E5E7EB、ミュート #94A3B8。Inter風のサンセリフ体、角丸12px
• コンポーネント：name、price、features[]、highlighted、cta を持つ PlanCard
• 不明点：ホバー状態、月額／年額切り替えの動作、モバイルレイアウト

実装：plans 配列を PlanCard に割り当てる PricingSection.tsx を作成します。highlighted を指定するとアクセントカラーの枠線と「Most popular」ラベルが追加されます。grid-cols-1 md:grid-cols-3 を使います。チェックアイコンには lucide-react を使用します。

比較：最初のレンダリングでは、ボタンのパディングが原因でカードが40px高く、見出しのウェイトも画像の700に対して600です。両方を修正して再レンダリングし、前提条件の一覧を添えて納品します。切り替え機能は未実装で、フォントはInterと仮定しています。

失敗しやすい点

• リポジトリですでに定義されているのに技術スタックを推測したり、v4のプロジェクトにTailwind v3の設定を混在させたりすること。
• ピクセル単位で一致させるために絶対配置を使うこと。 最初のリサイズで崩れます。flexとgridを使い、多少の違いは許容してください。
• 巨大なコンポーネントを1つだけ作ること。 3回繰り返されるものは、propsを持つコンポーネントにします。
• 見えない状態を考慮しないこと。 スクリーンショットでは確認できなくても、ボタンやリンクにはホバー状態と focus-visible のスタイルが必要です。入力欄にはラベルが必要です。
• 色のずれ。 アンチエイリアスがかかった縁やグラデーションではなく、画像の平坦な領域から色を抽出し、テキストのコントラストがWCAG AA（本文で4.5:1）を満たしていることを確認してください。
• 確認せずに一致したと主張すること。 結果をレンダリングできなかった場合は、比較を行っていないことを明記してください。