abi/screenshot-to-code：README に基づく導入ガイド

abi/screenshot-to-code の README はプロジェクトを「Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)」と説明しています。ここではリポジトリで確認できる事実だけを整理します。star 数やバッジは注目度の手掛かりであり、品質の証明ではありません。「screenshot-to-code」には次の説明があります。Convert screenshots, mockups, Figma designs, and screen recordings into clean, functional code using AI. The easiest way to try this is using the official, hosted product at screenshottocode.com →。これは範囲の説明であり、本番検証の結果ではありません。

README の「screenshot-to-code」にある内容から、用途が合うかを先に判断できます。z-image-turbo (using Replicate) for image generation。目的が違うなら、人気だけで採用する理由にはなりません。プロジェクト名やコマンドは原文のまま残し、一次資料へ戻って用語を確認できるようにしています。 README には次の確認可能な項目もあります。Gemini 3 Flash Preview and Gemini 3.1 Pro Preview - the best models。初回テストの材料にはなりますが、実際の環境での確認を省略する理由にはなりません。

動作の説明は「screenshot-to-code」など複数の箇所に分かれています。確認できる情報は次の通りです。Screenshot to Code also supports taking a screen recording of a website in action and turning that into a functional prototype.。書かれていない構成、性能、セキュリティを推測で補いません。導入時はディレクトリ、設定ファイル、release 履歴を確認してください。

初回導入は README の入口から始めます。確認できるコマンドは次の通りです。 cd frontend pnpm install pnpm dev 実行可能なコマンドがない場合は手順を作らず、「🛠 Getting Started」で依存関係、待受ポート、初回設定を確認します。

日常運用は公式文書の範囲に限ります。「🛠 Getting Started」にはChoose the path that fits what you want to do:とあります。設定、環境変数、権限、データ保存先は明記されたものだけを扱います。未記載の既定値は隔離環境で確認し、戻せる設定を保存してください。 同じ資料にはRun locally: best if you want to customize, self-host, or contribute.ともあります。

制約も確認が必要です。現在の資料からは、abi/screenshot-to-code の互換表、性能基準、サービス保証、長期サポートを確認できません。README の記載は「Running locally requires API keys and a backend/frontend setup. The app has a React/Vite frontend and a FastAPI backend.」です。不明点は採用記録の検証項目として残し、断定に変えないでください。