説明
Screenshot to Codeは、ビジュアルデザインを機能的なコードに変換するために設計されたAI搭載ツールです。スクリーンショット、モックアップ、Figmaデザイン、さらにはウェブサイトの動作中の画面録画など、さまざまな入力を受け付け、それらをクリーンでそのまま使用できるコードに変換します。このツールは、HTMLとTailwind CSS、ReactとTailwind CSS、VueとTailwind CSS、Bootstrap、IonicとTailwind CSSといった一般的なフロントエンドスタックをサポートしています。
ユーザーは、Screenshot to Codeと対話するための2つの主な方法があります。カスタマイズや貢献のためにローカルで実行するか、ローカルセットアップなしで即座にテストするためにscreenshottocode.comの公式ホストアプリケーションを使用します。ツールをローカルで実行するには、React/ViteフロントエンドとFastAPIバックエンドをセットアップする必要があり、OpenAI、Anthropic、GeminiなどのAIモデルプロバイダーのAPIキーが必要です。Geminiは、スクリーンショットから実際のロゴや画像を再利用できるアセット抽出機能で特に推奨されており、Replicateは画像生成、背景削除、編集機能に不可欠です。
このプロジェクトは、Gemini 3 FlashおよびGemini 3.1 Pro Preview、GPT-5.5およびGPT-5.4 Mini、Claude Opus 4.6/4.8を含むさまざまなAIモデルをサポートしています。複数のAPIキーの統合は、アプリがより強力なモデルの組み合わせを選択できるようにすることで、生成されるコードの精度と品質を向上させます。画面録画から機能的なプロトタイプへの変換のような高度な機能に興味がある場合は、Geminiが前提条件となります。このプロジェクトは、デプロイと実行を容易にするためにDockerサポートも提供しています。
Screenshot to Codeは、デザインをコードに変換するという退屈なプロセスを自動化することで、ウェブ開発ワークフローを合理化することを目指しています。これは、プロトタイピングを加速し、手動コーディングの労力を削減し、デザインと実装の一貫性を確保したい開発者、デザイナー、チームにとって特に有益です。このプロジェクトはGitHubで積極的にメンテナンスされており、コミュニティの貢献とフィードバックを奨励しています。
Screenshot to Codeの主要機能
スクリーンショットとモックアップをHTML、Tailwind、React、Vueコードに変換します。
画面録画をサポートし、機能的なプロトタイプを生成します。
即時使用のためのホストアプリケーションを提供します。
カスタマイズと貢献のためのローカル実行を可能にします。
Gemini、GPT、Claudeを含む複数のAIモデルと統合します。
Geminiを使用したAI駆動のアセット抽出機能を備えています。
Replicateによる画像生成、背景削除、編集をサポートします。
React/ViteフロントエンドとFastAPIバックエンドを提供します。
視覚的な検証のためのオプションのスクリーンショットプレビューが含まれています。
デプロイメントを簡素化するためのDockerサポート。
Screenshot to Codeをはじめる
GitHubからリポジトリをクローンします。
バックエンドにはPoetry、フロントエンドにはYarnを使用して依存関係をインストールします。
環境ファイルでAIモデルプロバイダー（OpenAI、Anthropic、Gemini、Replicate）のAPIキーを設定します。
Chromiumなどの必要なブラウザ依存関係をインストールします。
Poetryを使用してバックエンドサーバーを実行します。
Yarnを使用してフロントエンド開発サーバーを実行します。
提供されたローカルURL（例：http://localhost:5173）を介してアプリケーションにアクセスします。
Screenshot to Codeの使用例
- ラピッドプロトタイピング
- フロントエンド開発
- デザインからコードへの変換
- UI/UXワークフローの加速
- 画面録画からプロトタイプへ
- アセット抽出
- コード生成比較
