프롬프트/GPT Image 프롬프트/프롬프트 세부 정보이미지 프롬프트다크 JSON 비교 도구 UI 목업JSON API 비교 및 코드 비교 도구를 위한 세련된 다크 모드 데스크톱 UI 목업을 생성합니다.이 프롬프트는 참조 이미지와 함께 사용되었습니다이 프롬프트 사용좋아요0조회25북마크0이 프롬프트를 저장하거나 친구와 공유하세요.프롬프트 공유프롬프트복사Goal: Create a dark-mode desktop app UI mockup for a JSON diff tool named {argument name="app name" default="Tilted Diffs"}, showing an API response comparison titled {argument name="diff title" default="API Response — Checkout v2"}. 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.프롬프트 보기
