結論から
- ソフトは無料、トークンは無料ではない。abi/screenshot-to-code はMITライセンスで自前運用に費用はかかりませんが、OpenAI / Anthropic / Gemini のいずれかのAPIキーが1つ必要で、料金はそのプロバイダーへトークン単位で支払います。
- DeepSeekはこのツールの選択肢に入っていません。READMEの既定モデルは Gemini 3 Flash / 3.1 Pro、GPT-5.5 / 5.4 Mini、Claude Opus 4.6 / 4.8 で、リポジトリ内を "deepseek" で検索すると該当ゼロです。
- DeepSeekで画像を読めるモデルは deepseek-flash です。公式価格表のVision欄は flash にチェック、deepseek-v4-pro は「Not supported」。画像は base64 / 公開URL / Files API の file_id の3通りで送れます。
- どちらのルートも終点は同じ——ダブルクリックで開けるHTML1ファイル。DeepSeek公表のFlash単価なら、スクショ1枚＋マークアップ数千トークンは1セントにも届きません。
Install Screenshot-to-Code Locally — Convert Screenshot to Functional Code
チャンネル:Fahd Mirza9:38
DeepSeek R1 Coding — Testing Screenshot to Code Conversion
チャンネル:United Top Tech3:06
abi/screenshot-to-code README — supported stacks, required keys, Docker
ドキュメント:github.com/abi/screenshot-to-codeDocs
DeepSeek API Docs — Vision (base64, external URL, Files API)
ドキュメント:api-docs.deepseek.comDocs
DeepSeek API Docs — Models & Pricing (the Vision row)
ドキュメント:api-docs.deepseek.comDocs
画像は2本のクリーンな画面録画（カメラ叠加なし、焼き込み字幕なし）から抽出。対応スタック、必要なキー、Dockerコマンド、DeepSeekの画像制限は、abi/screenshot-to-code のREADME・ソースファイル・api-docs.deepseek.com に照合しました。
スクリーンショットは録画チャンネルにクレジットを付け、各ステップを該当タイムスタンプへディープリンクしています。2本とも現在のDeepSeekモデル名より前の収録なので、画面の古いラベルと本文が食い違う場合は公式ドキュメントを優先しています。
全15ステップ：スクショ1枚から動くページまで
まず1枚のスクショから
- 1
再現したいUI部分を切り出す
画像はなんでも構いません——ツール自身のデモはYouTubeチャンネルページ、後述のDeepSeekルートは log.PNG に保存した68KBのログイン画面モックアップです。スクショは文章の指定より強い。余白・色・階層がもう決まっているので、モデルは「作る」のではなく「読む」だけで済みます。気になるコンポーネントだけ切り出してください。画面全体だと、あとで消す枠にトークンを払うことになります。
出発点。PNG保存済みのログインカード。まだ何も変換していません。1:02 から見る - 2
ツールを開き、4つの入力経路を確認する
ローカルに立てると http://localhost:5173 に、アップロード枠プラス3つの近道が並びます。Record Screen（動いているサイトを録画）、Enter URL と Capture（URLをツール側でスクショ）、Import from Code（既存HTMLを貼って編集を続ける）。Generating のドロップダウンで出力スタックを選びます——HTML + Tailwind、HTML + CSS、React + Tailwind、Vue + Tailwind、Bootstrap、Ionic + Tailwind。アカウント登録は不要で、アプリは自分のモデルプロバイダーに直接話しかけます。
セルフホスト版の顔ぶれ。ドロップゾーン、画面録画、URL撮像、コード取り込み。4:00 から見る
無料のOSS変換ツールを入れる
- 3
入れる前にホストを確認
このアプリはReact/ViteフロントエンドとFastAPIバックエンドの構成で、Dockerルートなら動くDocker Engineが要ります。Fahd Mirza さんは先に cat /etc/*release でマシンを確認しています——ここでの出力は Ubuntu 22.04.4 LTS。以降のコマンドは POSIX シェルと docker compose が前提だからです。macOS でも Windows でも、Docker Desktop が動いていれば同じように使えます。
2秒の環境確認。Ubuntu 22.04.4 LTS、後ろでDocker Desktopが稼働中。2:12 から見る - 4
リポジトリをcloneし、backend/.env にキーを1個書く
git clone https://github.com/abi/screenshot-to-code を実行してcdし、composeが読む .env にキーを書きます。READMEの例そのものが echo "OPENAI_API_KEY=sk-your-key" > .env です。開始だけなら1キーで十分。READMEが認めるのは OpenAI / Anthropic / Gemini の3つで、増やすほどアプリは毎回より強いモデルの組み合わせを選べるようになります。DeepSeekはこの表にありません。理由はFAQの質問2に書きました。
READMEどおりのプレースホルダーキーを、バックエンドが起動時に読むファイルへ。2:55 から見る - 5
コンテナ2つを1コマンドでビルド＆起動
リポジトリ直下で docker compose up -d --build。ベースイメージを取得し、バックエンドにPoetry、フロントにyarn依存を入れ、両方をバックグラウンドで生かしたままにします。キャッシュがゼロなら数分。composeファイルはバックエンドを7001、フロントを5173に写します。READMEは「この方法は開発用ではなく実行用」と注意しています。ファイルを編集しても再ビルドされません。
インストール全体が1コマンド。-d 付きなのでターミナルを閉じても動きます。3:25 から見る - 6
フロントとバックエンドのビルドログを見る
失敗したときに役立つのがこのログです。backend 2/7 RUN pip install "poetry==1.4.1" と frontend 4/5 RUN yarn install の2層が、プロキシ配下や閉じたネットワークで一番折れます。ここで止まったら、直すのはアプリではなくDockerのDNSかnpmミラーであることが多い。最後の層が終われば localhost:5173 が応答を始めます。
ビルド開始20秒。両イメージとも依存インストールの層を通過済み。3:45 から見る
変換・保存・作り込み
- 7
スクショをドロップする
破線の枠にドラッグ、またはクリックしてピッカーを開くと、画像が左レールに ORIGINAL SCREENSHOT として残り、以降の改版すべてで参照として使われます。ダークかライトかは歯車アイコンの中の好みで、機能差はありません。その歯車ダイアログでもキーを貼れます（.env を編集しなくて済む）。READMEによると、ここで設定したキーはブラウザ内にのみ保存され、.env の設定より優先されます。
同じアプリのダークテーマ。ファイルを待つだけで、ドロップゾーンがUIのほぼ全部です。4:45 から見る - 8
生成して、バリアントを比べる
このアプリは1つのプロンプトで複数モデルを走らせるので、「最初の1件を押しつけられる」のではなく「結果を選べ」ます。Option 1 と Option 2 は同じスクショに対するタブで、何個出るかは backend/config.py の NUM_VARIANTS 次第——画像入力が4、動画入力が2です。コードは生成されながらサイドバーに流れ込むので、方向違いなら Cancel で止められます。実行はすべて Versions に残るため、遠慮なく試せます。
同一スクショの2バリアントが生成中。下に元画像が貼り付けられています。5:00 から見る - 9
Desktop / Mobile / Code の3通りで見る
プレビュー欄の上に3つのスイッチ——Desktop、Mobile、Code——があり、受け渡しで本当に使うのは Code です。コピー生のマークアップがここに出ます。Reset はその実行を捨て、Download は書き出し、バリアントの下には Update（別の指示を出す）、Regenerate（同じ指示を再実行）、Select and update（変えたい範囲を枠で選ぶ）が並びます。ここでスクショ変換は「デモ」から「編集ループ」に変わります。
再現されたページと、そこへ作り込むための操作群。5:20 から見る - 10
マークアップを普通の .html として保存する
Code タブからコードをコピーしてファイルに貼る——ここでは mycode フォルダの test.html——それでビルド工程は終わりです。出力は自己完結したHTML＋Tailwindクラスなので、パッケージ導入も開発サーバーも要りません。実コンポーネントツリーに入れるなら、React や Vue のファイルに貼ってクラス名をそちらに合わせます。
1ファイル3.1kB。右クリックしてFirefoxで開いたところ。5:40 から見る - 11
ローカルから開き、何が生き残ったか点検する
ファイルシステムから直接読み込めば、バックエンド無しで動くことが確かめられます。次に ORIGINAL SCREENSHOT のサムネイルと正直に比べましょう。レイアウト、タイポの階層、余白はたいてい良く再現します。近似になるのはサードパーティのロゴと写真で、だからこそREADMEはGeminiキーを強く勧めています（アセット抽出＝スクショ内の実画像を再利用する役割）、そしてReplicateキーも（画像生成と背景除去のため）。足りないものは作り直しではなく、追加の指示で足します。
ローカルファイルのまま動いた変換結果。バナーもチャンネルヘッダーも再構築されています。6:12 から見る - 12
再生成ではなく、追加指示で仕上げる
バリアント下の欄に変更点を書きます——ここでの指示は「change the background color to deep blue」。アプリは新しいページではなく新しいバージョンを作るので、Versions には Create v1 と v2 が並んで残ります。「Include screenshot of current version?」にチェックを入れると現在の描画も一緒に送られ、微調整が汎用レイアウトへ逆戻りするのを防げます。このループがあるから、入れる価値があります。
指示1通で変更版がv2として保存され、v1もワンクリックで戻せます。6:45 から見る
ルートB：DeepSeekに画像を見せる
- 13
ルートB：スクショをDeepSeekに渡す
何も立てたくないなら、DeepSeekのチャット製品が直接画像を受け取ります。クリップから log.PNG を足すと、composer に68.14KBの添付として表示され、指示は1文で「give me html and css code for this image in a single html file」。この録画のチップは DeepThink (R1) と表示していますが、ピッカーのラベルは解説より速く変わるので、名前ではなく仕組みを信用してください。戻ってくるのは、貼って開ける1ファイルです。
DeepSeekのチャットにスクショを添付し、下に「HTML1ファイルで」と入力した状態。1:22 から見る - 14
コードより先に、計画を読む
思考パネルが「モデルが本当に画像を見たか」の判別箇所です。Login 見出し、User Name と Password のラベル、入力欄、Submit ボタンを1つずつ挙げ、そのうえで flexbox に justify-content と align-items の中央寄せ、高さを100vh にする、と決めています。再現が崩れたらここを見る。ラベルを飛ばしたモデルは、ラベルのないフォームを返してきます。展開して、説明がずれていたらスクショを切り直して送り直してください。
10秒の思考。再現する要素を順番に名前上げしています。1:45 から見る - 15
プレビューしたら、コードを取り出す
DeepSeekは自分の回答をプレビューモーダルで描画します——ラベル上置き・入力2つ・全幅の青いSubmitボタンで再構築されたログインカードで、下部に「AI-generated, for reference only」。複製ではなく簡略版で、モックのグラデーション滲みとフィールドのアイコンは消えています。HTMLをコピーして index.html として保存し、開けばよい。手順10・11と同じです。はっきり書いておくと、DeepSeekのチャット製品とAPIはどちらも画像を受け取りますが、テキスト専用の生成器——当サイトのartifact生成器も含めて——は受け取りません。あの類では画像を見せると期待せず、UIを文章で指定してください。
DeepSeekプレビュー内の再構築カード。続ければ作れる水準で、簡略化もされているので要確認です。2:48 から見る