# GPT Image Hub prompt

## 暗黑模式开发者 JSON 差分对比工具 UI
- URL: https://www.gptimagehub.com/zh-CN/library/dark-mode-developer-json-diff-tool-ui
- Generator URL: https://www.gptimagehub.com/zh-CN/generate?promptId=oss-ym-g2-21928
- Markdown URL: https://www.gptimagehub.com/api/agent/markdown?path=%2Fzh-CN%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 及加急配送等更新。
```