ダークJSON差分ツールUIモックアップ

目的: {argument name="app name" default="Tilted Diffs"} という名前の JSON diff ツール用のダークモード デスクトップ アプリケーション UI プロトタイプを作成し、{argument name="diff title" default="API Response — Checkout v2"} というタイトルの API レスポンス比較を表示します。キャンバス: 約 1152×768 の 16:10 ワイドスクリーン デスクトップ スクリーンショットで、暗い青のグラデーションの背景に macOS スタイルのアプリケーション ウィンドウが浮かんでいます。微妙な影、丸みを帯びた角、細い境界線、洗練された開発者ツールの美学を活用します。レイアウト: アプリケーションは、左サイドバー、エディタ領域にまたがる上部ツールバー、および 3 つの垂直コード エディタ パネルの 4 つの主要領域で構成されています。最初のエディタ パネルは、明るい青色のフォーカス ハローで選択されています。中央のパネルには、色付きのインライン diff ハイライトが表示されます。右端のパネルは幅が狭く、部分的に表示されており、追加のファイル タブまたは 3 番目の比較列のように見えます。左サイドバー: 左上の角には、macOS の信号ボタンが表示されます。3 つの円はそれぞれ赤、黄、緑です。アプリ名の下には、「差分を検索…」というプレースホルダーテキストとキーボード候補が表示される検索ボックスがあります。その下には、保存された差分リスト項目が 8 つ表示され、それぞれに小さなドキュメントアイコンとタイムスタンプが付いています。1)「API レスポンス - チェックアウト v2」、選択された項目として青色で強調表示され、「今日、午前 10:24」と表示されます。2)「ユーザー プロファイル - パブリック API」、表示は「昨日、午後 4:18」です。3)「注文エンドポイント - v1 vs v2」、表示は「2025 年 5 月 20 日、午前 9:14」です。4)「製品カタログ - EU 地域」、表示は「2025 年 5 月 19 日、午後 2:47」です。5)「認証レスポンス - SSO」、表示は「2025 年 5 月 18 日、午前 11:03」です。6)「請求概要 - 第 2 四半期」、表示は「2025 年 5 月 17 日、午後 3:22」です。 7) 「Webhook Payload - Stripe」には「2025年5月16日 午前10時11分」と表示されます。8) 「検索結果 - 関連性」メッセージには「2025年5月15日 午後5時35分」と表示されます。下部には目立つ青色の「+ New Diff」ボタンと小さな歯車アイコンがあります。上部のツールバーの左側には「API Response - Checkout v2」が表示され、小さな編集ペンシルアイコンが添えられています。中央のセグメントコントロールには「Editors」（青色で選択）と「Diff」（未選択）の2つのラベルがあります。右側には「⌘T 列を追加」、「⌘D 差分を切り替え」、「⌘← / ⌘→ フォーカスを移動」というラベルの付いた4つのコンパクトなキーボードショートカットがあり、グループ間には小さな間隔があります。エディターパネルは等幅のコードフォント、行番号、JSON構文のハイライト表示、濃い紺色のパネル、細い丸みを帯びた境界線を使用しています。左側のパネルには「source.json」というタイトルとドキュメントアイコン、3点メニューがあります。中央のパネルには「target.json」というタイトルとドキュメントアイコン、3点メニューがあります。右側の狭いパネルには「more.json」というタイトルがあり、コードの左側のみが表示されるため、オーバーフローが発生していることがわかります。各フルエディタパネルの下部にはステータスバーがあり、「Ln 1, Col 1」、「Spaces: 2」、「UTF-8」、「LF」、「JSON」と表示されます。コードの内容は、注文チェックアウトに対するJSONレスポンスを表示します。リクエストID「req_8f3a9b42」、注文ID「ord_123456」、通貨USD、ワイヤレスヘッドホンとトラベルポーチの製品情報と配送情報を使用します。左側のソースバージョンには、タイムスタンプ「2025-05-21T10:24:31Z」、バージョン「v1」、ステータス「保留中」、合計金額129.99、ワイヤレスヘッドホン単価99.99（割引なし）、トラベルポーチ数量1、単価30.00（割引なし）、配送方法「標準」、推定日数5、住所「123 Market St」が含まれている必要があります。中間ターゲットバージョンには、左側のガターに差分マーカーが表示され、削除された行は赤、追加された行は緑、変更された行は黄色で色付きの線で強調表示される必要があります。これには、タイムスタンプが「2025-05-20T15:11:09Z」から「2025-05-21T10:24:31Z」に変更され、バージョンがv2に変更され、ステータスが保留から確認済みに変更され、合計金額が139.99に変更され、ワイヤレスイヤホンの単価が10.00割引で109.99に変更され、トラベルポーチの数量が2に変更され、配送方法が速達に変更され、推定日数が2に変更されるなどの変更が含まれる必要があります。各フルエディタには、番号付きのコードが約32行表示される必要があります。ビジュアルスタイル：高度なSaaS開発者ツールインターフェース、鮮明なベクターレベルのレンダリング、ダークテーマ、コバルトブルーのアクセントカラー、ソフトグレーのテキスト、リアルでありながらクリーンなUIスクリーンショット、人物のフィギュアなし、透かしなし、アプリケーションウィンドウ外のブラウザの境界線なし。すべてのテキストは明確にグリッドに揃えてください。