abi/screenshot-to-code

screenshot‑to‑code

機能 – UIスクリーンショット、Figmaのモックアップ、あるいは短い画面録画を取り込み、大規模言語モデルの助けを借りて、すぐに実行できるクリーンなフロントエンドコードを生成します。生成されたコードには、スクリーンショットから抽出された元の資産（ロゴ、画像）を含めることができます。

サポートされているフロントエンド – HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap, Ionic + Tailwind。

AIバックエンド – デフォルトでは、最新のGoogle Gemini (3 Flash, 3.1 Pro)、OpenAI GPT‑5.5/5.4 Mini、Anthropic Claude Opus 4.6-4.8、およびReplicateの画像モデル (z-image-turbo) を試行します。プロバイダーを組み合わせて使用することも可能です。アプリは各ステップで利用可能な最強のモデルを選択します。

仕組み

1. アセット抽出 – Geminiがスクリーンショットを分析して実際のロゴや画像を抽出し、Replicateを介して背景を削除することもできます。
2. コード生成 – 選択されたLLMがレイアウトとターゲットスタックの説明を受け取り、対応するマークアップ、CSS/Tailwindクラス、およびコンポーネントコードを返します。
3. オプションのプレビュー – Headless Chromiumインスタンス（Playwright経由）が生成されたページをレンダリングし、システムが出力と元のスクリーンショットを比較して、明らかな不一致を特定できるようにします。
4. ビデオモード – 短い画面録画をアップロードすると、バックエンドがキーフレームを抽出し、インタラクションフローを模倣したプロトタイプを構築します。

実行方法

• ホスト版デモ – https://screenshottocode.com にアクセスして、すぐに試用できます。
• セルフホスト – リポジトリをクローンし、少なくとも1つのAPIキー（OpenAI、Anthropic、またはGemini）を提供し、FastAPIバックエンドを起動します (poetry install && poetry run uvicorn main:app …)。その後、Vite-Reactフロントエンドを起動します (pnpm install && pnpm dev)。
• Docker – キーを含む .env ファイルを配置した後、docker-compose up --build を実行します。

主要な設定

変数	必要となる用途	有効になる機能
OPENAI_API_KEY	すべて	GPT-5.5 / 5.4-Mini コード生成
ANTHROPIC_API_KEY	すべて	Claude コード生成
GEMINI_API_KEY (推奨)	すべて	Gemini コード生成、アセット抽出、ビデオモード
REPLICATE_API_KEY (推奨)	オプション	画像編集、背景削除、画像生成

FAQ & トラブルシューティング – READMEには、トラブルシューティングガイドとIssueトラッカー内の一般的なエラー修正へのリンクがあります。ファイアウォールの内側にいる場合は、OPENAI_BASE_URL を介してOpenAIプロキシを設定することもできます。

例 – このリポジトリでは、NYTimes、Instagram、Hacker Newsのページを並べて比較しており、このツールが複雑なニュース記事のレイアウト、ソーシャルメディアのフィード、ディスカッションボードのインターフェースを再現できることを示しています。

想定されるユーザー – デザインから素早くスキャフォールド（雛形）を作成したいフロントエンド開発者、UIのアイデアをプロトタイプ化したいプロダクトチーム、またはAIによるコード生成に興味があるすべての人。