# GPT Image Hub prompt

## 深色模式開發者 JSON 差異比對工具 UI
- URL: https://www.gptimagehub.com/zh-TW/library/dark-mode-developer-json-diff-tool-ui
- Generator URL: https://www.gptimagehub.com/zh-TW/generate?promptId=oss-ym-g2-21928
- Markdown URL: https://www.gptimagehub.com/api/agent/markdown?path=%2Fzh-TW%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應用, 軟體介面
- Updated: 2026-10-27T01:42:53.098Z
- Created: 2026-10-27T01:42:53.098Z

生成深色模式下多欄 JSON 程式碼比對工具的精美 macOS 桌面 UI 原型。可在括號中自訂軟體名稱、比對標題或程式碼內容。

### Full prompt
```text
一款名為 [Tilted Diffs] 的 JSON 程式碼比對工具暗黑模式桌面應用 UI 原型，顯示標題為 [API Response — Checkout v2] 的 API 響應資料比對。

畫布與風格：16:10 寬屏桌面截圖，macOS 風格的應用視窗懸浮在深藍漸變背景上。帶有柔和陰影、圓角、細邊框和精緻的開發者工具 SaaS 質感。採用清晰向量風格的 UI 渲染，鈷藍色高亮，深藏青色背景，低調灰色文字，文字嚴格對齊網格。無人物、無水印、無視窗外部的瀏覽器邊框。

佈局：分為四個主要區域：左側邊欄、頂部工具欄、並排的三個垂直程式碼編輯器面板。最左側編輯器面板處於選中狀態，帶有明亮的藍色焦點光暈。中間面板顯示帶顏色的行內差分高亮。最右側面板較窄且部分可見，表示額外的對比列。

左側邊欄：左上方有 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 及加急配送等更新。
```