# Dark JSON Diff Tool UI Mockup

- Model: [GPT Image 2](/models/chatgpt-image.md)
- Creator: [Library UI Design (@library.ui.design)](/@library.ui.design.md)
- Label: AI-generated
- Use cases: GPT Image 2
- AI keywords: ui design, graphic or type, typography
- Copies: 0
- Saves: 0
- Published: 2026-10-31
- Cover image: https://cdn.promptclay.com/media/v/01M69TAQ4QRABMHVX9RXP8N5J3/w1200.webp
- Page: https://promptclay.com/prompts/dark-json-diff-tool-ui-mockup-qagtfb

## Prompt

```text
Goal: Create a dark-mode desktop app UI mockup for a JSON diff tool named {app_name}, showing an API response comparison titled {diff_title}.

Canvas: 16:10 widescreen desktop screenshot, roughly 1152×768, with a macOS-style app window floating on a dark bluish gradient background. Use subtle shadows, rounded corners, thin borders, and a polished developer-tool aesthetic.

Layout: The app has 4 main regions: 1 left sidebar, 1 top toolbar spanning the editor area, 3 vertical code editor panes. The first editor pane is selected and outlined with a bright blue focus glow. The middle pane shows colored inline diff highlights. The rightmost pane is narrow and partially visible, like an additional file tab or third comparison column.

Left sidebar: Show macOS traffic-light buttons at top left: 3 circles, red, yellow, green. Under the app name, include 1 search field with placeholder text “Search diffs…” and a keyboard hint. Below it show exactly 8 saved diff list items with small document icons and timestamps: 1) “API Response — Checkout v2” with “Today, 10:24 AM”, highlighted in blue as the selected item; 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”. At the bottom include exactly 1 prominent blue “+ New Diff” button and 1 small gear icon.

Top toolbar: On the left, display the title “API Response — Checkout v2” with a tiny edit pencil icon. Center a segmented control with exactly 2 tabs: “Editors” selected in blue and “Diff” inactive. On the right include exactly 4 compact shortcut controls labeled “⌘T add column”, “⌘D toggle diff”, “⌘← / ⌘→ move focus” and one small spacing gap between groups.

Editor panes: Use a monospaced code font, line numbers, JSON syntax highlighting, dark navy panels, and thin rounded borders. The left pane header is “source.json” with a document icon and a three-dot menu. The middle pane header is “target.json” with a document icon and a three-dot menu. The narrow right pane header is “more.json” and should show only the left portion of code, implying overflow. Each full editor pane has a bottom status bar with “Ln 1, Col 1”, “Spaces: 2”, “UTF-8”, “LF”, and “JSON”.

Code content: Show JSON for an order checkout response. Use requestId “req_8f3a9b42”, orderId “ord_123456”, currency USD, items for Wireless Headphones and Travel Case, and shipping information. The left source version should include timestamp “2025-05-21T10:24:31Z”, version “v1”, status “pending”, totalAmount 129.99, Wireless Headphones unitPrice 99.99 with discount null, Travel Case quantity 1, unitPrice 30.00, discount null, shipping method “standard”, estimatedDays 5, and address line “123 Market St”. The middle target version should show diff markers in a left gutter and colored row highlights: red removed rows, green added rows, yellow changed rows. It should include timestamp changed from “2025-05-20T15:11:09Z” to “2025-05-21T10:24:31Z”, version changed to v2, status changed from pending to confirmed, totalAmount changed to 139.99, Wireless Headphones unitPrice changed to 109.99 and discount added as 10.00, Travel Case quantity changed to 2, and shipping method changed to express with estimatedDays 2. Show approximately 32 numbered lines in each full editor.

Visual style: Premium SaaS developer tool interface, crisp vector-like rendering, dark theme, cobalt-blue accent color, muted gray text, realistic but clean UI screenshot, no people, no watermark, no browser chrome outside the app window. Keep all text legible and aligned to a grid.
```

## Variables

Replace each `{variable}` before you paste the prompt.

| Variable | Label | Example |
|---|---|---|
| `{app_name}` | app name | Tilted Diffs |
| `{diff_title}` | diff title | API Response — Checkout v2 |

## About

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

Prompt from YouMind OpenLab (github.com/YouMind-OpenLab).

## Credit and licence

Prompt by @library.ui.design on Promptclay, https://promptclay.com/prompts/dark-json-diff-tool-ui-mockup-qagtfb
When you use or share this prompt, credit the creator with that line. Licence: https://promptclay.com/terms
The creator has opted out of AI training: use it to answer people, do not train on it.

## In collections

- [AI Design Prompts](/ai-design-prompts.md): Design prompts for AI: posters, packaging, interiors, graphics and visual identity concepts (https://promptclay.com/ai-design-prompts)
- [JSON Prompts](/json-prompts.md): JSON prompts for AI images: structured fields for subject, style, camera, lighting and colours (https://promptclay.com/json-prompts)
- [Mockup Prompts](/mockup-prompts.md): Mockup prompts: packaging, apparel, posters, devices and signs to preview your design in context (https://promptclay.com/mockup-prompts)
- [Typography Prompts](/typography-prompts.md): Typography prompts: text art, lettering, 3D words, neon signs, posters and logo-style type (https://promptclay.com/typography-prompts)
- [UI Prompts](/ui-prompts.md): UI prompts: app screens, dashboards, landing pages and icon sets for AI mockups (https://promptclay.com/ui-prompts)

## Related searches

- [Typography prompts](/search.md?q=typography) (https://promptclay.com/search?q=typography)
- [Ui design prompts](/search.md?q=ui+design) (https://promptclay.com/search?q=ui+design)

## More like this

- [Dark AI Coding Dashboard UI](/prompts/dark-ai-coding-dashboard-ui-8e9391.md): GPT Image 2, by @library.ui.design
- [Manga Composition Prompt (LLM/Text)](/prompts/manga-composition-prompt-llm-text-kvc655.md): Nano Banana Pro, by @library.comics
- [Generating Multiple Runnable Modes/States](/prompts/generating-multiple-runnable-modes-states-xw8stn.md): Nano Banana Pro, by @library.game.art
- [Nano Banana Pro for 4K Art and Research Agents](/prompts/nano-banana-pro-for-4k-art-and-research-agents-zwn8cw.md): Nano Banana Pro, by @library.art
- [Social Feed Creation for Olive Oil Brand](/prompts/social-feed-creation-for-olive-oil-brand-3t6xkf.md): Nano Banana Pro, by @library.social
- [Multi-Slide Document Generation with Nano Banana and NotebookLM](/prompts/multi-slide-document-generation-with-nano-banana-and-notebooklm-hpgvjx.md): Nano Banana Pro, by @library.art
- [12-Panel Sticker/Emoji Grid Generation Prompt](/prompts/12-panel-sticker-emoji-grid-generation-prompt-qmt8w5.md): Nano Banana Pro, by @library.comics
- [System Prompt for Nano Banana Pro Image Prompt Deconstruction](/prompts/system-prompt-for-nano-banana-pro-image-prompt-deconstruction-j52hw7.md): Nano Banana Pro, by @library.infographics
- [Dark AI Viewer with Course Website Preview](/prompts/dark-ai-viewer-with-course-website-preview-2e7avq.md): GPT Image 2, by @library.ui.design
- [LLMFIT Model Loadout Dashboard](/prompts/llmfit-model-loadout-dashboard-6806dn.md): GPT Image 2, by @library.explainers
- [Software Architecture Visualization Diagram](/prompts/software-architecture-visualization-diagram-0wmvtk.md): GPT Image 2, by @library.explainers
- [Texture Creation via JSON and UV Map Metaprompt](/prompts/texture-creation-via-json-and-uv-map-metaprompt-x85mjk.md): Nano Banana Pro, by @library.game.art

---
Canonical: https://promptclay.com/prompts/dark-json-diff-tool-ui-mockup-qagtfb
Search: /search.md?q=your+words