ダークモード JSON Diff ツール UI モックアップ

Generates a polished dark-mode desktop UI mockup for a JSON API diff and code comparison tool.

目標：{argument name="app name" default="Tilted Diffs"}と名付けられたJSON差分ツールのダークモードデスクトップアプリUIモックアップを作成し、{argument name="diff title" default="API Response — Checkout v2"}と題されたAPIレスポンス比較を表示。

キャンバス：16:10ワイドスクリーンデスクトップスクリーンショット、約1152×768。ダークな青みがかったグラデーション背景に浮かぶmacOSスタイルのアプリウィンドウ。微かな影、丸みのある角、細い枠、洗練された開発者ツールの美学を使用。

レイアウト：アプリには4つの主要領域：1つの左サイドバー、1つの編集エリア全体にまたがるトップツールバー、3つの垂直コードエディタペイン。最初のエディタペインが選択され、明るい青いフォーカスグローで縁取られている。中央のペインにはカラフルなインライン差分ハイライトが表示。最も右のペインは狭く、部分的に見える。追加のファイルタブや3番目の比較列のようなもの。

左サイドバー：左上にmacOSのトラフィックライトボタンを表示：3つの円、赤、黄、緑。アプリ名の下に、プレースホルダーテキスト “Search diffs…” とキーボードヒントを持つ1つの検索フィールドを含む。その下に正確に8つの保存された差分リスト項目を、小さなドキュメントアイコンとタイムスタンプ付きで表示：1) “API Response — Checkout v2” with “Today, 10:24 AM”、選択されたアイテムとして青でハイライト；2) “User Profile — Public API” with “Yesterday, 4:18 PM”；3) “Orders Endpoint — v1 vs v2” with “May 20, 2025, 9:14 AM”；4) “Product Catalog — EU Region” with “May 19, 2025, 2:47 PM”；5) “Auth Response — SSO” with “May 18, 2025, 11:03 AM”；6) “Billing Summary — Q2” with “May 17, 2025, 3:22 PM”；7) “Webhook Payload — Stripe” with “May 16, 2025, 10:11 AM”；8) “Search Results — Relevance” with “May 15, 2025, 5:35 PM”。底に正確に1つの目立つ青い“+ New Diff”ボタンと1つの小さな歯車アイコンを含む。

トップツールバー：左に、小さな編集鉛筆アイコン付きでタイトル “API Response — Checkout v2” を表示。中央に正確に2つのタブを持つセグメントコントロール：“Editors” が青で選択状態、“Diff” が非アクティブ。右に正確に4つのコンパクトなショートカットコントロール “⌘T add column”、 “⌘D toggle diff”、 “⌘← / ⌘→ move focus” とグループ間の1つの小さなスペースギャップを含む。

エディタペイン：モノスペースコードフォント、行番号、JSON構文ハイライト、ダークネイビーのパネル、細い丸みのある枠を使用。左ペインヘッダーは “source.json” でドキュメントアイコンと3つのドットメニュー付き。中央ペインヘッダーは “target.json” でドキュメントアイコンと3つのドットメニュー付き。狭い右ペインヘッダーは “more.json” で、コードの左部分のみを表示し、オーバーフローを示唆。各フルエディタペインには “Ln 1, Col 1”、 “Spaces: 2”、 “UTF-8”、 “LF”、 “JSON” を持つボトムステータスバーがある。

コード内容：注文チェックアウトレスポンスのJSONを表示。requestId “req_8f3a9b42”、orderId “ord_123456”、通貨USD、Wireless Headphones と Travel Case のアイテム、配送情報を使用。左のソースバージョンには、タイムスタンプ “2025-05-21T10:24:31Z”、バージョン “v1”、ステータス “pending”、totalAmount 129.99、Wireless Headphones unitPrice 99.99 と discount null、Travel Case quantity 1、unitPrice 30.00、discount null、配送方法 “standard”、estimatedDays 5、住所行 “123 Market St” を含む。中央のターゲットバージョンには、左ガターの差分マーカーとカラフルな行ハイライト：赤い削除行、緑の追加行、黄色の変更行。タイムスタンプが “2025-05-20T15:11:09Z” から “2025-05-21T10:24:31Z” に変更、バージョンがv2に変更、ステータスがpendingからconfirmedに変更、totalAmountが139.99に変更、Wireless Headphones unitPriceが109.99に変更且つdiscountとして10.00が追加、Travel Case quantityが2に変更、配送方法がexpressに変更且つestimatedDays 2 を表示。各フルエディタに約32行の番号付き行を表示。

ビジュアルスタイル：プレミアムSaaS開発者ツールインターフェース。鋭いベクトルライクなレンダリング。ダークテーマ。コバルトブルーアクセントカラー。ミュートグレーテキスト。現実的だがクリアなUIスクリーンショット。人々なし、透かしなし、アプリウィンドウ外のブラウザクロームなし。すべてのテキストを読みやすく、グリッドにアラインメント。

機械翻訳 — この作品を生成したのは元のプロンプトです。

✨ 生成 保存 プロンプトをコピー 共有 元の投稿 Hitboard で開く