スクリーンショットやデザイン画像をAIで解析し、動作するHTMLやReactコードに変換するツールです。
中辛 の解説
スクリーンショットやデザイン画像から機能するコードを生成するAIツールです。ユーザーが画像をアップロードすると、AIモデルが内容を解析して、指定されたスタック（HTML+Tailwind、React+Tailwind、Vue、Bootstrapなど）でコードを出力します。ホストされたWebアプリ（screenshottocode.com）で即座に試せるほか、ローカルで実行・カスタマイズできます。ローカル実行にはPythonバックエンド（FastAPI）、フロントエンド（React/Vite）、APIキー（OpenAI、Anthropic、Geminiから最低1つ）が必要です。Replicate APIキーを追加するとアセット抽出、背景削除、画像編集機能が有効になります。プレビュー機能（Chromium）により生成したコードをブラウザで動作確認できます。
こんなリポジトリです
こんなときに便利です
- デザイナーがFigmaやモックアップから直接HTMLコードを生成し、開発時間を短縮したい
- ウェブサイトの動画録画をアップロードして、そのUIを再現するReactコンポーネントを得たい
- 既存Webサイトのスクリーンショットをコード化して、プロトタイプやテンプレートとして再利用したい
主な機能
ほかとの違い
Geminiによる資産抽出とReplicateによる画像処理、複数AIモデルの自動ブレンドにより、単一モデル依存の競合より高い精度と柔軟性を提供します。
このリポジトリの作り方
はじめてですか？ むずかしくありません — 上から順にたどれば、自分の環境で動かして味見できます。
準備するもの
- OpenAI、Anthropic、Geminiのいずれか1つ以上のAPIキー
- Node.js と pnpm（フロントエンド実行時）
- Poetry（Pythonバックエンド実行時）
- Docker と Docker Compose（Docker使用時、オプション）
すぐに始める
- リポジトリをクローンします。
git clone https://github.com/abi/screenshot-to-code.git
cd screenshot-to-code
- バックエンドディレクトリに移動し、環境変数ファイルを作成してAPIキーを設定します。
cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
echo "ANTHROPIC_API_KEY=your-key" >> .env
echo "GEMINI_API_KEY=your-key" >> .env
echo "REPLICATE_API_KEY=r8_your-key" >> .env
- Poetryをインストール（未インストール時）し、依存パッケージをインストールします。
pip install --upgrade poetry
poetry install
- スクリーンショットプレビュー機能に必要なChromiumブラウザをインストールします。
poetry run playwright install chromium
- Poetryの仮想環境をアクティベートし、バックエンドサーバーを起動します。
poetry env activate
# 表示されたコマンドを実行（例: source /path/to/venv/bin/activate）
poetry run uvicorn main:app --reload --port 7001
- 別のターミナルでフロントエンドディレクトリに移動し、依存パッケージをインストールして起動します。
cd frontend
pnpm install
pnpm dev
- ブラウザで http://localhost:5173 を開いて利用します。
代案（Docker使用）: ルートディレクトリで以下を実行するとコンテナで起動します。
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build
起動後、http://localhost:5173 でアクセスできます。
ギット飯トライで味見
入れるのが面倒で少し不安だったなら — 安全スキャンからインストールまで、ターミナル一行で終わります。
ターミナルに貼り付ければ、ギット飯の安全スキャン → 隔離フォルダへ clone → インストール → 実行方法の案内まで自動です。はじめてでも大丈夫 — この一行だけです。
npx gitbap-try abi/screenshot-to-code
Node.js さえあれば、インストールなしで動きます · ギット飯トライとは？ →
スター推移 · 7日
確認日時
使いやすさ · まねしやすいか
- ゆるいライセンス
- テストあり
- サンプル集
- 最近の更新
- AGENTS.md
- llms.txt
- テンプレート
更新の情報なし · 2023 年に作成
「デザイン・UI コンポーネント」 こういうリポジトリを毎週受け取りませんか？
毎週月曜の朝、選んだ一膳だけ。広告なし · いつでも解除。
自分のリポジトリですか？ README にギット飯バッジを貼る
[](https://www.gitbap.com/r/abi/screenshot-to-code)Claude からそのまま使う — ギット飯のつなぎ方
ギット飯を Claude につなぐと、こうしたリポジトリを Claude・Cursor・Codex から直接さがして試せます。
Claude の設定 → コネクタにこのアドレスを貼り付け。
https://www.gitbap.com/api/mcpプラグインを入れると /gitbap-trending·/gitbap-try のスラッシュコマンドで、その場でリポジトリを試せます。Claude Code で下の 2 行を順に実行してください。
/plugin marketplace add jakeparkcolde/gitbap-cowork/plugin install gitbap-cowork@gitbapAI が README をもとに要約しました · 原文を見る