ダークモード JSON Diff ツール UI モックアップ
JSON API の差分比較およびコード比較ツールの、洗練されたダークモード・デスクトップ UI モックアップを生成します。
プロンプト
目的: Tilted Diffs という名称の JSON Diff ツールのダークモード・デスクトップアプリ UI モックアップを作成する。API Response — Checkout v2 というタイトルの API レスポンス比較画面を表示すること。
キャンバス: 16:10 のワイドスクリーン・デスクトップのスクリーンショット（約 1152×768）。ダークブルーのグラデーション背景に、macOS スタイルのアプリウィンドウを浮かべる。繊細な影、角丸、細い境界線を使用し、洗練された開発者ツールのような美学を追求する。
レイアウト: アプリは 4 つの主要領域で構成される。左サイドバー 1 つ、エディター領域にまたがる上部ツールバー 1 つ、垂直コードエディター・ペイン 3 つ。最初のエディター・ペインが選択されており、明るい青色のフォーカス・グローで縁取られている。中央のペインには、色分けされたインラインの差分ハイライトを表示する。一番右のペインは幅が狭く、追加のファイルタブや 3 列目の比較カラムのように一部のみが見えている状態にする。
左サイドバー: 左上に macOS の信号機ボタン（赤、黄、緑の 3 つの円）を表示する。アプリ名の下に、「Search diffs…」というプレースホルダーテキストとキーボードヒントを含む検索フィールドを 1 つ配置する。その下に、小さなドキュメントアイコンとタイムスタンプが付いた保存済み差分リストを正確に 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」ボタン 1 つと、小さなギアアイコン 1 つを配置する。
上部ツールバー: 左側に小さな編集用鉛筆アイコン付きで「API Response — Checkout v2」というタイトルを表示する。中央には「Editors」（青色で選択）と「Diff」（非アクティブ）の 2 つのタブを持つセグメントコントロールを配置する。右側には、「⌘T add column」、「⌘D toggle diff」、「⌘← / ⌘→ move focus」とラベル付けされた 4 つのコンパクトなショートカットコントロールを配置し、グループ間に小さな間隔を設ける。
エディター・ペイン: 等幅フォント、行番号、JSON 構文ハイライト、ダークネイビーのパネル、細い角丸の境界線を使用する。左ペインのヘッダーは「source.json」（ドキュメントアイコンと 3 点メニュー付き）、中央ペインのヘッダーは「target.json」（ドキュメントアイコンと 3 点メニュー付き）、右の狭いペインのヘッダーは「more.json」（コードの左側のみを表示し、オーバーフローを表現）とする。各フルエディター・ペインの下部には、「Ln 1, Col 1」、「Spaces: 2」、「UTF-8」、「LF」、「JSON」と表示されたステータスバーを配置する。
コード内容: 注文決済レスポンスの JSON を表示する。requestId に「req_8f3a9b42」、orderId に「ord_123456」、通貨に USD、アイテムに Wireless Headphones と Travel Case、および配送情報を使用する。左側のソースバージョンには、タイムスタンプ「2025-05-21T10:24:31Z」、バージョン「v1」、ステータス「pending」、totalAmount 129.99、Wireless Headphones の unitPrice 99.99（discount は null）、Travel Case の数量 1、unitPrice 30.00（discount は null）、配送方法「standard」、estimatedDays 5、住所「123 Market St」を含める。中央のターゲットバージョンには、左側のガターに差分マーカーを表示し、行を色分けする（赤：削除、緑：追加、黄：変更）。タイムスタンプを「2025-05-20T15:11:09Z」から「2025-05-21T10:24:31Z」へ変更、バージョンを v2 へ変更、ステータスを pending から confirmed へ変更、totalAmount を 139.99 へ変更、Wireless Headphones の unitPrice を 109.99 へ変更し discount を 10.00 として追加、Travel Case の数量を 2 へ変更、配送方法を express へ変更し estimatedDays を 2 とする。各フルエディターに約 32 行の番号付き行を表示する。
視覚スタイル: プレミアムな SaaS 開発者ツールインターフェース、鮮明なベクター風レンダリング、ダークテーマ、コバルトブルーのアクセントカラー、落ち着いたグレーのテキスト。人物や透かし、アプリウィンドウ外のブラウザクロームは含めない。すべてのテキストは読みやすく、グリッドに合わせて配置する。
このプロンプトの使い方
- 1
上の完全なプロンプトをコピーします。
- 2
GPT Image 2 に対応したプラットフォーム（YouMind など）を開き、プロンプトを貼り付けます。
- 3
アイデアに合わせて被写体・スタイル・細部を入れ替え、生成します。
これは YouMind のプロンプトライブラリにある無料の AI プロンプトです。ほかにも数千点の 画像 プロンプトがあり、すべて自由にコピーして使えます。
ほかの 画像 プロンプトを見る
その他のプロンプト機能
ビジョンツール
画像からプロンプト
どんな写真も詳細な AI 画像プロンプトに変換。無料の Image to Prompt 変換ツールが構図・スタイル・ライティングを解析し、数秒で同じ表現を再現できます。
クリエイターのために。ずっと無料。
YouMind は世界中のクリエイターに信頼される AI 制作パートナーです。ここにあるプロンプトは、より速く、より良い制作を助けるために厳選されています。