# GPT Image Hub prompt

## ダークモード開発者向けJSON差分ツールUI
- URL: https://www.gptimagehub.com/ja/library/dark-mode-developer-json-diff-tool-ui
- Generator URL: https://www.gptimagehub.com/ja/generate?promptId=oss-ym-g2-21928
- Markdown URL: https://www.gptimagehub.com/api/agent/markdown?path=%2Fja%2Flibrary%2Fdark-mode-developer-json-diff-tool-ui
- Category: UI / UX デザイン
- Model: gpt-image-2
- Aspect ratio: 16:9
- Style: graphic-design
- Tags: uiモックアップ, 開発者ツール, ダークモード, json比較, macosアプリ, ソフトウェアui
- Updated: 2026-10-27T01:42:53.098Z
- Created: 2026-10-27T01:42:53.098Z

ダークモードのmacOS向け複数カラムJSON比較アプリの洗練されたUIモックアップを生成。括弧内のアプリ名や比較タイトルを変更して調整できます。

### Full prompt
```text
ダークモードのデスクトップアプリUIモックアップ。JSON比較ツール名「[Tilted Diffs]」、APIレスポンス比較タイトル「[API Response — Checkout v2]」を表示。

キャンバスとスタイル：ダークブルーのグラデーション背景に浮かぶmacOSスタイルのアプリウィンドウの16:10デスクトップスクリーンショット。繊細なソフトドロップシャドウ、角丸、細いボーダー、洗練された開発者向けSaaSデザイン。コバルトブルーのアクセント、ダークネイビーの背景、落ち着いたグレーのテキストによる鮮明なベクター風UIレンダリング。人物や透かし、外部ブラウザ枠はなし。

レイアウト：左サイドバー、上部ツールバー、並んだ3つの縦型コードエディタペインの4つの領域。左端のエディタペインは青いフォーカス光で囲まれ選択中。中央ペインはインラインの色分け差分ハイライトを表示。右端ペインは狭く一部のみ表示され、追加比較列を示す。

左サイドバー：左上にmacOSの信号機ボタン（赤・黄・緑）。アプリ名の下に「Search diffs…」とキーボードヒント付きの検索フィールド。その下にアイコンと日時が付いた8件の保存済み差分リスト：1)「API Response — Checkout v2」「Today, 10:24 AM」（青くアクティブ選択）、2)「User Profile — Public API」「Yesterday, 4:18 PM」、3)「Orders Endpoint — v1 vs v2」「May 20, 2025, 9:14 AM」、4)「Product Catalog — EU Region」「May 19, 2025, 2:47 PM」、5)「Auth Response — SSO」「May 18, 2025, 11:03 AM」、6)「Billing Summary — Q2」「May 17, 2025, 3:22 PM」、7)「Webhook Payload — Stripe」「May 16, 2025, 10:11 AM」、8)「Search Results — Relevance」「May 15, 2025, 5:35 PM」。下部に青い「+ New Diff」ボタンと設定ギアアイコン。

上部ツールバー：左側に「API Response — Checkout v2」と鉛筆アイコン。中央にセグメントタブ（青いアクティブ「Editors」と非アクティブ「Diff」）。右側にショートカットバッジ（「⌘T add column」「⌘D toggle diff」「⌘← / ⌘→ move focus」）。

エディタペイン：等幅フォント、行番号（約32行）、JSONシンタックスハイライト、ダークネイビー背景。ペインタブ：左「source.json」、中央「target.json」、右「more.json」。各ペイン下部に「Ln 1, Col 1」「Spaces: 2」「UTF-8」「LF」「JSON」のステータスバー。

コード内容：チェックアウトJSONデータ。左ペインは「pending」、totalAmount 129.99、標準配送。中央ペインは差分ハイライト（削除行赤、追加行緑、変更行黄）で「confirmed」、totalAmount 139.99、お急ぎ便への変更を表示。
```