screenshot-to-code

Screenshot to Codeは、スクリーンショット、モックアップ、Figmaデザイン、スクリーンレコーディングをクリーンで機能的なフロントエンドコードに変換するオープンソースツールです。Gemini、GPT、ClaudeなどのAIモデルを活用し、ビジュアル入力から正確なレプリカを生成します。 対応する出力スタックには、HTML + Tailwind、HTML + CSS、React + Tailwind、Vue + Tailwind、Bootstrap、Ionic + Tailwindが含まれます。また、静止画像だけでなく、ウェブサイトのスクリーンレコーディングを機能的なプロトタイプに変換することも可能です。 Replicateによる画像関連機能には、アセット抽出（ソーススクリーンショットから実際のロゴや画像を再利用）、画像生成、背景除去、画像編集が含まれます。スクリーンショットプレビュー機能では、生成されたページがヘッドレスブラウザでレンダリングされ、視覚的な自己チェックが可能になります。 プロジェクトはReact/ViteのフロントエンドとFastAPIのバックエンドで構成されています。OpenAI、Anthropic、またはGeminiのAPIキー至少1つを用意してローカルで実行するか、Docker経由でデプロイできます。最適な精度と完全な機能サポートのため、GeminiとReplicateのキーを強く推奨します。 利用オプション： - セットアップなしで素早く使用できるscreenshottocode.comでホストされています。 - カスタマイズ、貢献、またはプライベートデプロイのためのローカルでのセルフホスト。