abi/screenshot-to-code

これは何？

主な機能

• 01スクリーンショットやFigmaデザインからHTML、React、Vue、Bootstrapのコードを生成
• 02Tailwind、通常のCSS、Ionic形式の出力に対応
• 03Webサイトの画面録画からプロトタイプを生成
• 04Geminiの設定時に、スクリーンショットから実際のロゴや画像を抽出
• 05OpenAI、Anthropic、Geminiのモデルから選択可能

ユースケース

• デザインモックアップをフロントエンドページのたたき台にする
• スクリーンショットをもとに既存Webサイトのレイアウトを再現する
• 既存アプリの画面録画からUIのプロトタイプを作る

クイックスタート

1. 1

   Poetryでバックエンドをセットアップし、依存関係をインストールします

   cd backend && poetry install
2. 2

   スクリーンプレビュー用ツールのためにChromiumブラウザーをインストールします

   poetry run playwright install chromium
3. 3

   ポート7001でバックエンドサーバーを起動します

   poetry run uvicorn main:app --reload --port 7001
4. 4

   フロントエンドの依存関係をインストールして開発サーバーを起動し、http://localhost:5173 を開きます

   cd frontend && pnpm install && pnpm dev

使う前に知っておきたいこと

• !ローカルで実行するには、少なくとも1つのモデルAPIキーが必要です。すべての機能を利用するにはReplicateを強くおすすめします。
• !FastAPIバックエンドとReactフロントエンドの両方をセットアップする必要があるため、セルフホスティングには多少の手間がかかります。
• !結果の品質が低いため、Ollamaのオープンソースモデルはおすすめしません。

トピック

よくある質問

screenshot-to-code とは？

AIモデルを使って、スクリーンショット、モックアップ、Figmaデザイン、画面録画からHTML、Tailwind、React、Vueなどのフロントエンドコードを生成します。 screenshot-to-codeは、スクリーンショット、モックアップ、Figmaデザイン、画面録画などのビジュアル素材を、動作するフロントエンドコードに変換します。HTML（TailwindまたはCSS）、React（Tailwind）、Vue（Tailwind）、Bootstrap、Ionic（Tailwind）などの出力先を選ぶと、そのレイアウトを再現するコードが生成されます。

screenshot-to-code は無料で使えますか？ライセンスは？

screenshot-to-code は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

screenshot-to-code は今もメンテナンスされていますか？

活発にメンテナンス中。screenshot-to-code の最終コミットは 2026年10月9日 です。

screenshot-to-code は何に使えますか？

デザインモックアップをフロントエンドページのたたき台にする スクリーンショットをもとに既存Webサイトのレイアウトを再現する 既存アプリの画面録画からUIのプロトタイプを作る

screenshot-to-code のインストール方法は？

Poetryでバックエンドをセットアップし、依存関係をインストールします: cd backend && poetry install スクリーンプレビュー用ツールのためにChromiumブラウザーをインストールします: poetry run playwright install chromium ポート7001でバックエンドサーバーを起動します: poetry run uvicorn main:app --reload --port 7001 フロントエンドの依存関係をインストールして開発サーバーを起動し、http://localhost:5173 を開きます: cd frontend && pnpm install && pnpm dev

screenshot-to-code はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/abi/screenshot-to-code