深色模式 JSON Diff 工具 UI 模型

為 JSON API diff 與程式碼比較工具生成精緻的深色模式桌面端 UI 模型。

提示詞

目標：為名為 Tilted Diffs 的 JSON diff 工具建立一個深色模式桌面應用程式 UI 模型，並展示標題為 API Response — Checkout v2 的 API 回應比較。畫布：16:10 寬螢幕桌面截圖，約 1152×768，視窗呈現 macOS 風格，懸浮於深藍色漸層背景上。運用細緻的陰影、圓角、細邊框，打造精緻的開發者工具美學。佈局：應用程式包含 4 個主要區域：1 個左側邊欄、1 個橫跨編輯器區域的頂部工具列、3 個垂直程式碼編輯窗格。第一個編輯窗格為選取狀態，並以亮藍色焦點光暈標示。中間窗格顯示彩色行內 diff 高亮。最右側窗格較窄且僅部分可見，類似額外的檔案分頁或第三個比較欄。左側邊欄：左上角顯示 macOS 風格的紅、黃、綠交通燈按鈕。在應用程式名稱下方，包含 1 個搜尋欄，預留位置文字為「Search diffs…」並附帶鍵盤提示。下方顯示 8 個已儲存的 diff 列表項目，附帶小型文件圖示與時間戳記：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」。底部包含 1 個顯眼的藍色「+ New Diff」按鈕與 1 個小型齒輪圖示。頂部工具列：左側顯示標題「API Response — Checkout v2」及一個微小的編輯鉛筆圖示。中央為分段控制器，包含 2 個分頁：「Editors」（藍色選取狀態）與「Diff」（未選取）。右側包含 4 個緊湊的快捷鍵控制項，標示為「⌘T add column」、「⌘D toggle diff」、「⌘← / ⌘→ move focus」，組與組之間留有小間距。編輯窗格：使用等寬程式碼字體、行號、JSON 語法高亮、深海軍藍面板及細圓角邊框。左側窗格標題為「source.json」，附帶文件圖示與三點選單。中間窗格標題為「target.json」，附帶文件圖示與三點選單。狹窄的右側窗格標題為「more.json」，僅顯示程式碼的左側部分，暗示內容溢出。每個完整編輯窗格底部均有狀態列，顯示「Ln 1, Col 1」、「Spaces: 2」、「UTF-8」、「LF」與「JSON」。程式碼內容：顯示訂單結帳回應的 JSON。使用 requestId「req_8f3a9b42」、orderId「ord_123456」、貨幣 USD，以及無線耳機與旅行收納盒的項目與運送資訊。左側來源版本應包含時間戳記「2025-05-21T10:24:31Z」、版本「v1」、狀態「pending」、總金額 129.99、無線耳機單價 99.99（折扣為 null）、旅行收納盒數量 1、單價 30.00（折扣為 null）、運送方式「standard」、預計天數 5，以及地址「123 Market St」。中間目標版本應在左側裝訂線顯示 diff 標記，並以顏色高亮列：紅色為刪除行、綠色為新增行、黃色為修改行。內容應包含時間戳記從「2025-05-20T15:11:09Z」變更為「2025-05-21T10:24:31Z」、版本變更為 v2、狀態從 pending 變更為 confirmed、總金額變更為 139.99、無線耳機單價變更為 109.99 並新增折扣 10.00、旅行收納盒數量變更為 2，以及運送方式變更為 express 且預計天數變更為 2。每個完整編輯器顯示約 32 行編號程式碼。視覺風格：頂級 SaaS 開發者工具介面，清晰的向量級渲染，深色主題，鈷藍色強調色，柔和的灰色文字，真實且簡潔的 UI 截圖，無人物，無浮水印，應用程式視窗外無瀏覽器邊框。確保所有文字清晰易讀並對齊網格。