dev-screenshot-beautifier

スクリーンショットのブラッシュアップ

未加工の UI スクリーンショット（localhost でのキャプチャ、本番環境の画面キャプチャ、モバイルのビューポート）を、ブログや変更履歴、ドキュメントにそのまま使えるメインビジュアルに仕上げるための処理パイプラインです。デバイスフレーム、ドロップシャドウ、グラデーション背景、ダークモードへの対応を追加します。

使用する場面

• リリースごとにメイン画像が必要なリリースノートや変更履歴の項目。
• プロダクト画面を紹介するブログ記事やドキュメント。
• 未加工のスクリーンショットでは素人っぽく見える PR の説明。
• スクリーンショットをメインビジュアルにする Twitter／LinkedIn のローンチ投稿。
• ライトモードとダークモードの両方で、それぞれ仕上げたメインビジュアルが必要なサイト。
• デザイナーにすぐ相談できない PM／エンジニアリングチームのメンバー。

対象外：存在しない UI の生成（Figma やモックアップツールを使ってください）、実際のコンテンツを偽のテキストに置き換えること（注釈やぼかしを推奨します）。

前提条件

処理を始める前に、次の 5 つを 1 つのメッセージで確認してください。

1. 未加工のスクリーンショットのパス — エッジをきれいに保てる PNG を JPEG より推奨します。
2. デバイスフレーム：ブラウザーのクローム（Chrome／Safari／Arc）、iPhone のベゼル、Android、MacBook、iPad、またはなし（ソフトシャドウのみ）。
3. 背景の雰囲気：柔らかなスタジオ風グラデーション、ブランドパレット、縁を照らしたダークな表面、ガラスモーフィズム、マットなニュートラルカラー。
4. 出力先とアスペクト比：ブログのメインビジュアル（16:9）、Twitter カード（1200×675）、LinkedIn（1200×627）、モバイルストーリー（9:16）、ドキュメント内（3:2）。
5. ダークモード版が必要ですか？ 必要な場合は、対になるダーク版も生成します。

ユーザーから詳細な依頼内容が提示されている場合は、省略してください。

実行方法

1. 背景の差し替えコストを見積もります。

   gen-ai models info recraftv3-replace-bg
   gen-ai pricing recraftv3-replace-bg
   

2. オプション A — 背景のみを差し替え（UI はピクセル単位でそのまま維持し、新しい背景に配置します）。スクリーンショット自体が完成版の場合に使います。

   gen-ai change-bg \
     -i ./raw.png \
     -p "soft studio gradient, magenta #FF006E to deep purple #0D0A1F, subtle rim light from top-left, very slight film grain" \
     --download ./out
   

3. オプション B — 全体を編集（デバイスフレーム、シャドウ、反射を一度に追加します）。モデルに再合成させたい場合に使います。

   gen-ai generate -m flux-kontext-pro \
     -i ./raw.png \
     -p "product screenshot of the provided UI, placed inside a MacBook Pro 14 bezel, floating slightly tilted at 4° right, soft drop shadow below, glassy reflection underneath, matte charcoal background, centered composition, 16:9" \
     --aspect-ratio 16:9 \
     --download ./out
   

4. オプション C — 背景のみ生成し、ローカルで合成（UI の忠実度を最大限に高めたい場合。任意）。ローカルの合成ツールが使える場合にのみ使用してください。使えない場合はオプション A または B を使用してください。背景を生成してから、sharp、ブラウザーの canvas／CSS、またはすでにインストールされている場合は ffmpeg を使って未加工の PNG を重ねます。

   gen-ai generate -m flux-2-pro \
     -p "abstract studio backdrop, soft magenta-to-purple gradient, subtle light orb top-left, empty center composition, 1920×1080" \
     --aspect-ratio 16:9 \
     --download ./out/bg
   # Then locally: sharp, browser canvas/CSS, or optional ffmpeg composite with device frame + shadow
   

5. ダークモード版も生成します。

   gen-ai generate -m flux-kontext-pro \
     -i ./out/result.png \
     -p "same composition, re-lit for dark mode: deep #0D0A1F background, teal #00F0FF accent rim light, subtle glow behind the device, keep UI content identical" \
     --aspect-ratio 16:9 \
     --download ./out/dark
   

6. 確認します。 未加工の画像と並べて開きます。UI のテキストが読みやすいことを確認してください。ベゼルのエッジが崩れていないこと、クロームが重複していないことも確認します。

クイックリファレンス

リリース用のスクリーンショットを一括でブラッシュアップします。

{
  "defaults": {
    "model": "flux-kontext-pro",
    "aspectRatio": "16:9"
  },
  "jobs": [
    { "id": "hero-dashboard",       "imageUrls": ["./raw/dashboard.png"],  "prompt": "MacBook Pro 14 bezel, soft drop shadow, magenta-to-purple studio gradient, slight 3° tilt right" },
    { "id": "hero-dashboard-dark",  "imageUrls": ["./raw/dashboard.png"],  "prompt": "MacBook Pro 14 bezel, deep #0D0A1F backdrop, teal rim light, subtle glow, identical UI content" },
    { "id": "hero-mobile-timer",    "imageUrls": ["./raw/timer.png"],      "prompt": "iPhone 16 Pro bezel, portrait, floating with soft shadow, gradient backdrop", "aspectRatio": "9:16" },
    { "id": "hero-settings",        "imageUrls": ["./raw/settings.png"],   "prompt": "Browser chrome (Arc-style), soft studio gradient, subtle reflection under window" }
  ]
}

gen-ai batch run screenshots.json -c 3 -o ./out/beautified を実行します。

クイックリファレンス

サブタスク	モデル	理由
UI をピクセル単位でそのまま維持して背景のみを差し替え	picsart-change-bg	UI の形状からエッジを最もきれいに抽出できます
背景を削除（透明な PNG を出力）	picsart-remove-bg	高速かつ安定しており、アンチエイリアスを保持します
デバイスフレーム、シャドウ、反射を追加（全面的に再合成）	flux-kontext-pro	編集性能に優れ、-i の参照に従います
ローカル合成用の背景のみを生成	flux-2-pro	テクスチャとライティングが最も豊かです
方向性を決める間のクイックドラフト	gemini-3.1-flash-image	クレジット消費が最小です
最終出力を印刷用にアップスケール	topaz-upscale-image	UI のエッジに配慮して 2〜4 倍に拡大します

gen-ai models --mode image で確認します。

手順

• JPEGではなく、必ずPNGを入力してください。 JPEGの圧縮アーティファクトは、モデルが画像を再合成するときに重なって目立ちます。
• UIを維持し、モデルに描き直させないでください。 テキストが書き換えられた場合は、アプローチが適切ではありません。オプションB（全面編集）からオプションC（部分合成）に切り替えてください。
• プロジェクトごとに配色を固定してください。 16進数の値を記載したbrand.mdを保存し、 を渡すことで、投稿ごとに背景が変わるのを防ぎます。
• デバイスのフレームは実物に合わせてください。 ユーザーが実際に使っていたデバイスを使用してください。AndroidのスクリーンショットをiPhoneのベゼルに収めて公開すると、信頼性を損ないます。
• 傾きは1か所にし、5か所にしないでください。 3〜5°の回転は高級感がありますが、15°以上ではストックフォトのように見えます。
• ダーク版は元画像ではなく、ライト版を基に作成してください。 すでに加工した出力を-iとして渡せば、影、傾き、ベゼルは同じままで、照明だけが変わります。
• 機密性の高いスクリーンショットには--save-to-driveを使わないでください（リリース前のUIや顧客データなど）。ローカルに保存するか、--no-save-to-driveを使用してください。
• 実際のユーザーデータを含むものは、加工する前にぼかしてください。モデルは漏えいしたメールアドレスをそのまま保持するため、先にぼかし処理を行ってください。

注意点

注意点	対処法
編集後にUIテキストが書き換えられる／文字化けする	オプションA（背景差し替え）またはオプションC（部分合成）を使用し、オプションBは使わないでください
デバイスのベゼルの角が溶けたように見える	Flux Kontext Proをやめ、remove-bgと実物のベゼルアセットを使ったローカルPNG合成を使用してください
遠近感がおかしい（傾きや魚眼効果がある）	プロンプトで「正面からの平面表示、遠近歪みなし」と明示するか、ローカルで合成してください
ダーク版でUIの色が変わる	ライト版を-iとして渡し、「UIの内容を同一に保ち、背景の照明だけを変える」とプロンプトで指定してください
スクリーンショットに漏えいした顧客データが含まれている	gen-aiを実行する前に、元のPNGでぼかすか、墨消ししてください
背景除去後にアンチエイリアスの縁が残る	PNG入力でpicsart-remove-bgを使用し、JPEGソースは避けてください
グラデーション背景とUIのアクセントカラーが合わない	UIのアクセントカラーをプロンプトの配色に取り入れ、コントラストを付けるのではなく、調和させてください

検証

gen-ai whoamiを実行して認証を確認し、その後、失敗したコマンドを--debug付きで再実行してください。

コストと所要時間

タスク	クレジット	時間
背景の差し替え（picsart-change-bg）	1-2	約4-8秒
背景の除去（picsart-remove-bg）	1	約3-5秒
デバイスフレームを使った全面編集（flux-kontext-pro）	3-6	約10-18秒
単独の背景画像（flux-2-pro）	3-5	約10-15秒
ライト版とダーク版のペア	+3-6	+10-18秒
4Kへのアップスケール（topaz-upscale-image）	2-4	約15-30秒
一般的なブログのヒーロー画像（ライト＋ダーク、フレーム付き）	約10-15	約30-45秒

関連項目

• gen-ai-use.md — CLIの全リファレンス、remove-bg、change-bg、enhanceのフラグ
• gen-ai-batch.md — 複数のスクリーンショットの一括処理と、部分実行向けのgen-ai batch resume <output-dir>
• gen-ai-workflows.md — 投稿アセット一式を作成するWorkflow 1（blog-to-visuals）
• dev-og-image-service — 加工したヒーロー画像をURLごとのOGカードに変換
• dev-app-assets — App Storeのスクリーンショットを大規模にフレーム付け